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: '08.+sidebars:+i.+tags+lists+%26+clouds'

Dec. 4th, 2017

08. Sidebars - Tags Lists & Clouds

Regardless of which type of tag display you choose, your tags container name will be .module-categories and it will be the inner div that determines which area you'll be styling. Both tag displays are formatted as unordered lists.

.module-categories{}

If you display your tags as a list you'll be using #tag-hierarchy to style them. You can style the ul and li formatting as usual; just keep in mind that if you have nested tags you have even more options when using #tag-hierarchy li li or #tag-hierarchy li ul (or both) so that you can style the levels of your tags distinctly!

#tag-hierarchy{}
#tag-hierarchy ul{padding-left:0;margin-left:20px;}
#tag-hierarchy li{}
.tag-count{font-size:x-small;}


If you display your tags as a cloud you'll be using #tag-cloud to style them. This div holds a standard ul with no nested tags, so each li is a tag and will change size based on frequency of use.

#tag-cloud{}
#tag-cloud ul{list-style:none;padding-left:0;margin-left:0;}
#tag-cloud li{float:left;padding:2px 4px;}
#tagclear{clear:both;}


Please note that .module-calendar and .module-categories both have .all-link at the bottom. This is a link to view either your Archive page or your Tags page, depending, and it looks like this:

.all-link
.all-link p
<a href="">VIEW ALL TAGS</a>


You can style this to be the same on both, or preface it (ex. .module-categories .all-link) to style them each individually.