Joomla Templates Club 406,261 posts

[quiff Friend quiffJoin date: December 2009Posts: 6Downloads:0Uploads:0 Thanks: 2 Thanked: 2 times in 1 posts]

#147157

Hello, yes me again.

Amazingly, I worked this out for myself…

Cant seem to delete this post though :((

Cheers,
Q

[crazyleggs Friend crazyleggsJoin date: May 2008Posts: 138Downloads:3Uploads:4 Thanks: 16 Thanked: 17 times in 1 posts]

#328105

Why don’t you share your results so that others can benefit from it.
You can also set this post to “Solved”

[quiff Friend quiffJoin date: December 2009Posts: 6Downloads:0Uploads:0 Thanks: 2 Thanked: 2 times in 1 posts]

#328148

<em>@crazyleggs 158846 wrote:</em><blockquote>Why don’t you share your results so that others can benefit from it.
You can also set this post to “Solved”</blockquote>

Hello, and yes, my apologies -thanks for reminding me.

How I added my logo to the left of the header (both logo and menu bits):
1. firstly worked out the height of the logo part of the header:
using google chrome, right click on the logo part and “inspect element”. in the “metrics” section of the chrome “developer tools” window, you will see “1039 x 90” –therefore the first section is 90 high.
2. secondly worked out the hieght of the menu bar part of the header: as above, found it was 39
3. formatted my logo image to 90+39=129 height using a graphics program. I saved it as a GIF.
4. I then cut the 129 logo into two new GIFs: one 90 height, the other 39 height -calling them wallace04a.gif and wallace04b.gif.
4.5. I uploaded the two GIFs to [your joomla home directory]/templates/ja_seleni/images/
5. I went to administrator in Joomla and to the template manager.
6. choose “edit CSS”, “template.css”
7. Added my logo to the following section (about 1/2 way down):
/* HEADER
——————————————————— */
#ja-header { background: url(../images/wallace04a.gif) no-repeat left; background-color: #1c1c1c; margin-top: 30px; position: relative; z-index: 10; }

8. then, a little further down added the other 1/2 of the logo:
/* NAVIGATION
——————————————————— */
/* Main Nav —*/
#ja-mainnav {
background: url(../images/wallace04b.gif) no-repeat left;
background-color: #1c1c1c;
border-bottom: 4px solid #050505;
line-height: 1;
position: relative;
z-index: 9;
}

9. clicked “apply” and checked the page looked okay.
10. It did, so clicked “save”

Ta da!

2 users say Thank You to quiff for this useful post

1. crazyleggs
2. JA Developer

[Author]

Posts