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… 😉