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>
Permalink
Menu on the left looks really shitty in Opera on Linux at 1280×1024 [I’m don’t suppose resolution matters]
Permalink
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!)