Public Class GeoffAppleby

Working on a .Text Skin

I'm trying to put together my own skin to upload to CodeBetter. The way I see it, instead of the massive amounts of CSS hacks you have to put it to make it look nice, why not just create a skin?

So I've learned a fair bit about it all now. I've got .Text 0.95 running at home with a few of my old blog entries in it just to give it some content. Skinning .Text is just a matter of modifying a swag of user controls - you don't touch the code-behind, just the ascx file, which is pretty neat - although, if you decide you don't want a control to be used, you're out of luck - code code-behind is expecting it to be there. So all you need to be able to do is write HTML (which I can do) and make it look pretty (which I can't) all while envisioning the structure of about 20 files in your head at the same time (which I can mostly do :)

It's looking alright so far. I still suck as a designer, but it looks fairly clean and neat - I have a feeling that's it's missing something tho - I just can't decide what. But it works on Firefox perfectly, so there'll be no complaints there, anyway.

Actually, getting it working in Firefox has been no dramas this time around. The main trick is that I was trying to insert some general image placeholders - places where images can be, but the URL of the image is not hard-coded into the skin itself.

This is fairly easy to do in IE - all I did was have something like this in the HTML:

And then in the CSS overrides that anyone can do in their blog config, you just put this:

This CSS class puts your custom image as the background image, and increases the size of the tag to which the class is assigned to be large enough to show the entire image (in this case it's 50x50 pixels)

And this didn't work in Firefox. A little head-scratching, a little spitting and swearing, and then a little logical thinking later, I realised all I had to was change the SPAN tag to a DIV. Boom, she works!

So I thought I'd share this little tip with people who want to keep image locations a little loose, but not so dynamic as resorting to script.

If you'd like to get a preview of how the skin is coming, you can see a sneak preview of it here (the image is too large to embed inline, sorry). As I said, it's a work in progress and still not complete, but I'll certainly welcome any constructive feedback :)