Full-Width theme
-
Is there any easy way to make the the theme full-width?
I wolud like to get ride of margines.
-
I think I should ask in different way:
How to customize the theme to get rid of ‘margines’
I’m new here and need few hints how to edit e.g. CSS, however, I belive there is an easier way to do it:)The thing I’d like to obtain is a full-width slider.
The theme is based on a 940px wide 16 column system. You would need to convert the base grid css elements to a percentage based system most likely. Also the offset grids as-well. Maybe we will add full width template in next theme version.
style.css from line 71
/* Base Grid */ .container .one.column,.container .one.columns { width:40px; } .container .two.columns { width:100px; } .container .three.columns { width:160px; } .container .four.columns { width:220px; } .container .five.columns { width:280px; } .container .six.columns { width:340px; } .container .seven.columns { width:400px; } .container .eight.columns { width:460px; } .container .nine.columns { width:520px; } .container .ten.columns { width:580px; } .container .eleven.columns { width:640px; } .container .twelve.columns { width:700px; } .container .thirteen.columns { width:760px; } .container .fourteen.columns { width:820px; } .container .fifteen.columns { width:880px; } .container .sixteen.columns { width:940px; } .container .one-third.column { width:300px; } .container .two-thirds.column { width:620px; } /* Offsets */ .container .offset-by-one { padding-left:60px; } .container .offset-by-two { padding-left:120px; } .container .offset-by-three { padding-left:180px; } .container .offset-by-four { padding-left:240px; } .container .offset-by-five { padding-left:300px; } .container .offset-by-six { padding-left:360px; } .container .offset-by-seven { padding-left:420px; } .container .offset-by-eight { padding-left:480px; } .container .offset-by-nine { padding-left:540px; } .container .offset-by-ten { padding-left:600px; } .container .offset-by-eleven { padding-left:660px; } .container .offset-by-twelve { padding-left:720px; } .container .offset-by-thirteen { padding-left:780px; } .container .offset-by-fourteen { padding-left:840px; } .container .offset-by-fifteen { padding-left:900px; } /* #Tablet (Portrait)================================================== */ /* Note:Design for a width of 768px */ @media only screen and (min-width:768px) and (max-width:959px) { .container { width:768px; } .container .column,.container .columns { margin-left:10px; margin-right:10px; } .column.alpha,.columns.alpha { margin-left:0; margin-right:10px; } .column.omega,.columns.omega { margin-right:0; margin-left:10px; } .alpha.omega { margin-left:0; margin-right:0; } .container .one.column,.container .one.columns { width:28px; } .container .two.columns { width:76px; } .container .three.columns { width:124px; } .container .four.columns { width:172px; } .container .five.columns { width:220px; } .container .six.columns { width:268px; } .container .seven.columns { width:316px; } .container .eight.columns { width:364px; } .container .nine.columns { width:412px; } .container .ten.columns { width:460px; } .container .eleven.columns { width:508px; } .container .twelve.columns { width:556px; } .container .thirteen.columns { width:604px; } .container .fourteen.columns { width:652px; } .container .fifteen.columns { width:700px; } .container .sixteen.columns { width:748px; } .container .one-third.column { width:236px; } .container .two-thirds.column { width:492px; } /* Offsets */ .container .offset-by-one { padding-left:48px; } .container .offset-by-two { padding-left:96px; } .container .offset-by-three { padding-left:144px; } .container .offset-by-four { padding-left:192px; } .container .offset-by-five { padding-left:240px; } .container .offset-by-six { padding-left:288px; } .container .offset-by-seven { padding-left:336px; } .container .offset-by-eight { padding-left:384px; } .container .offset-by-nine { padding-left:432px; } .container .offset-by-ten { padding-left:480px; } .container .offset-by-eleven { padding-left:528px; } .container .offset-by-twelve { padding-left:576px; } .container .offset-by-thirteen { padding-left:624px; } .container .offset-by-fourteen { padding-left:672px; } .container .offset-by-fifteen { padding-left:720px; }
It seems to difficult to me for now. It would take me much time to sort it out.
Maybe we will add full width template in next theme version.
If you do it, this theme will be perfect! Any chance to get it with 1.3.3?
Maybe we will add full width template in next theme version.
Is the feature coming soon?
- The topic ‘Full-Width theme’ is closed to new replies.