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:+d.+entry+content'

Dec. 4th, 2017

06. Entries - Entry Content

Your entry content is nested in three divs; this includes your entry text, tags, metadata, and entry links, but those have their own sections so we're going to stick to just the outer containers for this lesson.

.entry-content
this contains .entry-body and .entry-linkbar
.entry-body
this contains .entry-text and .metadata
.entry-text
this contains .inner-entry-userpic, your entry text, and .ljtags
metadata
linkbar


Your .entry-content container has default styling to put a gap between the date and the content; you can set this to zero if unneeded. The .entry-body container has no default styling, and .entry-text (which is the innermost div that holds your text and the entry's tags) has a minimum height and an overflow set. The overflow doesn't do much else than mess with your entries from time to time, but the minimum height is so that elements in very short entries (like userpics) don't spill over the bottom of the entry. You can usually change this to a pretty small number, especially if you've got plenty of entry padding or other inner elements have padding and margins.

.entry-content{margin-top:1em;}
.entry-body{}
.entry-text{min-height:100px;overflow:auto;}


It's worth noting that there is no container to separate your entry text from the entry tags. This is all in the same div. The tags have their own div inside of .entry-text but your actual content does not.