Joomla Templates Club 406,261 posts

[kingo Friend kingoJoin date: March 2009Posts: 19Downloads:0Uploads:0 Thanks: 7]

#140339

Hi All,

I have increased the header graphic height from 42px to 80px and reduced the bottom padding to 5px, as the logo does not fit very well.

h1.logo a {
width: 435px;
display: block;
background: url(../images/logo.gif) no-repeat;
position: absolute;
height: 80px;
bottom: 5px;
left: 0;

http://www.one-stop-english.com

As you can see the logo is off the top of the page, it is 80px. Can someone advise where to drop the menu bar down or otherwise fix the mess I am now in >?

Thanks

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#301657

Think it may just be a case of changing the height

h1.logo a {
width: 435px;
display: block;
background: url(../images/logo.png) no-repeat;
position: absolute;
height: 90px;
bottom: 5px;
left: 0;
}

Almost the same size as yours my logo canvas is 385 by 100 😉

[kingo Friend kingoJoin date: March 2009Posts: 19Downloads:0Uploads:0 Thanks: 7]

#301658

Sorry Phil, No good. Changed to 90px and looks the same.

Thanks anyway.

[kingo Friend kingoJoin date: March 2009Posts: 19Downloads:0Uploads:0 Thanks: 7]

#301659

Tried changing the position from absolute to top, and it kind of works. Except you lose the padding from the bottom.

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#301660

if you want to push your logo down and have free space over it.

open your template.css file around line 697 edit this code :

[PHP]/* HEADER
——————————————————— */
#ja-header {
height: 80px;
line-height: normal;
position: relative;
}[/PHP]

to

[PHP]/* HEADER
——————————————————— */
#ja-header {
height: 100px;
line-height: normal;
position: relative;
}[/PHP]

Hope it helps.

regards

1 user says Thank You to Arvind Chauhan for this useful post

1. kingo

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#301715

OK what is required is a mixture of three things to get your logo put right.

first as Drarvindc said change the header

/* HEADER
——————————————————— */
#ja-header {
height: 100px; (CHANGE TO REQUIRED….try 120 and work done to what you need)
line-height: normal;
position: relative;
}

Then change the logo part we were doing earlier

h1.logo a {
width: 435px;
display: block;
background: url(../images/logo.png) no-repeat;
position: absolute;
height: 90px;
bottom: 5px; change this to suit
left: 0;
}

Now you will need to alter the log-in box which has gone up.

Find the log-in code

/* Login Form */
#ja-login {
background:#38769e url(../images/grad5.gif) repeat-x scroll center bottom;
border-color:#E7E8E6 #E7E8E6 #CCCCCC;
border-style:solid;
border-width:1px;
padding:4px 8px;
position:absolute;
right:0;
top:5px; (change to what you need…about 25)
}

you should just about be there….a little tweek and your done

Hope this helps 😉

1 user says Thank You to mfcphil for this useful post

1. kingo

[kingo Friend kingoJoin date: March 2009Posts: 19Downloads:0Uploads:0 Thanks: 7]

#301741

Thanks a lot, both of you.

Job done, and it looks ok.

[Author]

Posts