BlogHarbor.Com Demo :: Style Template CSS Reference

Style Template CSS Reference

January 26, 2006 11:40PM (EST) | Permanent Link

Almost all of the look and feel aspects of your weblog can be modified through your style template, which allows you to edit the CSS or Cascading Style Sheet for your blog. This template allows you to modify aspects of your blog such as colors, fonts, alignment, margins, and borders. While other templates such as the base, category, and article templates control the structure of your blog, the style template controls the presentation of those structural elements.

Customizing your blog through CSS does require some knowledge of the CSS language. Once you've mastered the basics of CSS, it should be easy to apply your knowledge by customing your blog's style template. Our BlogHarbor Community Forum is a great source for information and support on customizing your blog with CSS. These threads from the forum are a great way to get started on personalizing your blog through CSS:

This document provides a reference to the CSS classes used in your blog's style template.

Article and Review Styles

The styles apply to articles and reviews both on category pages (which includes the main page and contain one or more articles) and article pages (which contain a single article and can also contain a comments and trackbacks section). They also apply to the article-like text on photo pages (which are single photos from a photo album and can also contain a comments and trackbacks section).

article: On the main page or any category page, each article is contained within a div whose class is "article".
article p: Styles any text within <p> tags within an article div.
articleAll: Description to follow.
articleAuthor: Styles the text of the name of the author of the article and the date and time the article was published. This text usually appears on the line following the title.
articleBody: Styles the body text of the article.
div.articleBody table td: Styles the text of table elements within the article body.
div.articleBody table th: Styles the text of table headers within the article body.
articleMore: On the main page or any category page, for articles that are displaying excerpts, only the article excerpt is displayed, followed by a link that reads "More". This style styles the "More" link.
articleStats: On the main page or any category page, this styles the line after the article body or excerpt which lists the comments, trackbacks and a link to the article's Technorati cosmos.
articleTitle: Styles the text of article titles.
dayArticles: On the main page or any category page, for any given day with one or more blog entires, the date and all articles for that day are contained within a div whose class is "dayArticles".
postDate: On the main page or any category page, for any given day with one or more blog entries, the date is written in larger text, followed by all the articles for that date. This style styles that date.
photoAll: Description to follow.
photoPostDate: On any photo album page, for any given day with one or more photos, the date is written in larger text, followed by all the photo for that date. This style styles that date.

Component Styles

These styles apply to components, which are pre-formatted elements of the blog that can appear in the header, sidebars or footer.

Archive Months

This component lists the month of the article(s) currently being viewed and up to 4 of the previous months, if the blog goes back that far.

componentArchive: Styles the text of the "Archive Months" component. This is also used to style the text of the "Year Archive" component.

Archive Years

This component lists the year of the article(s) currently being viewed and up to 4 of the previous years, if the blog goes back that far.

componentArchive: Styles the text of the "Archive Years" component. This is also used to style the text of the "Month Archive" component.

Blog Name

This component displays the name of the blog in large text. Clicking on it takes the reader to the blog's main page.

componentBlogname: Styles the text of the blog name in the "Blog Name" component.
div.componentBlogname a: link, visited, active, hover: Styles the text of the "Blog Name" in its various link states.

Calendar

This component displays a month calendar for the month of the article(s) currently being viewed.

componentCalendar: The content of a "Calendar" component is contained within a div whose style is "componentCalendar".

componentCalendarDay: Styles the text of the days ("1", "2", "3"…"31") in a "Calendar" component.
componentCalendarDayname: Styles the text of the row containing the names of the days ("Sun", "Mon", "Tue"…"Sat") in a "Calendar" component.

Category RSS Feed

This component displays the text "Syndicate This Category", which links to the RSS feed for the current category.

componentRssLink, componentText: Styles the text of the "Syndicate This Category" link.

Category Tree

This component displays a tree (similar to the file tree in "Explorer" in Windows) that shows all the categories in the blog. Readers can use this to navigate the blog's categories.

This component uses some hard-coded styles not defined in the style sheet.

Edit Entry

This component appears only when all of the following condsitions are met:

An article is being read on its own page
The reader is logged in and has permission to edit the article

It displays the text "Edit Entry", which the reader can click -- clicking it takes the reader to the "Edit Entry" page in the Publisher Control Panel for the current article.

componentEditArticleLink: Styles the text of the "Edit Entry" link.

Email Notifications Link

This component displays the text "Subscribe", which links to the "Account Creation and Subscription Options" page, where the reader can sign up to be notified by email whenever a new article or comment is posted to the blog.

componentEmailNotifyLink: Styles the text of the "Subscribe" link, which allows logged-in users to subscribe for email notifications whenever a new article or comment is posted to the blog.

Enhanced Search

This component provides a text box into which the reader can type words to search the blog for and a button marked "Go" to start the search. Enhanced search has an extra feature not found in the regular "Search" component: the "Search All Blogs" checkbox. If checked, the reader is taken to the Technorati page for the search terms provided.

componentSearch: Styles the content of the "Enhanced Search" component.
buttonWhite: Styles the "Go" button.

Favorites

This component lists any number of website names, which are linked to those sites. The blog owner can edit these lists. Some people refer to such lists as "blogrolls".

componentBlogroll: The content of a "Favorites" component is contained within a div whose style is "componentBlogroll".
componentBlogrollItem: Styles the links within a "Favorites" component.

Home Link

This component displays the text "Home", which links to the blog's main page.

componentHomeLink: Styles the text of the "Home" link, which takes the user to the blog's home page if clicked.

Login Form

This component provides two textboxes -- "Username" and "Password" -- and a "Login" button, which the reader can use to log in. This component will appear only if the reader is not logged in.

componentLogin: Styles the contents of the "Login" component.
buttonWhite: Styles the "Login" button.

Logout Button

This component displays a button marked "Logout", which the reader can use to log out. This component will appear only if the reader is logged in.

buttonWhite: Styles the "Login" button.

Post Entry

This component appears only when the reader is logged in and has permission to post articles. It displays the text "Post New Entry", which the reader can click -- clicking it takes the reader to the "New Entry" page in the Publisher Control Panel.

componentPostArticleLink: Styles the text of the "Post New Entry" link.

Recent Book Reviews

This component lists the titles of up to 5 of the most recently-posted book reviews. Clicking on a title takes the reader to that book review's page.

componentRecentBookReviews: The content of a "Recent Book Reviews" component is contained within a div whose style is "componentRecentBookReviews".
componentRecentBookReviewsItem: Styles each item in the list of recent book reviews in a "Recent Book Reviews" component.

Recent Movie Reviews

This component lists the titles of up to 5 of the most recently-posted movie reviews. Clicking on a title takes the reader to that movie review's page.

componentRecentMovieReviews: The content of a "Recent Movie Reviews" component is contained within a div whose style is "componentRecentMovieReviews".
componentRecentMovieReviewsItem: Styles each item in the list of recent movie reviews in a "Recent Movie Reviews" component.

Recent Music Reviews

This component lists the titles of up to 5 of the most recently-posted music reviews. Clicking on a title takes the reader to that music review's page.

componentRecentMusicReviews: The content of a "Recent Music Reviews" component is contained within a div whose style is "componentRecentMusicReviews".
componentRecentMusicReviewsItem: Styles each item in the list of recent music reviews in a "Recent Music Reviews" component.

Recent Photos

This component lists the thumbnails and titles of up to 5 of the most recently-posted photos. Clicking on a photo or title takes the reader to that photo's page.

componentRecentPhotos: The content of a "Recent Photos" component is contained within a div whose style is "componentRecentPhotos".
componentRecentPhotosItem: Styles each item in the list of recent photos in a "Recent Photos" component.

Recent Reviews

This component lists the titles of up to 5 of the most recently-posted reviews. Clicking on a title takes the reader to that review's page.

This is a more generic "Recent" list: items in this list can be book, movie or music reviews.

componentRecentReviews: The content of a "Recent Reviews" component is contained within a div whose style is "componentRecentReviews".
componentRecentReviewsItem: Styles each item in the list of recent reviews in a "Recent Reviews" component. Book, Movie and Music Reviews all qualify as Reviews.

Recent Trackbacks

This component lists the titles of up to 5 of the most recent trackbacks. Clicking on a title takes the reader to that trackback on the corresponding article's page.

componentRecentTrackbacks: The content of a "Recent Trackbacks" component is contained within a div whose style is "componentRecentTrackbacks".
componentRecentTrackbacksItem: Styles each item in the list of recent trackbacks in a "Recent Trackbacks" component.

Recent Visitors

This component lists the display names of up to 5 of the most recently logged-in readers and the time when they visited.

componentRecentVisitors: The content of a "Recent Visitors" component is contained within a div whose style is "componentRecentVisitors". This component lists the names and visit times of the 5 most recent logged-in visitors.
componentRecentVisitorsItem: Styles each item in the list of recent visitors in a "Recent Visitors" component.

RSS Link

This component displays the text "Syndicate", which links to the RSS feed for the blog.

componentRssLink, componentText: Styles the text of the "Syndicate" link.

RSS Headline Component

This component displays the headlines from an RSS feed selected by the blog owner. Clicking on a headline takes the reader to the corresponding article.

componentRSSFeed: The content of an "RSS Headline" component is contained within a div whose style is "componentRSSFeed".
componentRSSFeed ul: Styles the unordered list in which items in an RSS feed appear.
componentRSSFeed ul li: Styles individual list items in which items in an RSS feed appear.

Search

This component provides a text box into which the reader can type words to search the blog for and a button marked "Go" to start the search.

componentSearch: Styles the content of the "Search" component.
buttonWhite: Styles the "Go" button.

Welcome Text

This component displays the text "Welcome {display name!}". It appears only if the reader is logged in.

componentText
componentWelcome: Styles the text of the "Welcome" component, which is visible only if the user is logged in; this component displays the text "Welcome, {reader name}!

Comment Styles

These styles apply to the "Comments" section of an article, photo or review page (the page on which an article, photo or review appears in its entriety and by itself).

comment: Each individual comment is contained within a <div> whose style is "comment".
commentAuthor: Styles the "by {commenter's name} at {comment posting time} on {comment posting date} | permanent link" line which follows the title of the comment and comes before the body of the comment.
commentBody: Styles the body text of the comment.
commentForm: Can't find any instance where this is used. This may have been replaced by the "commentFormInline" style.
commentFormInline: The comment form is contained within a <div> whose style is "commentFormInline".
commentIndent0...commentIndent8: The commentIndent0 through commentIndent8 styles specify the level of indentation for a comment. If a comment is posted in reply to the article, it is posted with no indentation -- that is, within a <div> whose style is commentIndent0. If a comment is posted in reply to a comment whose style is commentIndent0, it is posted with a single level of indentation -- that is, within a <div> whose style is commentIndent1. Comments in reply to level 1 comments are posted at indent level 2, comments in reply to level 2 comments are posted at level 3, and so on. The maximum comment level is 8.
commentReply: Styles the "Reply" link that appears at the end of the comment.
commentReplyRef: Can't find any instance where this is used.
comments: The entire "Comments" section of an article, photo or review page is contained within a <div> whose style is "comments".
commentsHead: Styles "Comments", the heading text of the "Comments" section.
commentTitle: Styles the title text of the comment.

Trackback Styles

These styles apply to the "Trackbacks" section of an article page (the page on which an article appears in its entriety and by itself).

trackback: Each individual trackback is contained within a <div> whose style is "trackback".
trackbacks: The entire "Trackbacks" section of an article, photo or review page is contained within a <div> whose style is "trackbacks".
trackbacksHead: Styles "Trackbacks", the heading text of the "Trackbacks" section.

Photo Album Styles

These styles apply to photo album pages (the pages containing thumbnails that if clicked take the reader to the photo's page, where the photo appears alone and at full size).

img.photo: Can't find any instance where this is used.
thumbnail: Thumbnails are contained within a <div> whose class is "thumbnail".
thumbnail img: Styles the img tag within a thumbnail <div>.
thumbnailCaption: Styles the text of the thumbnail capiton.
table.thumbnails: Styles the table of thumbnails on a photo album page in an album whose layout type is "Grid".
table.thumbnails td: Styles individual cells of the table of thumbnails on a photo album page in an album whose layout type is "Grid".
table.thumbnails td.row: Styles occupied rows of cells of the table of thumbnails on a photo album page in an album whose layout type is "Grid".
table.thumbnails td.emptyRow: Styles empty rows of cells of the table of thumbnails on a photo album page in an album whose layout type is "Grid".
table.thumbnailsByDay: Styles the table of thumbnails on a photo album page in an album whose layout type is "By Day".
table.thumbnailsByDay td: Styles individual cells of the table of thumbnails on a photo album page in an album whose layout type is "By Day".

Posted to:

How To