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: '03.+header:+b.+navigation'

Dec. 4th, 2017

03. Header - Nagivation

S2 Complete Style has two navigation sections in the header, #nav-above and #nav-below. One sits above the title and subtitle, and the other sits below it. By default only #nav-above is visible, but you can set #nav-below to display:block; to enable both, or follow this up with setting #nav-above to display:none; to only use the lower navigation block rather than the default.

Both of these navigations have the same classes in their inner coding, so you only have to edit the outer IDs for each one separately and the rest will carry over to both of them unless you specify for it not to by prefacing with one or the other IDs. Both navigation IDs are attached to a ul tag and not a div.

#nav-above{list-style:none;margin:0;padding:0;font-size:small;}
#nav-below{display:none;}


Each li in the navigation has the class .banner-viewlinks; each li has a navigation link in it. You'll want to style .banner-viewlinks to style the list item and #nav-above a or #nav-below a to style the links themselves.

.banner-viewlinks{display:inline;padding:0 .5em;border-left:1px solid;}

The .first class is used to remove the border from the first list item, and that's all it's really used for. If you're removing the left border from the list items completely you won't need this in your stylesheet.

.first{border-left:none;}

The .current class is only one one list item per page, depending on which page of your journal you're viewing. Styling .current or .current a is a good way to show people which page they're on quickly and easily.

.current{}
.current a{color:#b2c272;}