A CSS guide to Bloggish
The Bloggish layout is one of the most versatile S2 styles for CSS designers. Almost everything has a class, and it's all extremely flexible. I have not included every single class in the following breakdown, but instead focused on the "common" and most easily explained classes.
Example of Bloggish layout.
Stylesheet for example layout. (right click and "save as".)
* This is for all account types.
* Basic (free) account users will not be able to customize the comments page.
* You must have a basic working knowledge of CSS
You may comment on this entry for questions concerning this tutorial only. General questions for the Bloggish style can be posted in s2_bloggish or s2bloggish.
Quick Links
» Main Page and Header
#body
a, a:visited, a:hover
#container
#container-inner
#banner, #banner-inner
#banner-header
#banner-description
#pagebody, #pagebody-inner
#alpha, #beta, #gamma
.content-nav
h2.date-header
» Entries
.entry
h3.entry-header
.entry-userpic
p.poster
.entry-content
.entry-body
.ljtags
.entry-footer
.separator
» Sidebar
.module
.module-photo
.module-viewlinks
.module-calendar
.module-typelist
.module-categories
.module-pagesummary
.module-syndicate
.module-powered
.module-header
.module-content
ul.module-list
li.module-list-item
li.module-list-item a
» Comment Page **
.comments
.comments-content
.h3.comments-header
h3.comment-header
.comment-userpic
.comment-content
.comment-footer
.comment-replies
**Customization available to paid or plus accounts only!
» Tags Page
ul.ljtaglist
.ljtaglist li
Main body and header
body
description: The page in it's entirety. Insert a background or change font preferences here.
location: Everywhere.
a, a:visited, a:hover
description: General link styles. Set colors, background, etc.
location: The page in general.
No Image
#container
description:Main container that holds the banner and all of the columns.
location: n/a
#container-inner
description:Container inside of main container. Used for padding and margin purposes.
location: Inside of main container.
#banner
description: The header that holds the page title and description.
location: Top of page above entries.
#banner-inner
description: Container inside of main banner. Used mainly for margin and padding purposes.
location: Inside #banner.
h1#banner-header
description:Main page title
location: Inside of banner.
h2#banner-description
description:Page subtitle
location: Inside of banner.
#pagebody
description:Main container for entries and sidebar(s)
location: Inside of container, under the banner.
#pagebody-inner
description:container inside pagebody. Used mainly for margins/padding purposes.
location: Inside of pagebody.
#alpha, #beta, #gamma
description:containers for the entries and sidebar(s)
location: Inside of pagebody.
#alpha-inner, #beta-inner, #gamma-inner
description:containers inside #alpha, #beta, #gamma used for margin/padding purposes.
note: for more info see this tutorial
.content-nav, .content-nav a, .content-nav a:hover
description:The "previous entries" link
location: Above and below entries.
h2.date-header
description:Date and time
location: Above the entries.
.skiplinks
description: Previous day/Next day links at the bottom of page
location:Bottom of #alpha column on the entry page.
Entries ( back to top)
.entry
description:container for subject, userpic, entry text and comments
h3.entry-header
description:Subject Line
location: Inside of entry box
.entry-userpic
description: Container that holds the userpic and poster name
location: Inside of entry box.
note: This is default set to be on the right side of the entries. You can move this to the left by using "float:left;" in the CSS.
.entry-userpic{
float:left !important;
}
p.poster
description: Poster's name and link to journal
location: Under userpic on friends page or is journal is community.
.entry-content
description: container for entry text, metadata, tags and comments.
location: Under the subject.
.entry-body
description: inner container for entry text, metadata, and tags. (not comments)
location: Under the subject, inside of the entry-content.
.metadata
description: mood and music
location: Inside the entry-body above entry text.
.ljtags
description: entry tags
location: Inside the entry-body below the entry text.
.entry-footer
description: "Posted by" and comment links
location: Below the entry text.
.separator
description: "|" that separates comment links from each other
location:Inside the entry-footer.
Sidebar ( back to top)
.module
description: an individual box in the sidebar
location: Sidebar.
.module-photo
description:Icon module
location: Sidebar.
.module-viewlinks
description:module that holds the navigation list.
location: Sidebar.
.module-calendar
description:module that holds the calendar.
location: Sidebar.
.module-typelist
description:module that holds the link list.
location: Sidebar.
.module-categories
description:module that holds the tag list.
location: Sidebar.
.module-pagesummary
description:module that holds the page summary.
location: Sidebar.
.module-syndicate
description:module that holds the syndicate links.
location: Sidebar.
.module-powered
description:module that holds the "powered by livejournal" box.
location: Sidebar.
.module-header
description:module titles
location: top of sidebar module.
note: You can get specific with these by using module names. ".module-viewlinks .module-header" will only affect the content in the viewlinks module.
.module-content
description:container that holds the content of a module
location: inside of "module".
note: You can get specific with these by using module names. ".module-viewlinks .module-content" will only affect the content in the viewlinks module.
ul.module-list
description:Container for link lists
location: Navigation list, Link list, tag list, page summary.
note: You can get specific with these by using module names. ".module-viewlinks ul.module-list" will only affect the content in the viewlinks module.
li.module-list-item
description:item inside of the unordered list
location: Navigation list, Link list, tag list, page summary.
note: You can get specific with these by using module names. ".module-viewlinks li.module-list-item" will only affect the content in the viewlinks module.
li.module-list-item a
description:links inside of the list items
location: Navigation list, Link list, tag list, page summary.
note: You can get specific with these by using module names. ".module-viewlinks li.module-list-item a" will only affect the content in the viewlinks module.
Comment Page ( back to top)
.comments
description: Main holder for the comments
location: Comment page, below the entry.
.comments-content
description: Inside holder for the comments
location: Comment page, below the entry, below the comments-header.
h3.comments-header
description:Title of the comments section. Separates the comments from the entry.
location: Comment page, below the entry.
h3.comment-header
description:Title of the comment. Not to be confused with ".comments-header" !!
location:Inside comment, above the comment text.
.comment-userpic
description:Userpic of comment poster
location:Inside comment, default is on the right side.
.comment-content
description:Text of the comment. Not to be confused with ".comments-content" !!
location:Inside comment, below .comment-header.
.comment-footer
description:Links at the bottom of the comment
location:Inside comment, below the text.
.comment-replies
description:Reply to a comment above.
location:Below a comment on the comment page.
Note: How awesome is this?! You can change the indent of a comment reply here, or you can change the color of a reply... I just think this is the neatest thing ever!
Tags Page ( back to top)
ul.ljtaglist
description: Unordered list that holds links to journal tags.
location: Tags page.
.ljtaglist li
description: List item in the tag list
location: Tags page.
You may comment on this entry for questions concerning this tutorial only. General questions for the Bloggish style can be posted in s2_bloggish.