How to skin a cat^H^H^H... blog!

So, now that we've this new CommunityServer 2.1 blog engine at our disposal here at weblogs.asp.net (Thanks guys! ), the big 'let's make my blog look better'-struggle begins again, as .Text skins don't work in CS 2.x for obvious reasons.

While some of the skins currently installed on weblogs.asp.net are nice (the paperclip ones for example), it might be, you want to have more something unique for your blog. Though, how to do that? Where to start? Well, here's a small list of tips to get you started. You'll find it very easy, if you use the right tools (but isn't that always the case? ).

Step 1: Pick a skin to start with.
This is the essential first step. Although you can go overboard and change everything from scratch, it's often easier to start by modifying an existing skin to your liking and eventually end up doing everything different.

Step 2: Download the Firefox webdeveloper extensions.
This thus applies also that you have to use Firefox for this job, however there might be an IE plugin which does the same thing, but I'm unaware of that. Download the webdeveloper extensions from this url: http://chrispederick.com/work/webdeveloper/. After you've installed the extension, you'll see a new toolbar. Don't panic, you can easily switch it off by going to View - Toolbars and uncheck the Web extensions toolbar.

Step 3: Open two Firefox windows, both with your blog visible.
You'll now use one to check which item to alter and the other one to see the result of your changes in real time. Ok, in window One we'll edit the CSS code in real time so you'll know what to copy over to your blog settings in Community Server. To edit CSS in real time, select under the 'CSS' button in the webextensions toolbar 'Edit CSS'. In the other we'll view CSS code as it is now. So in window Two, you'll select under the 'CSS' button 'View Style Information'. You'll get a crosshair cursor now. Try and click an element on the page, for example a link. A new tab will open with the CSS code which controls that element.

Step 4: Alter the CSS code
Ok, let's change something! In window One, you'll have a side bar at the left with 3 tabs. The first is 'style.css', which is the general CS 2.x stylesheet all skins will use. The second is the main CSS for the skin you've chosen. The 3rd one is the CSS which is sent by CS 2.x and which is filled with the CSS overrides you can add to your blog in the dashboard of your blog (the tab behind the control where you picked the skin for your blog). Typically this 3rd tab contains the file customcss.ashx. It's the 3rd tab you should add/change CSS in. All code you add there, you can copy over to the CS 2.x dashboard! So you can easily create a new skin by adding CSS code to the 3rd tab, see if it looks good, if it does, copy over the complete 3rd tab's contents to CS 2.x' dashboard and you have made the changes you need!

The advantage of this approach is that you can edit as long as you like, try things out, without having to worry that your readers will see the edits and changes.

To learn more about CSS in the case you're not familiar with how CSS works and what you can do, please go to this url: http://developer.mozilla.org/en/docs/Category:CSS:Getting_Started, though there are many many more resources available around the web about CSS and how to create beautiful webpages using CSS code.

Happy skinning!