The CSS-design

Here I describe, how I made my css-design. Originally, this was placed on Google Pages' obligatory starting page. Google Pages lacks javascript facilities and has an annoying bug with the switch button for html editing. There I made this description and included links to the "real" homepage. Thanks to the hack by Peter P. Lupo that allows redirection this is no longer necessary. Therefore I have moved the content to this page. Now redirection sends visitors directly to the index.html page that serves as the home page.

Step one: Find a suitable picture

On Flickr I had a picture, which I had taken at the water mill lake in Bruunshaab one evening in the spring. I decided to use it for the home page.

Step 2: Trim the picture

A banner should be as narrow as possible, so I had to trim the picture. I used the Paint.Net program for this. Gimp would have been another option

Step 3: Use  "Oil paint" filter and resize the image

The banner-picture had too many details. I experimented a little and found the "oil painting" filter to produce a suitable result. A small brush size and low coarseness was used. After the oil painting transformation, I resized the image to the final width defined in the css-template (see next step)

Step 4: Find a css-template

I visited the Open Source Web Design page, and found the Basics design by NickyD. I downloaded the files and used them as the basis for the modification

Step 5: Adapt the colors to the picture

This step includes an element of trial and error. The idea is to match the colours of the banner picture. However these colours should not compromise the legibility of the text

The colour coding is found using the colour picker in

I had problems with the colour of the navigation panel. Finally, I found that the file bg.gif contains the background color of the navigation panel and the main body of the text as a line of 1 pixel height. Later, I had to change the width of the navigation panel. By redefining bg.gif I could change the width of the text block as well as the colour.  I saved the files in png format.

Step 6: Upload to google pages.

That's it, a new css-template 

Step 7? : Fix Google Bugs

This morning, when I checked the homepage, the layout was gone. I checked the discussion list, and saw that I was not the only one experiencing this and that it only occurred in Firefox. This evening I tried out a strange hunch I had. I relocated the *.css files to another web-location outside Google-pages and the layout reappeared ! For some strange reason the *.css could not be found on google pages, but when I specified the address directly, they were found. Thus hopefully, I have "solved" the problem.

Design by Erik Jørgensen 2006: