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:+b.+navigation+%26+headers'

Dec. 4th, 2017

05. Main Column - Navigation & Headers

Your .content-nav is the div that holds your previous/next links and will show up in two spots on the page: before and after your entries. You'll see these if you have more entries than your set entries-per-page, if you have custom entry pages, or if you're viewing by posting date. You can style both of them within .content-nav or give them different styling using .nav-top and .nav-bottom (generally I wind up disabling .nav-top and only keep the bottom navigation.) The .entrypage class is also bundled with .content-nav and is only available on paid accounts that have custom entry views.

.content-nav{margin:.5em 1em;}
.nav-top{text-align:right;}
.nav-bottom{text-align:right;}
.entrypage{text-align:center;}


Your other headers include #tagpage-header, which is the header you see before your entries when you click a certain tag to view all entries using that tag, and .date-header, which is different from your entry date.

The .date-header is better suited for communities and friends pages than anything else, I've found, because its purpose is to break up your entry feed by whether or not entries were posted on the same day by separating them with a header containing the date they were posted on. By default I've disabled them, but if you'd like them enabled you can delete display:none; or add .lj-view-friends .date-header{display:initial;} to only display them on your friends page. Both of these headers are divs with an h2 tag inside of them.

#tagpage-header{text-align:center;}
#tagpage-header h2{}

.date-header{display:none;}
.date-header h2{}


Your #column-footer is at the end of the #alpha container; I won't really go into detail on this, because through all the S2 Complete Style layouts I've made I've never had any reason to style this element.

#column-footer{clear:both;}