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!

Published Thursday, May 25, 2006 1:07 PM by FransBouma
Filed under: ,

Comments

# re: How to skin a cat^H^H^H... blog!

Thursday, May 25, 2006 8:40 AM by Rob Howard
Our 3.0 version is going to make skinning much, much easier - and if there are any Community Server blog skins that have been created and you would like those on these servers we can make them available too.

# re: How to skin a cat^H^H^H... blog!

Thursday, May 25, 2006 12:05 PM by Roland Weigelt
Great tip regarding the firefox extension! A colleague of mine showed me the extension some time ago, but I didn't had to do much web stuff at that time so I kind of forgot about it.

I've already done quite a bit of skinning on my weblog in the last days, but there are still lots of smaller things to tweak, so this really comes in handy!

# re: How to skin a cat^H^H^H... blog!

Thursday, May 25, 2006 12:50 PM by Ramon
My first thought was that you were watching old demos :) coz this is I thing an amiga demo title. But then it was about something else :). Interesting tips though!

# re: How to skin a cat^H^H^H... blog!

Thursday, May 25, 2006 1:18 PM by Omer van Kloeten
Aardvark (the firefox extention) is also an excellent helper.

http://karmatics.com/aardvark/

# re: How to skin a cat^H^H^H... blog!

Thursday, May 25, 2006 5:37 PM by Fabrice Marguerie
The Web Developer extension is really a must-have for web developers! I've been using it a lot. I'd advise everyone who doesn't know it, to give it a try.