Updated Sep 10, 2008 by tsevdosjohn
Labels:	costumization, whitepress

customization

Customization Instructions

Creating a new sidebar container and reproducing the tab effect

Create a new div container with a unique id attribute, and put it into the sidebar div (<div id="sidebar">), for example :

<div id="fourth_container"></div>

Then put an unordered list (ul) in it with a unique id as well. The unordered list will act as a sub-menu (tabs) for the new container. Into the list items add your links and don’t forget to add the class "selected" into the first anchor element.

<div id="fourth_container">  
<ul id="fourth_container_nav">  
<li><a href="#newitem1" title="New Item 1" class="selected">New Item 1</a></li>  
<li><a href="#newitem2" title="New Item 2">New Item 2</a></li>  
<li><a href="#newitem3" title="New Item 3">New Item 3</a></li>  
</ul>  
</div>

Under the unordered list (ul) and still into the new div container (<div id="fourth_container">) add your content divs. The divisions (divs) id attributes must have the same values as the "href" attributes of the anchor (a) elements of the unordered navigation list! The markup now looks like this :

<div id="fourth_container">  
<ul id="fourth_container_nav">  
<li><a href="#newitem1" title="New Item 1" class="selected">New Item 1</a></li>  
<li><a href="#newitem2" title="New Item 2">New Item 2</a></li>  
<li><a href="#newitem3" title="New Item 3">New Item 3</a></li>  
</ul>  
<div id="newitem1">  
Static or dynamic Content, goes here.  
</div>  
<div id="newitem2">  
Static or dynamic Content, goes here.  
</div>  
<div id="newitem3">  
Static or dynamic Content, goes here.  
</div>  
</div>

Our markup is ready, so now we have to add some style to it! Don’t worry, even if you haven’t wrote a single line of CSS you can still make it! Just open the sidebar.css file (located into the css directory), and add the appropriate styles for our new container (#sidebar #fourth_container).

#sidebar #fourth_container {  
margin-top: 1em;  
position: relative;  
border-left: 1px solid #999;  
}

Then we'll apply the appropriate styles to the unordered list, list items and of course anchors.

#sidebar fourth_container_nav li {  
display: inline;  
list-style-type: none;  
}  

#sidebar fourth_container_nav li a:link, #sidebar fourth_container_nav li a:visited {  
float: left;  
display: block;  
color: #2a3548;  
letter-spacing: 1px;  
text-decoration: none;  
padding: 5px;  
font: bold 10px Arial, Helvetica, sans-serif;  
border: 1px solid #999;  
border-width: 1px 1px 1px 0;  
background: #f0f4f5;  
font-variant: small-caps;  
white-space: nowrap;  
}  

#sidebar fourth_container_nav li a:hover, #sidebar fourth_container_nav li a:active {  
background: #fff;  
border-bottom: 2px solid #fff;  
}  

#sidebar fourth_container_nav li a.selected {  
background: #fff;  
border-bottom: 2px solid #fff;  
}

Almost ready! As a final step we need to style the 3 new divisions (div) containing the content.

#sidebar #newitem1, #sidebar #newitem2, #sidebar #newitem3 {  
padding: 1em;  
border-bottom: 1px solid #999;  
text-align: justify;  
line-height: 1.2em;  
}

Finally we have to edit the javascript file sidebar.js (located into scripts directory) and add the below code in it. Basically the code is the same one I used at the other containers with tabs, we just target the newly created items (#fourth_container and #fourth_container_nav li a) and apply the same jQuery magic!

$(document).ready(function(){  
$('#fourth_container #fourth_container_nav li a').click(function(){  
$('#fourth_container > div').hide().filter(this.hash).fadeIn('slow');  
$('#fourth_container #fourth_container_nav li a').removeClass('selected');  
$(this).addClass('selected');  
return false;  
}).filter(':first').click();  
});

Changing the size of the gravatars

Locate line 34 in file comments.php and edit the $size = '48' value with an appropriate integer value. The specific integer represents the number of pixels the (always square) gravatar will have (in our example 48px width and height).

<?php
	if (function_exists('get_avatar')) {
		echo get_avatar( $comment->comment_author_email, $size = '48', $comment->comment_author_link);
   }
?>

If you have any difficulties or questions regarding the Whitepress theme, it's customization or any other theme relevant questions, feel free to contact me.