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:+h.+sticky+note'

Dec. 4th, 2017

06. Entries - Sticky Note

Your sticky note shows up on your recent entries page and the view when you click into a specific tag, and is a static element that sits before any of your entries. This does not show up in day or friends view, and only displays itself when you add text to it.

The sticky note is an entry with a #sticky-note div wrapped around it, so it contains many of the same nested containers than an entry does, but does not include your userpic CSS, date, tags, metadata, or linkbar since it isn't a real entry. It has some pretty funky styling by default that I've disabled so that, by default, your sticky note takes on the same styling as your entry containers.

A LOT of these nested containers have no styling, so I've greyed out the ones that aren't strictly necessary to make the active components more obvious.

#sticky-note
.entry
These containers will take on any typical entry styling
.entry-inner
.entry-header
<h2><a> sticky title </a></h2>
.entry-body
.entry-content
.entry-text
this contains sticky content
.entry-footer


#sticky-note{}
#sticky-note .entry{}
#sticky-note .entry-inner{border:none;}

#sticky-note .entry-header{text-align:center;color:#000;}
#sticky-note .entry-header h2{margin:0;padding:0;}

#sticky-note .entry-body{}
#sticky-note .entry-content{}
#sticky-note .entry-text{min-height:0;padding:0;}

#sticky-note .entry-footer{display:none;}


I'd like to note that you can make your sticky note look entirely different from your entry by resetting the things you have in your entry styling in the same classes above, that are prefixed with #sticky-note. For example, if you style every .entry to have padding:30px; but you want your sticky note to have padding:50px; you'd change that in #sticky-note .entry. If your sticky is ever looking off to you and you're not sure why, a good rule of thumb is to check the styling in the general entry classes to see if there's something in there that you haven't disabled for the sticky note.