Jump to content

Looking to modify Foundation header look.


Lamrith
 Share

Recommended Posts

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..

 

Untitled.png

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...