Changed Header height, but logo is changing too (Electro skin)

Developers Frontend
1

Hi, I’m currently trying out the Electro skin and I found a way to change the height of the header using top.tpl file (thanks to the forum). However, I couldn’t a solution to keep the logo from changing heights along with the header.



I changed the highlighted item:




{$settings.Company.company_name}


Any help would be great. The page can be found here:

[url]http://phantomcables.com/cs-cart/index.php?dispatch=categories.catalog[/url]
2

Have you tried re uploading the logo at the size you want after you have chenged the header?



John

3

@ Johnbol1



Even if he uploads a new image it won’t matter since he changed the height in the code.



@ Phantomcables



I don’t really know what look you are going for so it is hard to answer your question, but I do know that you need to change your css and not the actual code.



If it were me I would change the code back to what it was and change your padding in your style:



.logo-image



Just change the style to:


.logo-image {
background:url("images/top_left_angle.gif") no-repeat scroll left top transparent;
margin:0;
padding:30px 0 40px 13px;
}



This is on line 368 of your:



skins/your-skin/customer/styles.css



When you change the style it should look like:







If you want your logo down in the middle of the lighter gray area than change the 30px to 50px



Hope that helps,



Brandon

4

Thanks for the help. I thought I was changing the height of the header area. I didn’t realize I actually changed the height of the logo which was in the header. And when I changed the height of the logo, it appeared that I changed the height of the header. I wasn’t trying to change the logo in any way. I just made a mistake and chose the wrong code to edit.



So I guess the best question for my answer is how do I change the height of the header area?



Thanks.

5

[quote name=‘brandonvd’]@ Johnbol1


padding:30px 0 40px 13px;
}

[/QUOTE]



Hi Brandon, for the padding. Is that 30px the top padding?



Is it Top, Right, Bottom, left?

6

[quote name=‘brandonvd’]@ Johnbol1

Just change the style to:


.logo-image {
background:url("images/top_left_angle.gif") no-repeat scroll left top transparent;
margin:0;
padding:30px 0 40px 13px;
}

[/QUOTE]



Hi Brandon, I tried what you said, and it works but it’s not precise enough for what I need. Different browsers seems to handle it differently. On Firefox you can see that the dark grey is just underneath the top menu (Home, Catalog, My Account, etc.) and on IE you can see that the dark grey bar is a bit behind the text.



I was hoping someone knew how to edit just the height of the header. Not the logo.



Thanks

7

Ok so I figured out how to change the height of the header. I just added height to the #header info.


#header {
background: #272a2a url(images/header_bg.gif) repeat-x left top;
height: 200px;
}



Unfortunately, instead of increasing the height and forcing the Top Menu, Search Bar and Cart Bar down like normal. The Top Menu, Search Bar and Cart Bar stay where they are and the header area just goes through the items :frowning:



You can see it here:



[url]http://phantomcables.com/cs-cart/headermove1.jpg[/url]

8

[quote name=‘phantomcables’][COLOR=Red]Hi Brandon, I tried what you said, and it works but it’s not precise enough for what I need. Different browsers seems to handle it differently.[/COLOR] On Firefox you can see that the dark grey is just underneath the top menu (Home, Catalog, My Account, etc.) and on IE you can see that the dark grey bar is a bit behind the text.



I was hoping someone knew how to edit just the height of the header. Not the logo.



Thanks[/quote]



You’ll do best to remember that he doesn’t owe you anything. - The reason why it handles differently is due to your overlooking the IE stylesheet

9

My apologies if I came off demanding to you but that is not the message I was trying to convey. I’m very appreciative of Brandon’s and everyone’s help. Small communities like these are only possible when generous people give their time and expertise to the public.



I didn’t realize I needed to edit a second stylesheet. I am a noob at CS-Cart, still testing it out.



If I wasn’t clear before, thank you for your efforts Brandon and John.

10

no worries,

you may want to ask this guy,



www.directshopfittings.co.uk



john

11

Wow, great find. Thanks for the link John. I’ll send him a message asap.



Thanks again.