Looking to modify Foundation header look.

[Lamrith]

Just updated to CC6.4.2.  So far so good!

I was using e-Tone green for my website.  Over the years a few people have had issues with it so I am thinking of running the foundation base skin, however I need to alter it a little.  I am hoping this is something I can do myself with some tinkering and trial and error but do not know what file(s) to edit.

#1  the search bar is too big, it takes up 3/4 of the page.  I would like it shorter.  Either lined up roughly with the Cart text as below or a little shorter.

#2.  I want my logo to be bigger and fill that left side up more.  The logo in the attached the image is not scaled properly HxW and I do not have to have it fill all the way over.  But I would like the large image(1170*270) I have to be large and not force reduced to 200x46.  Idealy I think just having it maintain it's aspect ratio and come down to the black header bar would be ideal, let it fill to the right however far that ends up being...

#3  I would like to change the color of header bar and bottom bar, not set on color yet, need to play with it.  

Can anyone point me to doing this? I did a quick web search but all the links were 5+yrs old..

 

[bsmither]

In the template main.php, near line 35, there is a div with id="top_header". Below that are two divs, one with "small-4 large-3" class, and another with "small-8 large-9" class.

Between the two divs, the each size must add up to 12. So experiment with "small-8 large-7" and "small-4 large-5". Adjust to suit.

Changing the color of the TopBar is a bit tricky to identify all the various parts. From the file foundation.css, starting near lines 1725-2218, I recommend to copy out all the .top-bar CSS rules to a separate file and name that file something like top-bar-overrides.css. (Be sure to add the new filename to the element.css.php template, just after the cubecart.helpers.css statement.)

Of all the CSS rules, strip out all that do not have anything to do with color.

To make it really easy to experiment, have CubeCart's caching switched off. Have your browser to force reload page resources after changes made to the file. Your browser's Developer Tools will also help.

 

[Lamrith]

1 hour ago, bsmither said:

In the template main.php, near line 35, there is a div with id="top_header". Below that are two divs, one with "small-4 large-3" class, and another with "small-8 large-9" class.

Between the two divs, the each size must add up to 12. So experiment with "small-8 large-7" and "small-4 large-5". Adjust to suit.

Changing the color of the TopBar is a bit tricky to identify all the various parts. From the file foundation.css, starting near lines 1725-2218, I recommend to copy out all the .top-bar CSS rules to a separate file and name that file something like top-bar-overrides.css. (Be sure to add the new filename to the element.css.php template, just after the cubecart.helpers.css statement.)

Of all the CSS rules, strip out all that do not have anything to do with color.

To make it really easy to experiment, have CubeCart's caching switched off. Have your browser to force reload page resources after changes made to the file. Your browser's Developer Tools will also help.

 

TY for the tips!!  I got the two elements resized.  Now to tinker with color.