v.plonk!

a folder for each skin
With this skin being my 5th theme now I wanted to keep the files in the future to make it easier to switch to different skins. The first step was to create a folder (called /skin5) for the new skin inside the files folder of My Opera. There I could put the central CSS file (called skin.css) and link the user.css directly to it:

@import url("files/skin5/skin.css");

That's all. From now on I will be able to switch my skins within seconds.

to be or not to be - sprites and images size
At first I thought about using sprites again, but when I realised that the file size of the whole image would easily exceed 350kB I went back to the more classic way and included the image for each subpage of my blog seperately. That way each page will load faster, while the image quality is still good.

#top2 { background: transparent url('files/skin5/head_01.jpg') no-repeat; height: 665px; }

.top-blog #top2 { background-image: url('files/skin5/head_01.jpg');}
.top-archive #top2 { background-image: url('files/skin5/head_02.jpg');}
.top-albums #top2 { background-image: url('files/skin5/head_03.jpg');}
.top-links #top2 { background-image: url('files/skin5/head_04.jpg');}
.top-friends #top2 { background-image: url('files/skin5/head_05.jpg');}
.top-favorites #top2 { background-image: url('files/skin5/head_06.jpg');}
.top-unite #top2 { background-image: url('files/skin5/head_07.png');}
.top-about #top2 { background-image: url('files/skin5/head_08.jpg');}

You may notice, that all images use the JPEG file format except for one. This was due to file size optimizing. So whenever you save an image to be used in the web make sure to use the smallest possible file that still looks good enough.

different skin different basic theme
As I wanted to create some cool space graphics to the left and right of the page image I decided to use a different basic design. So I switched from "Silver" to "Leaves", which also comes with the most important colors I need for my skin. This way I don't need to code every single tag, class and id, I just modify the things I want to look and behave differently.

@font-face
The key feature I wanted to try this time was web embedded fonts. Therefor you define a new font at the beginning of your CSS, add the font as a font-family and upload it on your My Opera files folder. I ran into some trouble as the examples I found didn't do what I wanted, but I found a very good article by Paul Irish and an awesome @font-face generator that even includes the code you need. Afterwards I uploaded all the font files required and included the following CSS code:

@font-face {
	font-family: 'Slider';
	src: url('slider.eot');
	src: local('Slider Regular'), local('Slider'), url('slider.woff') format('woff'), url('slider.ttf') format('truetype'), url('slider.svg#Slider') format('svg');
}

#wrap1 { font-family: "Slider", "Arial", sans-serif; }

This SHOULD work in any browser, but right now it seems that it doesn't work on Firefox (no idea why, the code should be okay) and on a few systems it doesn't work at all.
I will have another look at it later on... hopefully finding the solution to this very soon.