How to modify skins in Community Server

Today I played around with community server to adjust how it places the different elements. Community Server on Technet has a couple of really nice skins but non of the addressed completly how I wanted to see my blog.

The green Marvin3 skin was the one the fit my requirements most. But I wanted to add a picture of myself to the top, to get rid of the calendar which is added per default and to move the search input field to the top. In addition I wanted to add a border around my posts.

The job was very easy to do as Community Server allows to add a custom CSS selector.

Adding the following custom CSS code did the job:

/* Insert foto */
 background-image: url(;
 background-repeat: no-repeat;
 background-position: left top;

/* move title to right to get the necessary space for the foto*/
 margin-left: 65px;

/* add a border around post */
 border: 1px solid #CCCCCC;
 border-bottom-width: 2px;
 border-right-width: 2px;
 padding: 4px;
 margin-bottom: 20px;

/* relocate the Search */
    position: absolute;
    right : 10px ;
    top : 20px;
    width : 130px;
    height : 52px;

/* remove the calendar */
#Cal {
   position: absolute;
   height: 1px;

I’m pretty sure that this will not be the last change to this CSS… 😉

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.