Jump to content

Foundation skin modification help needed


Dirty Butter
 Share

Recommended Posts

I'm working on modifying my renamed Foundation skin. So far I have most of the text color changes made to suit me. That I can handle, thanks to Firebug.

 

I've played a bit with changing the size of the columns, and I do pretty well for the full screen look. But I run into trouble with all the if's for small, etc.

 

Also, I want all the right column swapped to the left.

 

Any explanation for how to accomplish the column changes and switching the sidebar boxes would be appreciated.

Link to comment
Share on other sites

I'm not sure how it was done in Blueprint. It's a walk in the park when you get it. See: http://foundation.zurb.com/docs/components/grid.html
 
The total of the columns must add to 12. 
 
So for example a three equal column widths it could be:
<div class="row">
   <div class="small-4 columns">Column 1</div>
   <div class="small-4 columns">Column 2</div>
   <div class="small-4 columns">Column 3</div>
</div>
Two columns with the right column wider could be:
<div class="row">
   <div class="small-3 columns">Column 1</div>
   <div class="small-9 columns">Column 2</div>
</div>

 

This might help show it..

Link to comment
Share on other sites

To swap right to left find:

 

<div class="row {$SECTION_NAME}_wrapper">
   <div class="small-12 large-9 columns small-collapse">
      {include file='templates/box.errors.php'}
      {include file='templates/box.progress.php'}
      {$PAGE_CONTENT}
   </div>
   <div class="large-3 columns show-for-large-up">
      {include file='templates/box.featured.php'}
      {include file='templates/box.popular.php'}
      {include file='templates/box.sale_items.php'}
   </div>
   <a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> {$LANG.common.top}</a>
</div>
 
Change to:
<div class="row {$SECTION_NAME}_wrapper">
   <div class="large-3 columns show-for-large-up">
      {include file='templates/box.featured.php'}
      {include file='templates/box.popular.php'}
      {include file='templates/box.sale_items.php'}
   </div>
   <div class="small-12 large-9 columns small-collapse">
      {include file='templates/box.errors.php'}
      {include file='templates/box.progress.php'}
      {$PAGE_CONTENT}
   </div>
   <a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> {$LANG.common.top}</a>
</div>
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...