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:+b.+modules+%26+headers'

Dec. 4th, 2017

08. Sidebars - Modules & Headers

In this lesson we'll go over the sidebar classes that effect all sidebar modules. By now you're probably pretty familiar with the nesting pattern in Complete Style, so the setup of each module likely looks familiar, especially if you've read the lessons on entries.

.module .module-type
.module-inner
.module-header
.module-header-inner
<h3> module title </h3>
.module-content
main content of the module


.module{padding:20px;background:#fff;margin:0 0 40px 0;border:none;}
.module-inner{}
.module-content{}

.module-header{background:transparent;border:none;}
.module-header-inner{}
.module-header h3{margin:0;padding:0;}
.module-header a, .module-header a:visited{color:#566030;}


Note that if you want a specific module to look different than the others, or if you want to disable a module, you can set that in the module name (ex. .module-customtext) and you do not need to use it as a prefix. Modules are classed twice in the outermost div (ex. class="module module-customtext") so you can use either the general class to style them all or the specific class to style one in particular.

Also note that some module headers are or can be links, so if you want uniform colors across all of them you'll need to specify that in .module-header a if any of your module headers are links.

You can also hide specific module headers by using .module-MODULENAME .module-header{display:none;} if you want to hide some but leave others.