compendium blogware blog template css...

Compendium Blogware Blog Template CSS Guide

Template Version 2.0

Randy Cox 10/10/2008

Custom CSS

About Custom CSS Custom CSS allows you to customize the look and feel, layout, and design of your blog.

Audience This guide is intended to aid developers in customizing the layout of their Compendium blog. Experience with CSS, and HTML is assumed.

Why Use Custom CSS While the Compendium Blogware Client Success group will do their best to meet all of your layout and branding related needs, there may be times when you need an additional level of flexibility or customization. Custom CSS gives you nearly complete control over the branding related experience on your blog.

How To Use Custom CSS In order to use the Custom CSS feature, you will need to create a CSS file. The necessary documentation to complete this task is provided in the next section, CSS Style and Class Reference. Once you have created your CSS file, you will need to upload this file to your web server. You are responsible for hosting your CSS file and any images or resources that might be referenced by that file. Provide your client services representative with the complete URL to your CSS file. The complete URL will look something like:

http://example.org/blogstyle.css

Once you have provided the link to your CSS to a Client Success representative, they will enable the stylesheet for your blog.

CSS Style and Class Reference All blogs that do not use an advanced template share a common page and HTML structure in order to make them as flexible and extensible as possible.

Template HTML Structure The default template is designed to validate as HTML 4.01 Strict markup. There are three distinct page types: blog list, blog item, and search results. All three types share a common HTML structure and differ only inside the div with an id of content. Figure 1 shows the HTML structure that is common to the body of all page types. Only the ids and classes that may be referenced in a custom CSS file are shown; other id, class, div, and other elements may appear in the actual HTML code.

Custom CSS can refer to the outermost div that envelops the entire body by the class mc, which stands for Main Container. The mc holds three structural units with the ids header, columns, and footer.

The columns div contains two structural units with the ids main-column and sidebar. The main-column holds the menu and the content divs, and the content div holds the posts div, which contains different items depending on the page type. The sidebar div holds zero or more divs with a class of widget. These sidebar widgets may include a search box, a list of links, an RSS feed link, “call to action” image links, a list of all categories in your network, etc.

<body>



<div class="mc">



<div id="header" class="rounded section">

<div class="widget BlogHeader" id="header-1">

<h1><a href="">Blog Title</a></h1>

</div>

</div> 



<div id="columns">



<div id="main-column">



<div id="menu" class="rounded section">

<div class="widget Menu">

<ul>

<li><a href="">Menu Link 1</a></li>

</ul>

</div>

</div> 



<div id="content" class="content section">

<!—- POSTS -->

<div class="widget BlogPosts" id="posts">



</div> 

</div> 

</div> 



<div id="sidebar" class="sidebar section">

<div class="widget Samplewidget rounded">

<h3>Widget Title</h3>

[Sidebar widget content]

</div>

</div> 

</div> 



<div id="footer" class="rounded section">

<div class="widget FooterText" id="footer-text">

[Footer text]

</div>

<a id="compendium-footer" href=""></a>

</div> 

</div> 

</body>

Figure 1. Template HTML Structure

div .mc

div #header .rounded .section

div #header-1 .widget .BlogHeader

h1

div #columns

div #main-column

div #menu .rounded .section

div .widget .Menu

div #content .content .section

div #posts .widget .BlogPosts

Page-specific content is inserted here

div #sidebar .sidebar .section

div .widget .rounded

h3

div .widget .rounded

h3

(There may be many widgets in the sidebar.)

div #footer .rounded .section

div #footer-text .widget .FooterText

div #compendium-footer

Figure 2. Template block diagram

Blog list page The default view of a blog is the blog list page. It shows a list of posts sorted by date, with the sticky post always at the top. The content of a blog list page, therefore, is one or more blog posts followed by links to go forward or backward to newer or older posts. Figures 3 and 4 show the HTML structure and block diagram of the content that is specific to the blog list page.

The posts div on a blog list page starts with one or more divs with a post class and ends with a single div with an id of posts-navigation, where the links to the previous and next pages are found.

There is a post class div for each post that appears in the list. Each post will have

three items: post-header, post-body, and post-footer. The post-header contains an h2 header of the title of the post (the h2 does not have a specific class or id). This title is also a link anchor to the blog item page for the post. After the title in the post-header there is a div of class post-header-meta, which contains the post date and byline. The date is wrapped in a post-header-date span, and the author’s name (but not the word “by”) is wrapped in a post-header-author span. The author’s name is a link to the blog list page. (No, the link is not terribly useful here, but it is on the other pages where this byline appears.)



<div class="post">

<div class="post-header">

<h2><a href="[link to this post]">Blog Post Title</a></h2>

<div class="post-header-meta">

<span class="post-header-date">Wednesday, April 30,

2008</span> by

<span class="post-header-author">

<a href="[link to blog]">Blog Author's Name</a>

</span>

</div>

</div>

<div class="post-body">

[Post content appears here]

</div>

<div class="post-footer">

<a class="post-comment-count" href="[link to this post's item

page]">1 Comments »</a>

<div class="post-social-bookmarking">



</div>

</div>

</div>



<div id="posts-navigation">

</div>

Figure 3. Blog List page HTML structure

After the post-header, the next div in the post is the post-body div. It contains the actual content of the blog post. Following is the post-footer div. It has two items: an anchor tag with a class of post-comment-count, which links to the blog item page and displays the number of comments that have been added to the post. Finally the post-footer includes a div of class post-social-bookmarking that is intended to be the container for links to bookmarking sites like del.icio.us, Digg, and others.


div .post

div .post-header

h2

.post-header-meta

span .post-header-date

span .post-header-author

div .post-body

div .post-footer

a .post-comment-count

div .post-social-bookmarking

(There may be one or more .post divs on a log list page.)

div #posts-navigation

Figure 4. Blog List page block diagram

Blog item page The only page type that includes post comments and the comment form is the blog item page, which displays only a single post. The posts div on a blog item page

contains a single post div, the posts-navigation div with its previous and next links to other posts, and a comments div.

Within the post div are a post-header and post-body div that are identical to the corresponding blocks on the blog list page. The difference is that the blog item page has no post-footer div. Instead, the post-social-bookmarking div is pulled out into the post. The reason for the change is that there is no need for the blog item page to have a post-comment-count, so the post-footer would only contain a single block.

The comment block starts with an h3 title, then contains a definition list (dl) with the id comment-list. Each comment starts with a definition term (dt) of class comment-header containing the date and comment author’s byline, and ends with a definition description (dd) of class comment-body. Within the comment-body is a div of class comment-body-text where the actual comment is inserted.

The next block in the comments div is the form itself, which has an id of comment-form. Everything within the form is enclosed in a plain div. The div starts with an h3 title, then has a series of label/field pairs separated by breaks, and ending with the submit button. The form elements cannot be specifically selected by class or id, but they may be styled collectively as children of the comment-form id.

<div class="post">





2008</span> by



</span>

</div>

</div>

<div class="post-body">

</div>

<div class="post-social-bookmarking">

</div>

</div>



<div id="posts-navigation">

</div>



<div id="comments">

<h3>Comments for <span class="comments-blog-title">Post

Title</span></h3>

<dl id="comment-list">

<dt class="comment-header">Wednesday, May 21, 2008 by Joe

Commenter:</dt>

<dd class="comment-body">

<div class="comment-body-text"> </div>

</dd>

</dl>

<form id="comment-form" class="rounded" method="post"

action="post.comment">

<div>

<h3>Leave a comment</h3>

<label for="comment-form-name">Name</label>

<input class="field" id="comment-form-name" type="text"><br>

<label for="comment-form-email">Email</label>

<input class="field" id="comment-form-email" type="text"><br>

<label for="comment-form-comment">Your comment</label>

<textarea class="field" id="comment-form-comment">

</textarea><br>

<label for="spam-prevent"></label>

<input size="10" class="spam-prevent" type="text"><br>

<img id="captcha" height="80" width="200">

<input id="comment-form-submit" value="Submit" type="submit">

</div>

</form>

</div>

Figure 5. Blog Item page HTML structure


div .post

div .post-header h2

.post-header-meta



div .post-body

div .post-social-bookmarking

div #posts-navigation

div #comments h3

dl #comment-list

dt .comment-header

dd .comment-body

div .comment-body-text

(There may be zero or more .comment-header/.comment-body pairs in the #comment-list on a blog item page.)

form #comment-form .rounded

div h3 label, input/textarea, img, br

Figure 6. Blog List page block diagram

Search results page When a reader searches a blog using the search sidebar widget, they will be sent to the search results page. The posts div for search results begins with an h3 title,

then displays a series of post divs containing the titles, dates, authors, and comment count for posts that are relevant to the search terms.

The post divs are very similar to the corresponding post divs on a blog list page. The biggest difference is that post-body and post-footer blocks don’t exist on a search results page. The other change is that the comment count for the post is appended to the end of the post-header-meta block.

<h3 id="search-results-header">Your search results</h3>


<div class="post">





2008</span> by



</span>, 2 Comments

</div>

</div>

</div>

Figure 7. Search Results page HTML structure

#posts .widget .BlogPosts

h3 #search-results-header

.post

.post-header h2

.post-header-meta



(There may be several .post divs on a search result page.)

Figure 8. Search Results page block diagram

CSS eye candy The version 2.0 blog template features rounded corners on major elements and a fade on the left and right edges of the content area. This section describes how these special effects are accomplished and how to disable them.

Rounded Corners Many of the elements on the template pages have the class rounded. These blocks have been given rounded corners in the default template. Unfortunately, new elements cannot be given rounded corners simply by assigning this class.

An examination of the actual page source will reveal that every element with the rounded class contains as its first children four special-purpose divs. The template uses CSS positioning to place one of these divs in each corner of the rounded block element. The background-image style of the divs are set to a CSS “sprite” image file that contains the rounded white background color that give the desired appearance. At this time, the background color of the body must be white to display correctly with rounded corner elements.

Adding new elements with rounded corners If a new block element is added to the template, it can be given rounded corners by following this example:

<div class=”rounded”>

<div class=”tl”></div>

<div class=”tr”></div>

<div class=”bl”></div>

<div class=”br”></div>

The content of the block goes here.

</div>

The new block element need not be a div. Any HTML element that uses block rendering can have rounded corners.

Disabling rounded corners This CSS style will hide the special round corner divs, thereby disabling the effect:

.tl, .tr, .bl, .br { display: none; }

Side Fades Similar to the rounded corners, the left and right side fades that run down the edges of the body are accomplished using special divs. The two divs, one for the left and one for the right, are the first items in the Main Container.

The fades use PNG background images with alpha transparency. That means that the margin color can be changed, and the fades will still look good; the margin color will be visible under the fade.

Note that the side fades do not appear in Internet Explorer 6.

Disabling side fades This CSS style will hide the side fades for all browsers:

#rightfade, #leftfade { background-image: none; }

Additional Resources http://www.W3C.org http://www.SitePoint.com http://www.W3schools.com/css/

http://www.w3c.org/

http://www.sitepoint.com/

http://www.w3schools.com/css/

compendium blogware blog template css...

Documents