Jump to content

Edit Header for Foundation Template


Atechstl

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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

 

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.

×
×
  • Create New...