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 */
#header{
 background-image: url(
http://www.stefan-gossner.de/Fotos/blog/Stefan-mini.jpg);
 background-repeat: no-repeat;
 background-position: left top;
}

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

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

/* relocate the Search */
#Search{
    position: absolute;
    right : 10px ;
    top : 20px;
    width : 130px;
    height : 52px;
    overflow:hidden;
}

/* remove the calendar */
#Cal {
   position: absolute;
   visibility:hidden;
   height: 1px;
   overflow:hidden;
}


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.