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:+c.+title+%26+subtitle'

Dec. 4th, 2017

03. Header - Title & Subtitle

Your title and subtitle are wrapped in the div #banner-header and this does not include either navigation option.

#header-text
#banner-header
this ID is an h1 tag
#banner-description
this ID is a p tag


You'll want to style #header-text for any styling that you want to effect both the title and subtitle. To define a color for your journal title, which is always a link to your base journal, use #header-text a{} to do so.

#header-text{background:transparent;border:none;margin:0;padding:0;}
#header-text a{}


Your title is an h1 labeled #banner-header and has default font styling, so if you want your title to be the same font as your overall page font you'll need to specify it. Remember that the h1 tag has margins by default, so you'll want to define margin:0; to reset it if you're having unintended spacing.

#banner-header{font-family:palatino linotype,georgia,serif;text-align:center;}

Your subtitle is a p labeled #banner-description and has default font styling, so if you want your title to be the same font as your overall page font you'll need to specify it. Remember that the p tag has margins by default, so you'll want to define margin:0; to reset it if you're having unintended spacing.

#banner-description{font-family:palatino linotype,georgia,serif;text-align:center;font-size:large;}