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: '06.+entries:+b.+header+%26+date'

Dec. 4th, 2017

06. Entries - Header & Date

Each entry has a title and date. They are not grouped together in the layout HTML, but we're going to go over them together since they're so closely related.

.entry-header
.entry-header-inner
<h3><a> entry title </a></h3>
.entry-datetime


For the cleaned CSS I've reset the background, border, and padding. You will need to keep these if you don't want any of those styles to be visible in your entry header. You can also add to them to use them. The .entry-header-inner div, again, has no base styling, and you can either discard it or use it for extra styling.

.entry-header{background:transparent;border:none;padding:0;}
.entry-header-inner{}


Each entry header's title is wrapped in a heading tag. I've disabled the margins and padding by default, so you can either leave this as is or add margins to the heading if you don't want them in .entry-header. The entry titles will take on whatever styling you put in the page's h2 and h3 tags in the general styling, so you likely won't have to style these unless you want them to display differently than your page headers. Entry headers are links and have their own link color.

.entry-header h3{margin:0;padding:0;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#000;}


The .entry-datetime div holds your entry date and by default has a font size and color specified. This is not part of the .entry-header and sits just underneath it.

.entry-datetime{font-size:small;color:#999;}