Atechstl Posted April 20, 2015 Share Posted April 20, 2015 I am having a hell of a time editing the header background of the foundation template. There appears to be some DIV blocks dividing it up and I want to just add an image that spans the whole background. Any Ideas? Quote Link to comment Share on other sites More sharing options...
Atechstl Posted April 20, 2015 Author Share Posted April 20, 2015 Would also love to know how to change the inner body background to white. I changed the color of the background to another color. Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 20, 2015 Share Posted April 20, 2015 I don't have a direct answer.But, to help me in my development efforts, I use Firefox with the Firebug addon.Firebug gives you a means of identifying the CSS rule for (almost) any area of the web page. Knowing what the rule is affecting -- a named div, an actual tag, etc -- allows one to overrule that rule in a later CSS file -- cubecart.default.css, for example.As an experiment, in cubecart.default.css, add this rule: body { background-image: url(../images/mainbackgroundimage.png); }Put the image in /skins/foundations/images/. Quote Link to comment Share on other sites More sharing options...
Atechstl Posted April 20, 2015 Author Share Posted April 20, 2015 I use the web developer tools in chrome as well. It's almost as if there is hidden CSS classes. I am having a hard time mapping this stuff out. I have searched all of the CSS documents. The crazy part is there are 3 DIV segments splitting the header into 3 columns. I'll play more with it. Hopefully I will have something cool to show off. Quote Link to comment Share on other sites More sharing options...
Atechstl Posted April 21, 2015 Author Share Posted April 21, 2015 What a mess. I was able to edit the body tag in the Foundation CSS to add the header. This CSS is on steroids. I didn't like the large search bar so I made it 300 Px and floated it to the right. That messes a lot of other forms up in the sessions and the newsletter page form at the bottom of the page. I will have to slowly create their own classes and fix them. Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 21, 2015 Share Posted April 21, 2015 I'm curious to know if you did this:As an experiment, in cubecart.default.css, add this rule:body { background-image: url(../images/mainbackgroundimage.png); }Put the image in /skins/foundations/images/. Quote Link to comment Share on other sites More sharing options...
Atechstl Posted April 21, 2015 Author Share Posted April 21, 2015 Yes I did but I edited the foundation.css file. I'll PM you the link. Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 21, 2015 Share Posted April 21, 2015 In main.php, near lines 56-60, try:Was: <div class="row marg-top"> <div class="small-5 medium-4 large-3 columns"> <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a> </div> <div class="small-7 medium-8 large-9 columns nav-boxes"> Now: <div class="row marg-top"> <div class="small-8 medium-7 large-6 columns"> <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a> </div> <div class="small-4 medium-5 large-6 columns nav-boxes">This gives more room for the logo, and less room for everything else up there.You may need to tweak the number of columns for each of the three sizes (small, medium, large). Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 21, 2015 Share Posted April 21, 2015 "I did but I edited the foundation.css file."The point of the exercise was to demonstrate that any rule in that mess of a file foundation.css can be overruled in cubecart.default.css. Quote Link to comment Share on other sites More sharing options...
Atechstl Posted April 21, 2015 Author Share Posted April 21, 2015 Oh I see. I will give that a try. 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.