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:+c.+userpics'

Dec. 4th, 2017

06. Entries - Userpics

Your userpic is wrapped in a div to contain both the icon and the usernames in instances of communities and friends lists. To style the whole area you'll want to use the main class; for only the icon, use .inner-entry-userpic img instead.

.inner-entry-userpic
img
.pic-poster
contains
.ljuser link(s)


.inner-entry-userpic{float:right;text-align:center;padding:.5em 0 .5em 1em;}
.inner-entry-userpic img{}


The .pic-poster class wraps around the area containing only username links. If you want to disable the tinyicons next to names, you would specify it with .pic-poster img and not .inner-entry-userpic img (that would disable the icon too.) The .ljuser class is for the whole page and not just userpic links, so you can either style it for both, preface it with .inner-entry-userpic to only style it in this area, or just set your font styling directly in .inner-entry-userpic.

.pic-poster{}
.ljuser{}


S2 Complete Style entries actually have three userpics areas; you just never see them because two are hidden by default and only exist in case you want to enable one and disable another.

  1. .outer-entry-userpic sits just after .entry-inner before any other entry content.
  2. .mid-entry-userpic sits inside .entry-header-inner before your title header.
  3. .inner-entry-userpic sits inside .entry-text before any other entry content.

I usually only use the default enabled userpic and move it around as needed, but if you're not sure how to do that, or you're having issues, it might be best to pick the starting position that's closest to what you need and set that class to display:block; and hide the default one.

.outer-entry-userpic, .mid-entry-userpic{display:none;}

Please note that the original stylesheet classes .ljuser as .lj-user; this is wrong and there is no class under that name.