Stefan Goßner

Senior Escalation Engineer for SharePoint (WSS, SPS, MOSS, SP2010) and MCMS

Blogs

How I styled my blog

  • Comments 2
  • Likes

Since my first article on how I modified the look and feel of my blog I have made some additional changes. Here is a summary of all changes I made to the original "Marvin3 - green" Theme:

  • Insert picture in title
  • Move title text to right to give space for picture
  • add a light border around each individual post
  • Move the Search box to the top
  • Hide the "Go" link for the Search box
  • Remove Calendar
  • Reduce sidebar font size and adjust alignment
  • Add new "Recommended Book" section to the right sidebar

Here is the CSS I'm currently using:

/* 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 */
#title{
 margin-left: 65px;
}

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


/* Search */
#Search{
    position: absolute;
    right : 10px ;
    top : 27px;
    width : 130px;
    Xborder=1px solid #CCCCCC;
    height : 45px;
    overflow:hidden;
}

/* Remove Calendar*/
#Cal {
   position: absolute;
   visibility:hidden;
   height: 1px;
   border=1px solid #CCCCCC;
   overflow:hidden;
}

/* adjust sidebar size and layout */
#sidebar-a {
 font-size: 0.8em;
}

#sidebar-b {
 font-size: 0.8em;
 padding: 0em;
}

#sidebar-b a:active,
#sidebar-b a:visited,
#sidebar-b a:link {
 padding : 0px;
        margin-left: 0px;
        margin-top: 0px
        margin-bottom: 0px
}

#sidebar-a a:active,
#sidebar-a a:visited,
#sidebar-a a:link {
 padding : 0px;
        margin-left: 0px;
        line-height: 2px
}

#sidebar-a {
        line-height: 1.1em
}

#sidebar-b {
        line-height: 1.1em
}

Beside just modifying the styles I also needed to modify the content to add the "recommended books" list on the right hand side. As I don't have access to the Theme files on the blog server it was a little bit complicated to achieve this but I finally managed to get it working with some client side javascript code.

I first identified that Community Server allows to add a quite long text to the "News" area. And that it is possible to inject javascript code here. So all I had to do was to add Javascript code to add the new content to the right sidebar here in the News section.

There was one addition problem: when javascript code in the News section will be executed the right side bar is usually not downloaded from the server. So I needed to encapsulate the code in a function and then ensure that this function is called after the right sidebar is completly downloaded. I achieve this by registering a custom window.onload event hander.

Here is an extract of the javascript I have in the "News" section:

<script>
/* the new onload handler that will inject the book link table */
function __news_onload(eventTarget, eventArgument)
{
 text = document.all("sidebar-b");

 BookLink = ... here you need to add the html to create the book link table...

 /* add the book link table at the end of the right side bar */

 text.innerHTML = text.innerHTML+BookLink;
}

/* we can only show the book link table if the browser supports the getElementsByTagName method but most modern browsers do this */
if (document.getElementsByTagName)
{
 /* register our custom onload method */
 window.onload = __news_onload;

 /* remove the empty News section */
 text = document.getElementsByTagName("h3");
 for (i=0; i<text.length; i++)
 {
  if (text[i].innerHTML == "News")
  {
   text[i].innerHTML = "";
   text[i].outerHTML = "";
  }
 }
}
</script>

Comments
  • Menu on the left looks really shitty in Opera on Linux at 1280x1024 [I'm don't suppose resolution matters]

  • No just linux - it looks bad in opera running on WinXP too - could be wrong here but perhaps changing the line-height in the following section:
    #sidebar-a a:link {
    padding : 0px;
    margin-left: 0px;
    line-height: 2px
    }

    to the same as:

    #sidebar-a {
    line-height: 1.1em
    }

    might help... (just a random guess, haven't tried or tested it!)

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment
Raw Html Fix