Joomla Templates Club 406,261 posts

[geekyartist Friend geekyartistJoin date: July 2008Posts: 69Downloads:0Uploads:11 Thanks: 25 Thanked: 7 times in 1 posts]

#136126

I have looked through the template CSS to change the header height and can’t find where to make the change. I need to expand the header to accommodate the logo image that is 300×90. I have found the section for the logo and can change the margins and padding but that does not work.

Any help to expand the header would be great!

[jay973 Friend jay973Join date: October 2008Posts: 401Downloads:0Uploads:12 Thanks: 28 Thanked: 105 times in 68 posts]

#282199

You can change the header height in CSS line 823:

#ja-header {
height: 91px;
line-height: normal;
position: relative;
}

Hope this helps,
Jason.

1 user says Thank You to jay973 for this useful post

1. geekyartist

[cssyeah Moderator cssyeahJoin date: June 2006Posts: 653Downloads:73Uploads:15 Thanked: 121 times in 81 posts]

#282296

Hi geekyartist.

Open the template.css file and change some line code:

1. Increase height of the header.


#ja-header {
height: 91px; <-- increase it.
line-height: normal;
position: relative;
}


2. Change width of the logo.


h1.logo a {
width: 219px;
display: block;
background: url(../images/logo.png) no-repeat;
position: absolute;
height: 52px;
top: 20px;
left: 0;
}


3. Change position of the logo.


h1.logo a {
width: 219px;
display: block;
background: url(../images/logo.png) no-repeat;
position: absolute;
height: 52px;
top: 20px; <-- Position top
left: 0; <-- Position left
}


1 user says Thank You to cssyeah for this useful post

1. geekyartist

[geekyartist Friend geekyartistJoin date: July 2008Posts: 69Downloads:0Uploads:11 Thanks: 25 Thanked: 7 times in 1 posts]

#282416

Thanks for the post on changing the CSS.

I basically new this was the case and had made those changes, however the header.gif file needs to be modified as it has a fixed height of 120px.

So to increase the header you must also modify this file so it will take into account any padding from top to bottom of the logo image.

[Author]

Posts