December 4th, 2017

12. Footers

The page footer is an empty div that comes after #pagebody inside of #container-inner. It is not part of the #alpha/#beta area of the page. It likely was originally meant to contain something, or could just be a clearfix, but I've found that changing the default height to 0 doesn't hurt anything, so if you're having a gap at the bottom of your layout that you don't want this is a good place to take height out to see if the issue is there.

#content-footer{clear:both;height:10px;}

You could also use #content-footer:before to add any footer information you may want, as long as you don't need HTML elements or for people to be able to click anything on it.

10. Day Page

The day page doesn't need much explanation but, aside from being able to use .lj-view.day to preface other classes or IDs you might want to customize only on this page, there is also one other custom class unique to this page. The .day class is a container wrapped around the entries posted on that day (but does not include the top/bottom previous and next link navs) and has no default styling, so you can ignore this.

.day{}

11. Tags Page

Your tags page content is directly in the #alpha container with no inner container and has its own padding for #alpha. If you have styled the padding/background/borders/etc. for your entries and would like this to mimic them in presentation you'll want to copy those specifications over into .lj-view-tags #alpha. Otherwise, you may find you want to reset the padding to 0 or leave it entirely, depending on what sort of design you're creating.

.lj-view-tags #alpha h2{}
.lj-view-tags #alpha{padding:1em;}


The h2 header is above your list and reads "Visible Tags". The .ljtaglist is the class for your tags ul. There is no default styling for the .ljtaglist class, so you can delete this if unneeded.

.ljtaglist{}
.ljtaglist li{}
.ljtaglist a{}

09. Archive Page - Years

Your calendar elements are directly in #alpha and are not encased in an .entry container. There are two main sections for your calendar: The list of year links for every year that you have posts, and the month calendars for the currently selected year beneath it. The .active class is for the year you're currently viewing; by default it's the most recent year with posts.

.yearlinks
.year
this is a ul
li
li
li class="active"


.yearlinks{}
.year{list-style:none;}
.year li{display:inline;padding:.5em;}
.active{}


.yeartable
td.monthlable
td.viewmonth
.viewmonth
this is a nested table
.dayname
.dayname
.dayname
.dayname
.dayname
.dayname
.dayname

The rest of your table cells are each day of the month; they have no set class names.
 
 
 
 
 
 
 


.yeartable{border-collapse:collapse;border:1px solid #000;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.yeartable td{border:1px solid #000;}
.dayname{}
.emptyday{} /*this spans empty cells that are used at the beginning and end of the month; NOT days with no posts*/

09. Archive Page - Months

When you're viewing a journal archive and you click View Subjects on a specific month, you will be taken to the month page. From there you can click either a specific posting day or go straight entry. The month page doesn't have anything too flashy, but you can easily style the elements for a nice extra touch if you think you'll need it, or if you just want to be thorough.

.lj-view-month form
FORM containing dropdown and prev/next links
.lj-view-month dl
CONTAINER
.lj-view-month dt DATE
.lj-view-month dd ENTRY
.lj-view-month dd ENTRY
.lj-view-month dd ENTRY
.lj-view-month dt DATE
.lj-view-month dd ENTRY


.lj-view-month form{}
.lj-view-month dl{margin:.5em 1em;}
.lj-view-month dt{}
.lj-view-month dd{}


The dl is the container for your month's posting list. The dt is for your date header, and dd is for each entry's posting time and subject. The form referenced can be styled, but it's a little finicky since you don't have access to the page HTML.

08. Sidebars - Unused Modules

There are a few modules that I've flat out disabled from the Complete Style layout; some are just never wanted or needed, and one is (as far as I could tell) not an active module. These are as follows:

.module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

1. .module-about This is the only one some of you may want to put back in, but that's covered at the beginning of the sidebar lessons.
2. .module-syndicate This is a small module with RSS and Atom buttons.
3. .module-powered This is a module that reads "Powered by Insanejournal", but it felt superfluous.
4. .module-ads This, as far as I've seen, was mean to be for ads on free accounts, but never utilized. Probably just a holdover from LJ.

08. Sidebars - Layout Credit

Your layout credit module is a very small but useful module. It contains a header and a p with a link inside it for your credit link. The .module-layoutcredit p has margin and padding, which I have disabled to keep modules more uniform.

.module-layoutcredit{}
.module-layoutcredit p{padding:0;margin:0;}


Note that if you want your credit to still be visible but take up less space you can always disable its header and reverse all backgrounds, padding, borders, margins, etc. that you have in .module in .module-layoutcredit.

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.

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.

08. Sidebars - Page Summary

Complete Style can also display a page summary of the posts on your Recent, Day, and Friends pages; this is .module-pagesummary in your sidebar. This is an unordered list, so keep in mind that ul and li both come with padding and margins by default.

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


Additionally, this module's ul shares classes with a few other modules. Read more about that here!

08. Sidebars - Links List

Complete Style comes with a customizable links list; this is .module-typelist in your sidebar. This is an unordered list, so keep in mind that ul and li both come with padding and margins by default. Also remember that this module can split itself into multiple modules if you give link sections their own titles on the Links List editing page.

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


Additionally, this module's ul shares classes with a few other modules. Read more about that here!

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>

08. Sidebars - Custom Texts

Complete Style comes with two custom text blocks; you can use one or both, and you can add custom HTML to them (if doing this use .classname and not #idname, because the layout base doesn't allow it; it also doesn't allow for lj-raw so you'll get some unwanted whitespace if you don't push everything onto one line in some cases of custom HTML.)

.module-customtext{}
.module-customtext .module-content{padding:0;}

.module-customtext2{}


Note that by default .module-customtext .module-content has some random extra padding (.module-customtext2 does not) so I've disabled that by default while cleaning up the CSS. If you're adding padding to the general .module-content you'll want to add it to this one too.

08. Sidebars - Profile

The class that identifies the about/profile module is .module-about. It contains your default userpic, username, journal title, and profile website. If you don't have a userpic/title/website the field will be left out.

The userpic leads to your userpic page (not your specific one; the general URL for someone to go to their account's userpics... for some reason.) And I swear I've seen .username pop up on profile blocks before, but I'm not finding it while writing this up, so I won't go into detail on it.

.userpic
.journalname
S2 Complete Style


.module-about{}
.module-about .module-content{text-align:center;padding:0;}

.userpic{}
.userpic img{border:none;}

.username{}
.journalname{}
.usersite{}


Please note that the module header for your about/profile block is a link to your profile page.

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.

08. Sidebars - Beta & Gamma

There are two sidebar classes, #beta and gamma. Your primary sidebar (the one in all sidebar-enabled versions of Complete Style) is #beta and in most cases you'll probably only need this one. For three column layouts, #gamma will come into play as your furthest right sidebar.

Each sidebar has an inner class that specifies the font size and color. If you plan to have both sidebars in place and want them to look exactly the same, you can always truncate the process and list it as #beta-inner, #gamma-inner{font-size:small;color:#000;} instead.

#beta{}
#beta-inner{font-size:small;color:#000;}

#gamma{}
#gamma-inner{font-size:small;color:#000;}

07. Comments

Since most of us don't use this section of Complete Style I'm going to make this lesson more of just a quick overview. The comments section is on .lj-view-entry and is only available on Paid and Permanent accounts. They bear some similarities to entry styling, as you'll see below. If you're making a layout for a free account you can delete this entire section from the stylesheet.

Your entire comments section is contained in two divs, like most of Complete Style's elements:

#comments{margin:0 1em;}
#comments-inner{}


Just inside of this is your header and navigation. The .comments-header class is a div containing an h2 title. Honestly, I usually find this a little superfluous and I disable it when I use comments pages. The .comments-nav class is a div containing a link and shows up twice, once before your entry comments and once after them; this is a link to post a new comment.

.comments-header{}
.comments-header h2{}

.comments-nav{text-align:center;margin:2em;}
.comments-nav a{}


The .comments-list container is the container that holds all comments on the entry, and .comment is each comment thread, NOT each individual comment. The .comment-each div is each individual comment. The .comment-even is a great additional class; it selects every other comment in a thread starting with the first reply (since the first comment is an odd number) and can be a really nice touch to style.

.comments-list{}
.comment{}
.comment-each{margin:20px 0 0 0;padding:1px;min-height:100px;}
.comment-even{}


Your .comment-header contains all upper comment content; this includes: userpic, poster name, date, subject, and IP address (if you have IP logging enabled.)

.comment-header{border:1px solid #aaa;background:#eee;padding:2px 5px;}

Your comment userpic is a div with an image inside of it, so you can style the container or the specific image, depending on your preference:

.comment-userpic{float:right;margin:5px;}
.comment-userpic img{}


The .comment-by class contains your .poster span (which contains an ljuser tag) and your .metadata span (which is your IP logging.)

.comment-by{}
.poster{}
.metadata{font-size:small;}


Your date is just beneath this section, and your comment subject is under that:

.comment-date{font-size:small;color:#999;}

.comment-subject{}
.comment-subject h3{margin:0;padding:.15em 0;font-weight:normal;}


The content of each comment is wrapped in .comment-content and this is ONLY the person's reply.

.comment-content{padding-top:1em;}

Your comment linkbar is very similar to your entry linkbar, except it's wrapped in an outer div called .comment-footer in addition to .comment-linkbar just inside of that.

.comment-footer{}
.comment-linkbar{}
.comment-linkbar ul{list-style:none;margin-left:0;padding-left:0;}
.comment-linkbar li{display:inline;padding:0 .5em;border-left:1px solid #000;}
li.first-cl{border-left:none;}


Each reply to a comment has an indent so you can tell threads apart, but I imagine if you wanted to reset this margin you could do that and signify new threads by styling .comment instead (that could be interesting!)

.comment-replies{margin-left:35px;}

When comments collapse the .comment container for that thread adds .collapsed-comment to itself, so this is a container and NOT each individual collapsed comment. For each collapsed comment use .collapsed-comment .comment-footer instead. The .collapsed-comment-link is for the link title of the comment, which will read either as the comment's subject line or (no subject) if there is none.

.collapsed-comment{}
.collapsed-comment .comment-footer{margin-bottom:1em;}
.collapsed-comment-link{}


Your comment reply forms have two versions. The .replyform is the one you'll get if clicking to add a comment while on the main entries view, and .quickreply_comment is the expanding comment form that shows up when you click to add a comment while on the actual entry itself. The #commenttext ID is for the textarea in your reply forms.

.replyform{}
.quickreply_comment{}
#commenttext{width:100%;}


There's a lot more you can do with these forms by styling the various types of input fields, etc., but I'll just leave you with this information on form elements to see what each type of form is so you'll know what to target if you want in-depth form styling for this area.

If there is more interest in using comments in Complete Style layouts, please leave a comment at the helpdesk and I'll break this section into subsections and spend more time on it!

06. Entries - Sticky Note

Your sticky note shows up on your recent entries page and the view when you click into a specific tag, and is a static element that sits before any of your entries. This does not show up in day or friends view, and only displays itself when you add text to it.

The sticky note is an entry with a #sticky-note div wrapped around it, so it contains many of the same nested containers than an entry does, but does not include your userpic CSS, date, tags, metadata, or linkbar since it isn't a real entry. It has some pretty funky styling by default that I've disabled so that, by default, your sticky note takes on the same styling as your entry containers.

A LOT of these nested containers have no styling, so I've greyed out the ones that aren't strictly necessary to make the active components more obvious.

#sticky-note
.entry
These containers will take on any typical entry styling
.entry-inner
.entry-header
<h2><a> sticky title </a></h2>
.entry-body
.entry-content
.entry-text
this contains sticky content
.entry-footer


#sticky-note{}
#sticky-note .entry{}
#sticky-note .entry-inner{border:none;}

#sticky-note .entry-header{text-align:center;color:#000;}
#sticky-note .entry-header h2{margin:0;padding:0;}

#sticky-note .entry-body{}
#sticky-note .entry-content{}
#sticky-note .entry-text{min-height:0;padding:0;}

#sticky-note .entry-footer{display:none;}


I'd like to note that you can make your sticky note look entirely different from your entry by resetting the things you have in your entry styling in the same classes above, that are prefixed with #sticky-note. For example, if you style every .entry to have padding:30px; but you want your sticky note to have padding:50px; you'd change that in #sticky-note .entry. If your sticky is ever looking off to you and you're not sure why, a good rule of thumb is to check the styling in the general entry classes to see if there's something in there that you haven't disabled for the sticky note.

06. Entries - Footer

This will be a very short entry. The entry footer is an empty div at the end of each entry, inside of .entry and .entry-inner. It doesn't really serve a purpose other than adding a block to the bottom of your sticky note (I'll go into that later), but you never know what sort of styling things you could use it for by setting a background color and/or border to it if, for some reason, you couldn't add it to something else in the entry.

.entry-footer{}

06. Entries - Linkbar

Your entry links are a list wrapped in a div called .entry-linkbar. The only other class in this area is .first-el which identifies the first link in the list for the original style's purposes of dividing each list item with a border.

.entry-linkbar
ul
Each li contains a link in your linkbar
li.first-el
li
li


.entry-linkbar{font-size:small;}
.entry-linkbar ul{list-style:none;padding-left:0;margin-left:0;}
.entry-linkbar li{display:inline;border-left:1px solid #000;padding:2px .5em;margin:.15em 0;}
li.first-el{border-left:none;padding-left:0;}
.entry-linkbar li a{}


If you want to style the links themselves and not the list item they're inside of, I recommend resetting the border, padding, and margin on .entry-linkbar li before styling .entry-linkbar a or you might wind up with some spacing issues. If you do this you likely will not need li.first-el in your stylesheet.

06. Entries - Tags & Metadata

The tags for each entry are inside of .entry-text in their own div. They have a specified margin and link color. Please note that the .ljtags link color MUST be prefaced with #alpha or it will fall back to #999.

.ljtags{margin:1em 0;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:#999;}


I'm going to be honest and tell you I've literally never used the metadata CSS before since currents are so rarely used these days, but here is a basic outline of the metadata structure should you want to use it! I have set this to display:none; in the cleaned CSS, but this is not default, so if you're using metadata you can just delete that rather than overriding it.

.entry-metadata
.metadata
Each current is wrapped in an unnamed div.
<strong>location</strong>: <a href="">Location</a>
<strong>mood</strong>: Mood
<strong>music</strong>: Music


.entry-metadata{display:none;}
.entry-metadata .metadata{}
.entry-metadata strong{}


Please note that if you are going to use the metadata, I don't recommend shortening anything to just .metadata, especially if you plan on styling comments. The comments section also has a class called .metadata.

06. Entries - Entry Content

Your entry content is nested in three divs; this includes your entry text, tags, metadata, and entry links, but those have their own sections so we're going to stick to just the outer containers for this lesson.

.entry-content
this contains .entry-body and .entry-linkbar
.entry-body
this contains .entry-text and .metadata
.entry-text
this contains .inner-entry-userpic, your entry text, and .ljtags
metadata
linkbar


Your .entry-content container has default styling to put a gap between the date and the content; you can set this to zero if unneeded. The .entry-body container has no default styling, and .entry-text (which is the innermost div that holds your text and the entry's tags) has a minimum height and an overflow set. The overflow doesn't do much else than mess with your entries from time to time, but the minimum height is so that elements in very short entries (like userpics) don't spill over the bottom of the entry. You can usually change this to a pretty small number, especially if you've got plenty of entry padding or other inner elements have padding and margins.

.entry-content{margin-top:1em;}
.entry-body{}
.entry-text{min-height:100px;overflow:auto;}


It's worth noting that there is no container to separate your entry text from the entry tags. This is all in the same div. The tags have their own div inside of .entry-text but your actual content does not.

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.

06. Entries - Header & Date

Each entry has a title and date. They are not grouped together in the layout HTML, but we're going to go over them together since they're so closely related.

.entry-header
.entry-header-inner
<h3><a> entry title </a></h3>
.entry-datetime


For the cleaned CSS I've reset the background, border, and padding. You will need to keep these if you don't want any of those styles to be visible in your entry header. You can also add to them to use them. The .entry-header-inner div, again, has no base styling, and you can either discard it or use it for extra styling.

.entry-header{background:transparent;border:none;padding:0;}
.entry-header-inner{}


Each entry header's title is wrapped in a heading tag. I've disabled the margins and padding by default, so you can either leave this as is or add margins to the heading if you don't want them in .entry-header. The entry titles will take on whatever styling you put in the page's h2 and h3 tags in the general styling, so you likely won't have to style these unless you want them to display differently than your page headers. Entry headers are links and have their own link color.

.entry-header h3{margin:0;padding:0;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#000;}


The .entry-datetime div holds your entry date and by default has a font size and color specified. This is not part of the .entry-header and sits just underneath it.

.entry-datetime{font-size:small;color:#999;}

06. Entries - Entry

Your .entry is another area with two outer nested divs containing it. These two containers hold all of your entry content and other instances of nested divs.

.entry
.entry-inner
this contains all entry elements


In the cleaned CSS I've set these up as "floating" entries (ie. entries with a background and padding that sit as individual blocks) but you can easily change this by giving #alpha a background and padding instead, and setting your entries to only have a bottom margin. By default, entries only have padding and margins, so these are the only things you'll need to actively override. (The background can just be deleted if unneeded.)

.entry{margin:0 0 40px 0;padding:30px;background:#fff;}
.entry-inner{}

05. Main Column - Navigation & Headers

Your .content-nav is the div that holds your previous/next links and will show up in two spots on the page: before and after your entries. You'll see these if you have more entries than your set entries-per-page, if you have custom entry pages, or if you're viewing by posting date. You can style both of them within .content-nav or give them different styling using .nav-top and .nav-bottom (generally I wind up disabling .nav-top and only keep the bottom navigation.) The .entrypage class is also bundled with .content-nav and is only available on paid accounts that have custom entry views.

.content-nav{margin:.5em 1em;}
.nav-top{text-align:right;}
.nav-bottom{text-align:right;}
.entrypage{text-align:center;}


Your other headers include #tagpage-header, which is the header you see before your entries when you click a certain tag to view all entries using that tag, and .date-header, which is different from your entry date.

The .date-header is better suited for communities and friends pages than anything else, I've found, because its purpose is to break up your entry feed by whether or not entries were posted on the same day by separating them with a header containing the date they were posted on. By default I've disabled them, but if you'd like them enabled you can delete display:none; or add .lj-view-friends .date-header{display:initial;} to only display them on your friends page. Both of these headers are divs with an h2 tag inside of them.

#tagpage-header{text-align:center;}
#tagpage-header h2{}

.date-header{display:none;}
.date-header h2{}


Your #column-footer is at the end of the #alpha container; I won't really go into detail on this, because through all the S2 Complete Style layouts I've made I've never had any reason to style this element.

#column-footer{clear:both;}

05. Main Column - Alpha Containers

Your main content is nested in two containers, #alpha and #alpha-inner. This container holds your entries, navigation for those entries, and any potential headers, such as tag headers. These IDs separate your entry area from your sidebar area, however even if you're using a one column layout these IDs will still apply; you just won't have a #beta or #gamma (or anything unique to their inner contents) available to style.

#alpha
#alpha-inner
this contains all entry navigation, headers, and entries


The #alpha container has very little base styling, just a background, border, and padding; all of these are reset in my cleaned CSS. You can leave it as-is if you don't want anything styled around your entry housing.

#alpha{background:transparent;border:none;padding:0;}

The nested #alpha-inner container has no base styling, and you can delete this from your stylesheet if you don't need it.

#alpha-inner{}

The #alpha container has its own link styling separate from the page links. If you want your link styling to be uniform, you'll want to copy the styling for the page links into this styling as well.

#alpha a, #alpha a:visited{color:#acbf60;}
#alpha a:hover{text-decoration:underline;}

04. Body of Page

If you want to define styles for everything under the header, encompassing both the sidebar and entry content, then you will want to edit the #pagebody IDs. These wrap around all content below the header. Neither ID has default CSS, so you can leave these out of your stylesheet if you have no plans to use them.

#header
#pagebody
#pagebody-inner
#beta
#alpha


The #pagebody div wraps around all content below the header.

#pagebody{}

And the #pagebody-inner div is just inside of that.

#pagebody-inner{}

03. Header - Title & Subtitle

Your title and subtitle are wrapped in the div #banner-header and this does not include either navigation option.

#header-text
#banner-header
this ID is an h1 tag
#banner-description
this ID is a p tag


You'll want to style #header-text for any styling that you want to effect both the title and subtitle. To define a color for your journal title, which is always a link to your base journal, use #header-text a{} to do so.

#header-text{background:transparent;border:none;margin:0;padding:0;}
#header-text a{}


Your title is an h1 labeled #banner-header and has default font styling, so if you want your title to be the same font as your overall page font you'll need to specify it. Remember that the h1 tag has margins by default, so you'll want to define margin:0; to reset it if you're having unintended spacing.

#banner-header{font-family:palatino linotype,georgia,serif;text-align:center;}

Your subtitle is a p labeled #banner-description and has default font styling, so if you want your title to be the same font as your overall page font you'll need to specify it. Remember that the p tag has margins by default, so you'll want to define margin:0; to reset it if you're having unintended spacing.

#banner-description{font-family:palatino linotype,georgia,serif;text-align:center;font-size:large;}

03. Header - Nagivation

S2 Complete Style has two navigation sections in the header, #nav-above and #nav-below. One sits above the title and subtitle, and the other sits below it. By default only #nav-above is visible, but you can set #nav-below to display:block; to enable both, or follow this up with setting #nav-above to display:none; to only use the lower navigation block rather than the default.

Both of these navigations have the same classes in their inner coding, so you only have to edit the outer IDs for each one separately and the rest will carry over to both of them unless you specify for it not to by prefacing with one or the other IDs. Both navigation IDs are attached to a ul tag and not a div.

#nav-above{list-style:none;margin:0;padding:0;font-size:small;}
#nav-below{display:none;}


Each li in the navigation has the class .banner-viewlinks; each li has a navigation link in it. You'll want to style .banner-viewlinks to style the list item and #nav-above a or #nav-below a to style the links themselves.

.banner-viewlinks{display:inline;padding:0 .5em;border-left:1px solid;}

The .first class is used to remove the border from the first list item, and that's all it's really used for. If you're removing the left border from the list items completely you won't need this in your stylesheet.

.first{border-left:none;}

The .current class is only one one list item per page, depending on which page of your journal you're viewing. Styling .current or .current a is a good way to show people which page they're on quickly and easily.

.current{}
.current a{color:#b2c272;}

03. Header - Header Containers

The header area of S2 Complete Style has many outer divs nested around the content sections. I've outlined them below because it can get a little tricky to remember which ones are which, but don't get too overwhelmed—most of these divs have no default styling and you don't have to use them if you don't want to.

I'm going to keep this lesson short because the next lessons on the header are where the meat is, but as you can see the nesting trend continues and enables a whole slew of possibilities if you choose to use them!

#header
#header-inner
#banner
#banner-inner
#banner-text
contains navigation, title, and subtitle


#header{padding:0;color:#000;}
#header-inner{}

#banner{}
#banner-inner{}

#banner-text{}


It's worth noting that ALL of these nested divs contain ALL of your header contents in the order seen above; #header is the outermost ID and #banner-text is the innermost ID.

02. Page Containers - Page Views

One of the coolest features in S2 Complete Style is the ability to define specific styles based on what type of page you're viewing. You can disable elements on certain pageview, change the way they behave, or even just change the body background color. These classes are in the body tag along with the page setup, so they encompass the entire page. Available classes for page views are:

.lj-view-recent{}
.lj-view-friends{}
.lj-view-archive{}
.lj-view-month{}
.lj-view-day{}
.lj-view-tags{}
.lj-view-entry{}


Please note that .lj-view-tags is for your Tags page and not the page you view when clicking a specific tag. That, unfortunately, is bundled with .lj-view-recent.

How do you use these? The most common example, and one I use frequently, is if you want userpics to only be present on your friends page. You would style your userpic CSS as usual, then add display:none; to the userpic container. After that, you would just need to add .lj-view-friends .inner-entry-userpic{display:initial;} to your stylesheet to enable them on a single pageview.

On the flip side, another thing I do often is disable the date only on day view (viewing entries posted on a specific date), because the timestamp is a little superfluous. When I do that, all I have to do is specify .lj-view-day .entry-datetime{display:none;} in my stylesheet.

You can do some pretty extensive stuff by prefacing things with the pageview classes, so have fun with it!

The only viewing option not freely available to use is .lj-view-entry, which is IJ default if you don't have a paid or permanent account. If your account is paid/permanent you will have the option to enable customized comment pages for your journal, and this viewing option will be available to use.

02. Page Containers - Page Setup

S2 Complete Style has a robust variety of page setups that you can use. Below are all page setup options, what they are, and how they work! It's worth noting that the main class for the layout setup is not its own div; the opening body tag is what contains the class that identifies the page setup.


The .layout-one-column option is for One Column (aka no sidebar) and will display everything in the layout except the sidebar and its inner contents. You will have a navigation menu, a header with title and subtitle, entries, and footer navigation. Because of the simplicity of this setup, #beta is gone and #alpha controls the style of the container beneath the header, which holds your entries and footer nav.

.layout-one-column{}
.layout-one-column #alpha{margin:0 50px;}



The .layout-two-column-left option is for Two Column (Sidebar on Left) and is the most commonly used standard layout setup. In this option #alpha will control your entries container and #beta will control your sidebar container.

.layout-two-column-left{}
.layout-two-column-left #alpha{margin:0 0 0 290px;} /* this margin clears space on the left to make room for the sidebar */
.layout-two-column-left #beta{float:left;width:250px;}



The .layout-two-column-right option is for Two Column (Sidebar on Right) and is exactly the same as the above option, except the sidebar floats on the opposite side of the container.

.layout-two-column-right{}
.layout-two-column-right #alpha{margin:0 290px 0 0;} /* this margin clears space on the right to make room for the sidebar */
.layout-two-column-right #beta{float:right;width:250px;}



The .layout-three-column-middle option is for Three Column (Content in Middle) and will give you a layout with two sidebars, one on either side of your entry content. In this option #alpha will control your entries container, #beta will control your lefthand sidebar container, #gamma will control your righthand sidebar container.

This is especially useful in the instance that you want sidebar modules to only be available depending on which sidebar it's in. For example, if you preface .module-customtext with #gamma and set it to display:none; it will display only in the lefthand sidebar.

.layout-three-column-middle{}
.layout-three-column-middle #alpha{margin:0 290px;} /* this margin clears space on both sides to make room for the sidebars */
.layout-three-column-middle #beta{float:left;width:250px;}
.layout-three-column-middle #gamma{float:right;width:250px;}



The .layout-three-column-right option is for Three Column (Sidebars on Right) and is exactly the same as the above option, except the sidebars both float on the right side of the container.

.layout-three-column-right{}
.layout-three-column-right #alpha{margin:0 540px 0 0;}
.layout-three-column-right #beta{float:right;width:250px;}
.layout-three-column-right #gamma{float:right;width:250px;}



The .layout-three-column-left option is for Three Column (Sidebars on Left) and is exactly the same as the above option, except the sidebars both float on the left side of the container.

.layout-three-column-left{}
.layout-three-column-left #alpha{margin:0 0 0 540px;}
.layout-three-column-left #beta{float:left;width:250px;}
.layout-three-column-left #gamma{float:left;width:250px;}


Please note that if you're making a layout for other people to use, you don't need to remake copies of the layout with different sidebar options. You can just include any of the above CSS specs in your stylesheet and the layout will change to them depending on what page setup option the user chooses from the dropdown while installing their layout.

02. Page Containers - Containers

An S2 Complete Style layout is wrapped in two containers that hold the entirety of the contents. This is a really useful set of containers to have, because you essentially get two nested body tags inside of your body tag to play with layering, margins, padding, borders, et cetera.

body
#container
#container-inner
#header
#beta
#alpha


The #container div is just inside of the body tag. Its only default style is a background color. This is the ID you'll want to add widths and margins to if you want to resize the entire layout width, including the header.

#container{background:transparent;}

The #container-inner div is right after that and has no default styling. You can leave this out of your stylesheet if you have no plans to use it. You could alternatively resize your layout here if you're playing with background layering using body and #container.

#container-inner{}

01. General CSS

Your general CSS section is not layout specific; any standard HTML you want styled will go here. The base CSS for this portion of Complete Style is:

body{margin:0;padding:0;background:#ddd;font-family:helvetica,arial,sans-serif;font-size:15px;color:#111;}
blockquote{font-style:italic;}
h1,h2,h3,h4,h5,h6{}
a, a:visited, a:active{color:#000;text-decoration:none;}
a:hover{text-decoration:underline;}


This is where you will add things like ul and hr styling for the whole journal. If it's not something you need to be specific to a journal element, it's safe to put it here. If, for instance, you wanted links to be a different color in only the sidebar, you would go to the sidebars section and add #beta a to specify that.

00. Introduction

Welcome to the documentation for S2 Complete Style! On this account is a complete A-Z glossary and documentation of every piece of S2 Complete Style, from the general page style to the sidebars to alternate page views and inner workings, you're going to find it all here—broken down piece by piece and explained.

If you've ever wanted to make an S2 Complete Style layout but thought it was just too big to handle, this is exactly where you want to be.

S2 Complete Style has a few minor flaws but, overall, it is the single best layout on Insanejournal to use as your base. Why? Everything is styled and laid out via the CSS and divs (no tables to be found, except in the calendars, where they should be!) and each vital component of the layout has not only an outer div but an inner div too. What makes this so great? As you'll learn through the lessons, it makes complex styling a walk in the park!

To get started with the S2 Complete Style documentation you can either learn from the ground up by clicking Next Lesson at the bottom of this page, which will take you through each component of the layout in order, or you can scroll through the lefthand side of the page to find a specific lesson if that's more what you need! All lessons will be using my cleaned and reorganized CSS as the examples in the walkthrough, which is why you won't find any of the classic S2 Complete Style greens in the coding breakdowns.

Happy coding, and if you need help or a question answered you can always contact the helpdesk!