Jump to content

[Resolved] Change Foundation Skin Header Background Color

Recommended Posts

Hello everyone,

Does anyone by chance know how I can specify a background color for the header (where the logo and search box reside)in the Foundation skin on version 6? I notice the entire thing is controlled by style sheets so kinda hard to wrap my head around how to do this without creating an addition to the style sheets myself.


Sorry, had to edit this I put the wrong name of the skin in.

Link to comment
Share on other sites

The best way to do this kind of thing is to use Inspect Element with Firebug right-click in FireFox or something similar in other browsers. With that enabled, you can find what you want to change, and it will show you the css rules. You can even make temporary changes on the right side of the Firebug screen to see if you like the change. Then you can add your change to cubecart.css to over- rule the default setting OR make the change in the actual css file (the stock css file change will not withstand any Foundation upgrade).

I've made so many changes to my css that I duplicated Foundation with my own skin name, and changed the config.php accordingly. Now I can make the changes to my skin without upgrades causing me issues.


Link to comment
Share on other sites

in skins/foundation/templates/main.php

below {include file='templates/box.eu_cookie.php'} add

<div class="headcolor">

change <div class="small-12 columns">{include file='templates/box.search.php'}</div>
to <div class="small-12 columns">{include file='templates/box.search.php'}</div></div>

In skins/foundation/css/foundation.css

add to bottom of page

{background-color:  #dec595;

Change  #dec595 to desired color.

Link to comment
Share on other sites

The entire area above the menu bar has an ID of "top_header". So, to implement a customization to CSS, add to the file cubecart.default.css, the rule:

#top_header { background-color: #777777; }

That leaves the backgrounds of the Login, Currency, Language, and Shopping basket indicators to deal with. Plus, the 'columns' class has padding on the left and right that makes the top_header background color appear to "spill over" the sides.

Link to comment
Share on other sites

I used ayz1's method and it at least pointed me in the right direction. When I implemented it in the way he described with the closing div tag where it is, it looks kinda funky with the white boxes around the currency, language, and basket indicators as bsmither had mentioned so I put the closing tag right behind the closer for the store logo and it looks better. After some messing with the div tags I think I got the layout where I want it. Thanks everyone for your help and input.

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.

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.


  • Create New...