v.plonk!

Thoughts on the size
Even though I preferred to optimize the width of the page to fit into the Wii-Opera browser (maximum of 800 pixels), the blog software wasn't clearly optimized for it itself. So I decided to go back to the "common" width of the my.opera Community (920 pixels). I don't really like it, but I don't want to hack everything just to make it look perfect on my TV.


The sidebar
It was a very cool effect to show the sidebar elements only when you move your cursor over it, but besides from being cool and giving more space for the blog posts, it was really useless. So this time I'll go back to the standard behaviour and will even highlight the sidebar by using a background colour for it. Hopefully it will look nicely.


The sprites and the background
The usage of sprites on the other hand was very cool and added a very nice look, making the website less boring. So it was clear to me, that sprites will be added again. Even more: I want that the new background image partly reaches into the content area. So I created a very large background and pulled the content up again.


Text and background
As thobi mentioned the black text is a bit hard to read where it runs over the blood red background. My solution for it might look a bit odd but I used the CSS3 text-shadow for that. Once you've understood how to use it, it's pretty easy:

text-shadow: COLOUR HORIZONTALpx VERTICALpx BLURRADIUSpx;

example:
text-shadow: black 2px 2px 3px;

Furthermore you can add numerous shadows into 1 definition. So I combined just a few white "shadows" to make the text readable again:

.content {
    text-shadow: white 0px 0px 1px,
            white 0px 0px 1px,
            white 0px 0px 2px,
            white 0px 0px 4px,
            white 0px 0px 8px,
            white 0px 0px 12px,
            white 0px 0px 16px;
}

Burning headlines
You can even play around with that style a little bit to add a cool effect to your text: I used 4 shadows of different colours to create burning headlines for the sidebar. Therefor you just need to be aware, that browsers render the shadows one after another starting with the first one and then adding the next shadow on top of it!

#side h2, #side .h2, #side caption {
    text-shadow: #000000 4px -9px 9px,
            #FF0000 2px -4px 6px,
            #FFFF00 0px -2px 3px,
            #FFFF66 0px -1px 2px;
}

You see I started with the smoke (black = #000000) putting it high up, a bit right and adding a large blur radius. Then I added red (#FF0000), yellow (#FFFF00) and a very bright yellow (#FFFF66), moving each closer and closer to the text.