Carrie (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} carriep63) wrote in ![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small} s2_bloggish,@ 2006-11-15 12:21:00 |
|
| Entry tags: | css, css:css guide, tutorial, tutorial:css |
[All] 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.
- 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.[edit] there is not a default stylesheet for Bloggish. Each style has it's own stylesheet. You can always right click and "view source" then look for the link to the stylesheet. It will look something like this:
<link rel="stylesheet" type="text/css" href="linktostylesheet.css">
Quick Links
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. |
|
