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: '05.+main+column'

Dec. 4th, 2017

05. Main Column - Alpha Containers

Your main content is nested in two containers, #alpha and #alpha-inner. This container holds your entries, navigation for those entries, and any potential headers, such as tag headers. These IDs separate your entry area from your sidebar area, however even if you're using a one column layout these IDs will still apply; you just won't have a #beta or #gamma (or anything unique to their inner contents) available to style.

#alpha
#alpha-inner
this contains all entry navigation, headers, and entries


The #alpha container has very little base styling, just a background, border, and padding; all of these are reset in my cleaned CSS. You can leave it as-is if you don't want anything styled around your entry housing.

#alpha{background:transparent;border:none;padding:0;}

The nested #alpha-inner container has no base styling, and you can delete this from your stylesheet if you don't need it.

#alpha-inner{}

The #alpha container has its own link styling separate from the page links. If you want your link styling to be uniform, you'll want to copy the styling for the page links into this styling as well.

#alpha a, #alpha a:visited{color:#acbf60;}
#alpha a:hover{text-decoration:underline;}