John Brady's Weblog

Thursday July 14, 2005

Blog Page Customisation

Having posted a few entries to my blog here, I thought it was about time I tweaked its presentation and how it all got displayed.

I have played with HTML in the past to create a few simple, crude web pages, so I thought I would stand a chance with this. However, these were static pages that never changed, and it was really about simple formatting of some text and pictures on the page. Roller, which is used as the engine behind all these blogging entries, is a different and more up to date beast than the HTML I was used to. So I had to do some quick catching up with the current state of HTML, before I could go ahead and amend my blog configuration to achieve what I wanted.

The first thing I had to come to grips with is that HTML has evolved a bit, and that HTML 4.0 is quite different to HTML 3.2 in a number of areas. This is most obvious with regard to formatting the display of your text. HTML 3.2 allowed you to mix formatting specifications, such as FONT tags, in amongst the content that was being formatted by them. HTML 4.0 has deprecated all this, separating formatting specifications from the content it formats. (However, HTML 4.0 still currently supports FONT tags for all the existing pages on the web that use it.) This allows you to reformat the whole of a page, by simply changing a few format controls, which should be grouped together at the start of the page. To further enhance this ability, HTML allows you to centralise all your formatting controls into one file, and use them in all your web pages via Cascading Style Sheets (CSS). However, if needed, you can still override these within a web page, and essentially define a local, anonymous class style and use it at the same time.

Roller uses a set of CSS pages to define standard formats (called a class in HTML). The web pages that Roller uses to publish your blog entries refer to these classes to control the formatting of different parts of the contents of the web page. So to change some aspects of the formatting and layout of my blog, meant that I had to find out what classes were being used in my web blog page, and how these were defined in the CSS pages.

The master Roller page (_decorator) includes a page called _css, which in turn expands to include themes/base.css, followed by themes/basic/theme.css because I am using the Basic Theme. One of the rules of CSS seems to be that it uses the last definition it finds of any class style. We can see that theme.css redefines some classes that have already been defined in base.css. In other words, I can use my blog's _css file to redefine class formats used by my blog, in order to customise the appearance of my blog page.

My _css file now includes the following additional lines at the end of it:

<style type="text/css">
    .entries {width: 75%}
    .rightbar {width: 25%}
    h2 { font-size:15px }
    h3 { font-size:16px }
    h4 { margin:10px; }
    pre.code {font-size:12px; }
    ul.recentposts {list-style-type:disc}
</style>

This does the following for me:

• Changes the relative width of blog entries and the side bar from 80:20 to 75:25. I want the sidebar to be a bit wider, as some of the things in it could be quite wide, and I want to avoid line wrap where possible.
• Sets font size for the level 2, 3 and 4 headings and preformatted source code. Levels 1 and 2 are used for the blog title at the top of the page. Levels 3 and 4 I use within my blog posts for the entry title, and any sub-headings. From what I quickly read on the Web, there was some argument for using px (Pixels) when specifying font sizes, as this is always absolute. The alternatives are to use em or pt (Point), which can be resized by browsers, and so could be displayed differently.
• Indents the level 4 heading, so it lines up with the entry text, rather than jutting out to the left.
• Puts a circle bullet in front of each blog entry in the list of recent posts. This is because long titles get split over lines in the side bar, and this will help people identify each individual post.

Then in my _day page I changed the bold around the entry title to be h3 instead:

<h3>$entry.title</h3>

In my main weblog page itself, I added a section to list the most recent 10 blog entries I have made, after the Referers section.

<h2>Recent Posts</h2>
<div class="sidebar">
#showRecentEntries(10)
</div>

So now you see the results of these changes around you on my weblog page. I have also made a few other smaller changes, around the order of the sections in the right hand sidebar, and the display of my blog description after the title at the top of the page. I shall also probably make a few more tweaks over time. At the moment I am considering whether I should swap around my blog title and its description. I see that a number of other people have, so that the title is more punchy and descriptive, and the description states the name of the person. If this page is not called "John Brady's Weblog" but something else, then I have obviously gone ahead and changed it.

( Jul 14 2005, 10:46:12 AM BST ) Permalink Comments [0]