Carrie (carriep63) wrote in s2_bloggish,
Carrie
carriep63
s2_bloggish

[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 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.
Tags: css, css:css guide, tutorial, tutorial:css
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 65 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →