Sunday Dec 28, 2008

Optimising a Roller theme for printing

Inspired by Phil Harman's Trials with his roller theme I have wanted to create a better hard copy experience for you. I implemented this earlier this morning on my blog's roller files. It has been tested using Opera's print preview on the main weblog page and the comments view of an article and so should work on a view based on a tag, category, or date.

I have implemented a 2nd CSS file. Because my theme's base is so old, it is not conformant to the stylesheet/theme file structures of today's roller so I implemented it as just any old template file. The form lets you know/set the URL. It contains the following rules.

    { display: none; }
    { visibility: hidden;}

It is introduced to the weblog using the following code in the weblog template file, in the HEAD section. The assignment in a LINK or STYLE tag with the MEDIA="print" attribute is what applies this rule only when printing.

    TYPE="text/css" REL="stylesheet" MEDIA="print">

I used the 'new file' form to set the url of the new file as above, but named it _printcss; it needs a preceding _ to become invisible to some of the roller macros such as #showBasicNavBar, and the form won't permit a .css suffix. It might be cleverer to call the file _cssprint, so that the css files are all adjacent to each other in an alphabetic sort, which you get on the 'edit templates' form.

I have applied the 'noPrint' rule to the Banner, the webCategoryChooser and Sidebar. I have not used the 'noShow' rule, which I developed to apply to objects that occupy vertical space in a table. The rules are applied to a DIV for the banner, P for the web catgory chooser and TABLE for the sidebar. Another pointer to the fact I must find time to remove the tables from this theme. I am working on it I promise.


Friday Sep 26, 2008

About CSS, two column page

I noticed that my home page web site suffered from the same problem that the public blog used to, it didn't have a width constraint and as the browser grew to full screen size the content pane gets wider and wider making paragraphs harder to read. Like this, if you look hard.

my old site

In the article Fixing my blog theme..., on this blog I described how I implemented automatic margins using a fixed width and <CENTER> tag. does not use tables for formating its page and for some reason, the technique didn't work, although this may have been due to a fault in my code. Anyway, I now have a better answer.

Bluerobot, suggests using

margin: auto;

as the technique for centering the document object. From my previous work, I know I want to specify a fixed width and reckon that 1000px is a good fixed width for the document. I havn't explored if amending the <BODY> rule has the effect I want, since while I did apply the rules to the BODY tag, I need a whole page encapsulating DIVision for other reasons and my current solution is to apply the CSS sub-rules to that DIVISION's rule. The old page had three divisions, a banner/header, main content and the menu. Apart from the exterior automatic margins the second part of the problem is to ensure that the positional rules for the three divisions work correctly, most importantly that the positional rules inherit the page constraints we are defining.

This tutorial at, explains how to use relative and absolute position attributes to do what's required. I tested it with the following code,

.outer {
    position: relative;
    width: 500px;
    margin: auto;
.inner {
    position: absolute;
     top: 10px;
    right: 20px;
    width: 250px;

The BODY section contains,

<DIV STYLE="background-color: gray" CLASS="outer">
<DIV CLASS="inner" STYLE="background-color: #0080C0">

and this looks like this,


the key thing I had to learn was that the encapsulating division needs to be defined as relative, and the interior object is then defined as absolute and the locational parameters in the .inner i.e. top & right are then absolute within the .outer division. Does this make sense? I have underlined the position attribute values above. The other key lesson is to learn that CLASS and ID attributes are different. On my home site, I use IDs throughout; I was advised to use them originally.

So I need a new DIVision, this is called #Page and associated with the division via the ID attribute

#Page {
    margin: 0px auto;
    width: 1000px;
    position: relative; }

I have moved the location breadcrumb into the Header/Banner division, but otherwise left the #Header division alone, it inherits the width from #Page; it is encapsulated bt tghe #Page DIVision. The #Content DIVision I have left alone, and is placed in the default location, which is within #Page.

The #Menu division rule has had the following lines added

position: absolute;
top: 75px;
right: 20px;

The page structure is as follows

<DIV ID="#Page">
    <DIV ID="#Header"></DIV>
    <DIV ID="#Content"></DIV>
    <DIV ID="#Menu"></DIV>

which is what's wanted, a nice list of html content, with all the look and feel held elsewhere, just paragraphs, links, and division statements. Actually the banner is a table still, but now I have a fixed width, I can work on making an image file. The outstanding job is to work out how to create and name a rule for the paragraph containing the breadcrumb trail.

and this is what the index/home page looks like. You can see the two whaite space margins either side of the page. I have briefly tested it with Opewra, Firefox and Explorer.


Saturday Sep 20, 2008

Braindead Browsing

I wonder what it would take to embed browser awareness in this blog theme. I have been experimenting with creating pages for my phone's browser without much success but it might be a good idea to try and simplify the theme for braindead browsers.


Wednesday Aug 27, 2008

Fixing my blog theme for Firefox 3

I adopted Firefox 3 the other week and it became obvious that there were several bugs in my weblog theme. These are now fixed, or I hope so.

So the weblog is now the width of the banner picture, we don't get the horrible repetition effect if the browser window is made too large. The weblog is also centre justified in the panel. In order to get this effect I have placed a <DIV style="width:1024px"> around all the content in the weblog file. 1024 pixels is the width of the picture in my banner. In order to ensure the html version of the weblog is located in the centre of the browser panel, I have surrounded this DIV with a <CENTER> tags. Interesting how easy the changes were, but the testing and clumsiness of roller's interface has meant that its taken me along time to get to this point.

I have discovered some additional problems with the theme, which I have fixed in my development environments, but not here yet. The planned end goal is to remove the tables from the theme and replace them with <DIV>s and CSS rules.


Monday Aug 11, 2008

simplifying my roller blog

I have removed the 'More tags and links' page from this site. I am looking to improve the theme in several ways and the the "More tags...." page only added only a view of my delicious tag cloud which can be seen at, and sometimes at my bliki's tag page. The price of this was several theme files which I will be removing to simplify the task of moving forward. Both features require encapsulating everything in <DIV> tags, so the less to do the better.


Thursday Aug 07, 2008

Roller theme revision

The last article contained several javascripts and I discovered that the RTF editor on roller strips them out, so I am back to the raw text editor and writing in HTML.

Also it's the first article I have used sub-headings in for several years. I have amended the h1 and h2 css rules. I have assigned the h1 rule to the article title lines in the _day file and used the h2 tags in the article content fields. I am working on a major theme release which I'll contribute when finished.


Wednesday Apr 16, 2008

The photo in my banner V2

Several months, or maybe longer, I changed the banner picture from a duck in a pond to the picture above which was taken by Simon Phipps. Simon's pictures can be seen at, or at I didn't accurately amend the copyright statement and flagging in the banner. I have now. To be clear, the picture on this site, is not to be copied or re-used. The original is on Simon's Flickr site, and published under the creative commons, by-nc-nd.


Wednesday Feb 07, 2007

More about my Look and Feel

I have just changed my banner picture and the anchor tag colours. Hope you like it, but I might have to look for a different banner picture. Any ideas?


Wednesday Jan 31, 2007

Changing my version of the Currency theme

I have just made a few changes to my blog roller theme. I have moved the tag cloud into the banner; if like me you often look at the blog on a laptop, there's not much room for what I'm writing after the duck and tag cloud and all the navigation widgets.

This isn't ideal. I have played with the new opacity feature to see if I can get a better answer, but this is about as good as it gets. There is a text background on the the tags, so each one can be read as you move the mouse around the cloud. Ideally, I'd like to have a text background which was an opaque white for the tag cloud, or even declare the table cell in which the tag cloud was displayed as having a background of opaque white so that the text would stand out more. I suppose I could change the hyperlink colours, but I'm not sure what'd go well in front of my duck. Instant Color Schemes at may help, and I found  useful in experimenting with opacity.


Sunday Dec 10, 2006

Personalising the roller Sotto theme

A principal engineer colleague, John Stanford has just kickstarted his blog and is using the "Sotto" theme. With respect to themes, one of the most requested theme amendments I've seen has been How to amend the pictures in the Sotto theme? I and some colleagues looked at this some time ago and I posted most of this article internally. On review, there is nothing requiring secrecy in it, so I thought I'd re-post it here.

I think Sotto is a pretty and relaxed theme, but I suspect that most people will want to change the pictures to develop a uniqueness and personality. There are some other problems with Sotto, which I may return to at another time, but for now, here's how I amended Sotto. I originally demonstrated the effect by converting my private blog to Sotto, but I shan't be doing this here, so I have instead posted a picture of John's blog.


John's Blog


Firstly select the pictures you want and upload them to your ../resource directory by logging into roller and selecting the "File Uploads" sub-tab from the "Create & Edit" tab

In my case the pictures had been chosen and munged to have the same height, which was different from the theme's default pictures. This change of height needs to be managed. (See below).

I'd never selected Sotto as my first theme, but I had an empty _css file in my page templates file list. Select Sotto as your theme and then press the customize button. This copies Sotto into your local file folders. Sotto's global theme styles are held in /roller/themes/sotto/styles/default.css. Sotto declares style alias for the three pictures, which it calls gutter images. These are located within a div tag which also has a style. This style is called #gutter. Using the hyperlink above, (and checking that it remains accurate by reading the page source ), you can obtain the CSS code source for #gutter & #gutterimage[1-3]. Cut and paste these into your local _css file. Now amend the file names!

Each of the css rules has a height attribute, set them as appropriate i.e. the images with their height set to the height of the picture and the gutter set to two greater. The image aliases have a width parameter, set these as appropriate. I set #gutter's height to be two greater than the images as this is how the original author sized it. Obviously the background attribute needs to be set appropriately and we use the url() descriptor to do this. The new pictures are held in /roller/${yourloginname}/resource. The simplest way to get these is to open them in a browser and cut and paste the URL into the _css file. If you want more pictures, then create more #gutterimagen alaises; one for each picture. This is all that is required of the CSS file.

We now need to amend the weblog page template to ensure that our new CSS file is interpretated at the correct time in the cascade. The changes required are as follows:

     <style type="text/css">#includePage("_css" )

must be inserted after the

    #showThemeStyle("sotto" "default.css" false)

line. This forces the new _css file to be included and interpreted after the default file. The default file sets the gutter and gutterimages to have a default height and use the default pictures, and our new _css file overwrites these settings. This is enough if you require three pictures. If you require some more pictures then,

    <span id="gutterimagen">&nbsp;</span>

needs to be added as appropriate. Look at Sotto's weblog file, you'll see what I mean.


Friday Sep 29, 2006

Voting in the Blogosphere

As you may see, I have amended my theme to offer you blogosphere voting buttons. How did I do this. With help from Rich Burridge I amended my themes _day template file.

<!---- This is the digg example ---->

<a href="$absBaseURL$entry.permaLink;title=$entry.title"
  rel="external" title="Submit it to Digg">

<!-- I am using Rich Burridge's Icons -->

  <img src=""
      width="16" height="14" alt="" border="0"/>
  </a> &nbsp;

The Border="0" is quite important, as in my original implementation I did not treat the four icons equally. This controls if there is a border around the picture, which since I have a white background and white icons, looks better than the active link colour border, which is as you can see orange.

I wonder if I should convert the theme to my web space greens.


Friday Mar 10, 2006

Green Robot on SnipSnap

I showed a screenshot of a snipsnap theme based on the colour green and bluerobot here.... The exported .xml file is available at my Snipsnap site here... and now also at here.... I shall probably upload it somewhere more obvious when I get round to it.

I'd be grateful if someone tested it for me, and let me know.





« August 2016