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

Dec. 4th, 2017

08. Sidebars - Calendar

The sidebar's .module-calendar block holds the current month's calendar (or the most recent month that has posts.)

.module-calendar{}
.module-calendar .module-content{text-align:center;}


Your calendar is a table, so you'll want to use the table to style the whole thing. Each td is a day block and each th is a day of the week in the top row. Each date with a post in it is automatically turned into a link, so you can easily style this to stand out if you want to by using .module-calendar td a to do so.

.module-calendar table{border:solid 1px #eee;border-collapse:collapse;font-size:x-small;margin-right:auto;margin-left:auto;margin-top:10px;}
.module-calendar td{border:solid 1px #eee;}
.module-calendar th{color:#eee;font-weight:bold;}


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 ARCHIVES</a>


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