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
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 Paint.net.- Darkest color (outer frame). Choose the color from a red sunny part of the lake.
- Medium color (navigation panel). Choose the color from the medium dark part of the lake
- Light color (Header panel). Choose the color from the light rosy part og the sun's reflection.
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.