Dirty Butter Posted January 23, 2015 Share Posted January 23, 2015 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. Quote Link to comment Share on other sites More sharing options...
Al Brookbanks Posted January 23, 2015 Share Posted January 23, 2015 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.. Quote Link to comment Share on other sites More sharing options...
Al Brookbanks Posted January 23, 2015 Share Posted January 23, 2015 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> Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted January 23, 2015 Author Share Posted January 23, 2015 That helped a LOT!! Thank you. I'm sure I'll have more questions after I experiment some more. And maybe others will need help with this, too. 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.