How I styled my blog


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 (2)

  1. GiM says:

    Menu on the left looks really shitty in Opera on Linux at 1280×1024 [I’m don’t suppose resolution matters]

  2. Ken says:

    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!)