How To: Change PaperClip Theme Image and Width

How To: Change PaperClip Theme Image and Width

 After upgrading to Community Server 2.1, I liked the PaperClip family of themes the most. The problem with it is that the blog becomes too narrow for adding code snippets in my blog posts.

So, I decided to customize the theme a little bit, and while on it, replace the standard title image.

So here how it's done:

·         Go to your blog's dashboard, and from the side menu select Global Settings -> Change how my blog looks.

·         Pick one of the PaperClip themes.

·         Go to the CSS Overrides tab and paste the following code. Notice that the #masthead background-image should point to a 996x221 pixel image. (You can adjust your width of the blog and image as you like…).

#content

{
width: 984px;

}

 

#masthead

{
background-image: url(…);
width: 996px;

}

 

#main

{
width: 726px;

}

 

#nav

{
width: 984px;

}

·         To create your personal PaperClip Theme Image (with a paper clip mark above it), download this .psd file (Photoshop) with the layers you need. You can upload the image to your blog gallery or host it where ever, or you can use my top header image.

Enjoy!