Modify paperclip skin

Because I sometimes want to paste source code into my posts, I want my skins to be a little wide. Source code is often much wider than normal text. I really like the new Community Server 2.0 paperclip skin, but it wasn’t wide enough. So I changed it a bit. These are the steps I took:



  1. First, choose the appropriate skin. I chose “Paperclip Cactus”
  2. View your weblog, right click it in Internet Explorer (or any browser) and choose “View Source” to view the html source. Now you want to find the .css file that belongs to your current skin and skin-style. For Paperclip Cactus this is in the HTML as “/Themes/Blogs/paperclip/style/style.css” and “/Themes/Blogs/paperclip/style/cactus.css”, of which the first would be right here on this community. The first stylesheet if for Paperclip overall, the second one are overrides for the Cactus style specific.
  3. Now comes the hard part, as you’ll have to figure out which elements in the style-sheet must be changed according to your wishes. To make the Paperclip wider, you need the following parts:

    1. #nav
    2. #main
    3. #content
    4. #masthead

  4. Now I chose to make everything a few hundred pixels wider. I believe it was 300 pixels. I also included an extra large header image I created myself. The code should be like this:



    #nav


    {


      width: 1092px;


    }


     


    #main {


      width: 834px;


    }


     


    #content


    {


      width: 1092px;


    }


     


    #masthead


    {


      background-image: url(/Themes/Blogs/paperclip/images/customer-pen.jpg);


      width: 1104px;


    }

    I probably made a mistake on the “customer” part in the name, it should’ve been “custom” 😉

  5. Now create your own header. I could nowhere find a Photoshop file or anything else, so I have torn apart the original and create my own .psd, download it here.
  6. Go to your Control Panel in Community Server, select “Global Settings” and “Change how my blog looks” again. Select the tab “CSS Overrides” and insert the code above.

And you’re done… Have fun!

You may also like...

6 Responses

  1. Paul Gielens says:

    It’s just too bad that your blog doesn’t fit on 1024×768 anymore 😉

    “Paperclip Cactus” is pretty easy to customize, feel free to rip any custom css from my blog.

  2. It’s hard to figure out how wide something really is, when you’re on a widescreen monitor with 1680×1050! 😉 It can go higher, but than everything becomes too small for me I guess.

    Anyway, you’re not actually on 1024 anymore now, are you? 🙂

  3. Thanks for the info Dennis. I changed the skin for my blog this morning, and I’m pretty happy with the result. And I made sure to set my width to 1024 😉

  4. Paul Gielens says:

    Actually I changed the resolution on my Dell 2007FPW (1680×1050 native) for non-functional testing of your weblog 😀

  5. Vagif Abilov says:

    Thanks Dennis, this is exactly what I was looking for!

Click on a tab to select how you'd like to leave your comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.