Dr. Gonzo Posted May 18, 2016 Share Posted May 18, 2016 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 18, 2016 Share Posted May 18, 2016 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. Quote Link to comment Share on other sites More sharing options...
Dr. Gonzo Posted May 18, 2016 Author Share Posted May 18, 2016 Thanks Dirty Butter, but I did use firebug and found the style sheet controlling it but when I made attempts to make changes myself, it seemed to color the entire page with the background color. Quote Link to comment Share on other sites More sharing options...
ayz1 Posted May 18, 2016 Share Posted May 18, 2016 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 .headcolor {background-color: #dec595; } Change #dec595 to desired color. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 18, 2016 Share Posted May 18, 2016 That makes sense - I just tried finding the header area, and there doesn't seem to be one in the normal code. Glad ayz1 knew how to help. Quote Link to comment Share on other sites More sharing options...
bsmither Posted May 18, 2016 Share Posted May 18, 2016 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. Quote Link to comment Share on other sites More sharing options...
Dr. Gonzo Posted May 18, 2016 Author Share Posted May 18, 2016 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 18, 2016 Share Posted May 18, 2016 Glad you worked it out. Could we see your store? I'd like to see how it looks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.