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:+a.+header+containers'

Dec. 4th, 2017

03. Header - Header Containers

The header area of S2 Complete Style has many outer divs nested around the content sections. I've outlined them below because it can get a little tricky to remember which ones are which, but don't get too overwhelmed—most of these divs have no default styling and you don't have to use them if you don't want to.

I'm going to keep this lesson short because the next lessons on the header are where the meat is, but as you can see the nesting trend continues and enables a whole slew of possibilities if you choose to use them!

#header
#header-inner
#banner
#banner-inner
#banner-text
contains navigation, title, and subtitle


#header{padding:0;color:#000;}
#header-inner{}

#banner{}
#banner-inner{}

#banner-text{}


It's worth noting that ALL of these nested divs contain ALL of your header contents in the order seen above; #header is the outermost ID and #banner-text is the innermost ID.