Learning S2 Complete Style

S2 Complete Style is a pretty huge layout—it's easy to get overwhelmed! [info]s2complete is a complete documentation resource brought to you by [info]tessisamess.

This documentation breaks down S2 Complete Style piece by piece so you can learn just how every piece works. Once you understand the layout dynamics you'll be glad it's such a comprehensive sheet; it makes the possibilities nearly endless!

December 2017

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Syndicate

RSS Atom
Powered by InsaneJournal

Posts Tagged: '02.+page+containers:+b.+page+setup'

Dec. 4th, 2017

02. Page Containers - Page Setup

S2 Complete Style has a robust variety of page setups that you can use. Below are all page setup options, what they are, and how they work! It's worth noting that the main class for the layout setup is not its own div; the opening body tag is what contains the class that identifies the page setup.


The .layout-one-column option is for One Column (aka no sidebar) and will display everything in the layout except the sidebar and its inner contents. You will have a navigation menu, a header with title and subtitle, entries, and footer navigation. Because of the simplicity of this setup, #beta is gone and #alpha controls the style of the container beneath the header, which holds your entries and footer nav.

.layout-one-column{}
.layout-one-column #alpha{margin:0 50px;}



The .layout-two-column-left option is for Two Column (Sidebar on Left) and is the most commonly used standard layout setup. In this option #alpha will control your entries container and #beta will control your sidebar container.

.layout-two-column-left{}
.layout-two-column-left #alpha{margin:0 0 0 290px;} /* this margin clears space on the left to make room for the sidebar */
.layout-two-column-left #beta{float:left;width:250px;}



The .layout-two-column-right option is for Two Column (Sidebar on Right) and is exactly the same as the above option, except the sidebar floats on the opposite side of the container.

.layout-two-column-right{}
.layout-two-column-right #alpha{margin:0 290px 0 0;} /* this margin clears space on the right to make room for the sidebar */
.layout-two-column-right #beta{float:right;width:250px;}



The .layout-three-column-middle option is for Three Column (Content in Middle) and will give you a layout with two sidebars, one on either side of your entry content. In this option #alpha will control your entries container, #beta will control your lefthand sidebar container, #gamma will control your righthand sidebar container.

This is especially useful in the instance that you want sidebar modules to only be available depending on which sidebar it's in. For example, if you preface .module-customtext with #gamma and set it to display:none; it will display only in the lefthand sidebar.

.layout-three-column-middle{}
.layout-three-column-middle #alpha{margin:0 290px;} /* this margin clears space on both sides to make room for the sidebars */
.layout-three-column-middle #beta{float:left;width:250px;}
.layout-three-column-middle #gamma{float:right;width:250px;}



The .layout-three-column-right option is for Three Column (Sidebars on Right) and is exactly the same as the above option, except the sidebars both float on the right side of the container.

.layout-three-column-right{}
.layout-three-column-right #alpha{margin:0 540px 0 0;}
.layout-three-column-right #beta{float:right;width:250px;}
.layout-three-column-right #gamma{float:right;width:250px;}



The .layout-three-column-left option is for Three Column (Sidebars on Left) and is exactly the same as the above option, except the sidebars both float on the left side of the container.

.layout-three-column-left{}
.layout-three-column-left #alpha{margin:0 0 0 540px;}
.layout-three-column-left #beta{float:left;width:250px;}
.layout-three-column-left #gamma{float:left;width:250px;}


Please note that if you're making a layout for other people to use, you don't need to remake copies of the layout with different sidebar options. You can just include any of the above CSS specs in your stylesheet and the layout will change to them depending on what page setup option the user chooses from the dropdown while installing their layout.