carriep63 (carriep63) wrote in s2bloggish, @ 2007-08-18 11:34:00 |
|
|||
Entry tags: | all account types, css, tutorial |
[All] A CSS guide to Bloggish
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. |
.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. |
.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. |
.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! |
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. |