Create a new CS skin in 5 minutes
Yes, you can do that! Provided that you only want to change the color schema and one or 2 pictures referenced in the CSS files. I did a few skins last week, one of them cause I wanted it for a site of mine, the others just because I could, and wanted to test out if it really was as easy as I thought it could be. So having said that, you might realize that the first skin I did did not take 5 minutes to complete, it took a lot longer. But when all things were in place and I understood how to do it, it was a piece of cake. So here I thought I tell you how I did it, so you also could create your own skin in no time.
One of the things I had to do, which took some time, was to figure out which colors that was used in the original CS skin. If you count all colors that are made with the help of color codes (and not pictures) there are actually just 8 colors. Or maybe I should say 7 colors. Two of the colors are almost identical to the eye, but have have a slightly different color code, which is probably a mistake.
The original color codes are:
As you can see color 2 and 8 are almost identical.
So what I thought was, if I want to do a new skin, all I have to do is create a new row in the table above, and choose similar colors in for example blue. I did the table above in Microsoft Expression Web Designer (HTML Editor) so that I easily could get the color codes as well from the HTML code. But use any HTML editor should work.
So let's add a row to the table above, with a different color scheme:
Now when I have my new color codes, all I have to do is a search replace on the CSS files. I could open them one by one in Notepad and search replace 8 strings one by one. And that's what I did the first time. But then I realized there's Visual Studio 2005 with search/replace in files. So I opened that feature, pointed it to the /Themes/default/style folder, and went through the 8 colors to replace them. You might want to do this on a copy of the default skin.
That's all! Skin number 2 that I did, couldn't have taken more than 5 minutes to do. Oh, that's right. In one of the skin I did a new GIF for the menu bar,and edited the CommonTabBar class in Common.css to point to that GIF instead. The picture was a screenshot from Outlooks toolbar (made it 32 in height and 1 in width).
Here's a pic of the result:
You can see 2 more examples of skins over at CSMVPs.com in the photo gallery. I love the pink theme!! ;-)
I'll list the original color codes here as well in case you want to copy them:
#BBDE79,#D2E6BD, #99AA99, #698D73, #EFF7E0, #91723F, #667766, #e2eecd
If you enjoyed this post Subscribe to my feed via RSS or e-mail!