Joomla Templates Club 406,261 posts

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#175175

My test site is http://sufipaths.net/box4

I’ve done some edits in the default layout which seem to have worked. I’d like to resize the red box at the top, I don’t see its size in HEADER.PHP or TEMPLATE.CSS, can you direct me to where would be?

Also I’d like to use our body background image that would be visible on the sides of the screen. Something like our old J1.5 site, http://ruhaniat.org/ — which I’m trying to emulate as I upgrade. Can you tell me where to insert that image filename?

Thanks — Howard Ballinger

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#444559

Greetings Howard:

How are you wanting the “red box” – which is actually the header background color – to be resized?
In other words, what are you wanting the end result to look like (height/width)?

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#444570

I probably want the logo image to fill the header rectangle entirely — currently that’s 930 x 166 unless I change the graphic.

Or I might make it taller and put the search box in it at the top right, and in that case I’ll change the header bkg to black or something.

Thanks for your prompt response! — HB

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#444571

Howard:
Need you to do me a favor and set “Optimize CSS” to “No” within your Template Manager–General settings.

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#444572

OK, done! — H

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#444576

<em>@shafee_howard 308676 wrote:</em><blockquote>I probably want the logo image to fill the header rectangle entirely — currently that’s 930 x 166 unless I change the graphic.</blockquote>

What if you were to keep your logo image the size it is, but simply change the background color to black?

In which case what you would do is go into your template.css file (within the following file path):

/templates/ja_nex/css/template.css

and, at line 632, modify as follows:

#ja-header {
background: none repeat scroll 0 0 #000000;
}


Might that work – rather than enlarging the actual logo image itself?

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#444588

OK thanks, that’s a good start. But I still would like to change the overall background (currently set as “#EEEEEE”) and have it show on the sides of the body. I’ve set the Template Width at 930, I’d like to set the header and also the top.mainnav at that same width since Template Width doesn’t seem to affect them.

(The background we want to use is at box4/templates/ja_nex/images/sri-bkg.jpg).

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#444825

Looking for a further response — the question that still needs to be answered is how to set a width for the whole template (including header and also top.mainnav) — also how to set a background for whole template so it will show on both sites.

Thanks — Howard Ballinger

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#444965

Here is something you can try . . . .

For the Header section, /templates/ja_nex/css/template.css at line 632

<blockquote>#ja-header {
background: none repeat scroll 0 0 #CC3333;
margin-left: 485px;
width: 930px;

}

</blockquote>

For the Main Nav section, same template.css file at line 680

<blockquote>#ja-mainnav {
background: url(“../images/mainnav-bg.gif”) repeat-x scroll left bottom #CC3333;
padding-bottom: 6px;
margin-left: 485px;
width: 930px;

}

</blockquote>

And finally, for the overall background color, same template.css file at line 22

<blockquote>body#bd {
background: none repeat scroll 0 0 #EEEEEE;
color: #666666;

}

</blockquote>

Change the background color code to whatever color you want.

Does this achieve the results you were looking for?

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#445108

Great unhappiness — I composed a whole reply and then hit “Go Advanced” — it said my token had expired and my reply was gone!

Oh well, I’ll write it again. Mas o menos.

Thanks, it looks like we’re really getting somewhere. I still have my work cut out for me. The colorful bkg is now displayed. Site here. But ‘header’ and ‘mainnav’ are still not centered.

I tried them initially with that large margin, and that put them halfway across the screen. Changing the margin to zero, they now hug the left side of the viewport.

But everything below mainnav appears to be centered in the viewport, and I assume it will do that even on all those huge monitors. That’s what I want. I suspect it’s all within some container element which is centered; but I can’t find it if that’s the case. (I’ve looked at a LOT of the template files, CSS etc). Can I get these two blocks at the top centered as well?

BTW I really appreciate your articles on this support site — I was reading the one on new modules, very clear and to the point.

Thanks — Howard Ballinger

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#445115

Thanks, it looks like we’re really getting somewhere. I still have my work cut out for me. The colorful bkg is now displayed. Site here. But ‘header’ and ‘mainnav’ are still not centered.

I tried them initially with that large margin, and that put them halfway across the screen. Changing the margin to zero, they now hug the left side of the viewport.

But everything below mainnav appears to be centered in the viewport, and I assume it will all stay centered even on all those huge monitors. That’s what I want. I suspect they are all within some container element which is centered; but I can’t find it if that’s the case. (I’ve looked at a LOT of the template files, CSS etc). Can I get these two blocks at the top centered as well?

BTW I really appreciate your articles on this support site — I was reading the one on new modules, very clear and to the point.

Thanks — Howard Ballinger

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#445122

Howard:

Try this within –> /plugins/system/jat3/jat3/base-themes/default/css/template.css

at line 991 . . . .

<blockquote>#ja-header {
margin: 0 auto;
position: relative;
width: 930px;
z-index: 10;
}
</blockquote>

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#445690

Hmm, didn’t seem to change anything. The header is still not centered in the viewport — it’s flush left. Screenshots attached.

Thanks — Howard Ballinger

---

Attachments:

1. 
2. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#445744

Okay, well … you’ve obviously performed some additional modifications since I last saw the site – and some of the previous recommendations I made weren’t yet implemented (from my viewing of the CSS). So . . . . .

FOR THE HEADER:
Within file path –> /ja_nex/css/template.css

at line 641, make the following modifications:

<blockquote>#ja-header {
background: none repeat scroll 0 0 #CC3333;
margin-left: 490px;
width: 930px;

}

</blockquote>

FOR THE MAIN NAV:
Within file path –> /ja_nex/css/template.css

at line 698, make the following modifications:

<blockquote>#ja-mainnav {
background: url(“../images/mainnav-bg.gif”) repeat-x scroll left bottom #CC3333;
margin-left: 490px;
padding-bottom: 6px;
width: 930px;

}

</blockquote>

This will center both you header and main-nav.

[shafee_howard Friend shafee_howardJoin date: March 2012Posts: 38Downloads:0Uploads:15 Thanks: 15 Thanked: 1 times in 1 posts]

#446135

Hi Tom, sorry I wasn’t clear in my reply (#11) — I did paste those in. But the areas didn’t get centered. http://sufipaths.net/box4/

That’s why I took out the 490 px margins.But I still don’t get these two top divs centered the way the rest of the template is (screenshot in #13). They are now back in and the result is as you can see.

I also tried both with and without the changes suggested for /plugins/system/jat3/jat3/base-themes/default/css/template.css. I just now put the changes back in, per post #12 in this thread. I don’t notice any difference.

Appreciate your help in tracking this down — HB

---

Attachments:

1. 

[Author]

Posts