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:+e.+viewlinks'

Dec. 4th, 2017

08. Sidebars - Viewlinks

Complete Style comes with a secondary navigation link area in addition to the two options in your header; this is .module-viewlinks in your sidebar. The only difference in content is that there is no link to Memories in this one. This is an unordered list, so keep in mind that ul and li both come with padding and margins by default.

.module-viewlinks{}
.module-viewlinks ul{list-style:none;margin-left:0;padding-left:0;}
.module-viewlinks li{}
.module-viewlinks li a{}


Additionally, this module's ul shares classes with a few other modules. You don't have to use them (there's no default styling in the shared classes) but it's extremely useful if you want to style all unordered lists in your sidebar (except for the tags) in one go.

.module-list{}
.module-list-item{}
.module-list-item a{}


Your viewlinks module will look something like this, and it's important to note because .module-pagesummary and .module-typelist are set up exactly the same way, and share the classes .module-list and .module-list-item:

<div class="module-viewlinks module">
	<div class="module-inner">
		<div class="module-header">
			<div class="module-header-inner">
			<h3>Navigation</h3>
			</div>
		</div>
		<div class="module-content">
			<ul class="module-list">
				<li class="module-list-item"><a href="/">Documentation</a></li>
				<li class="module-list-item"><a href="/calendar">Calendar</a></li>
				<li class="module-list-item"><a href="/friends">Friends</a></li>
				<li class="module-list-item"><a href="/profile">Profile</a></li>
			</ul>
		</div>
	</div>
</div>