Modify the Paperclip Theme on weblogs.asp.net

The CS themes available on weblogs.asp.net are quite good, but maybe you want to add that extra personal touch to it. Say you want to change the big "masthead" picture on top of the screen of the paperclip themes. If you just have somewhere to host your own picture, it's not that difficult to override the theme settings.

To change the masthead picture of the paperclip theme, first have a look at the css for the theme and see how the picture is referenced. View source and find the stylesheet link:

<link rel="stylesheet" href="/Themes/Blogs/paperclip/style/cactus.css" type="text/css" media="screen" />

Then download that css file and have a look at it. Search for the name of the picture you want to override, like "winter-title.jpg":

/* The masthead sits at the top of the page.*/
#masthead
{
 background: #ffffff;
 background-image: url(../images/cactus-title.jpg);
} 

This tells me I need to override the css declaration called #masthead. Next, you create your own background-image for this section, and it's best if you use the old image as a template, or else you need to override other css settings, like where the paperclip text is written, width, height and so on. Personally I just saved cactus-title.jpg file and used Photoshop to create something new on top of it. When you're happy with the picture, upload it to wherever you want to host that file. Last thing is to go into the blog dashboard of weblogs.asp.net, click to "Global Settings" and "Change How My Blog Looks". Now go to the second tab of that page named "CSS Overrides" and past in something like this:

#masthead
{
 background-image: url(http://www.somehost.com/pictures/my-title.jpg);
}

That's it. I'm about to create a new picture now :)