As you may know, I am helping to administer The Woolly Mom. However, the theme we are using doesn’t have a dynamic sidebar. I must correct this! The steps: Decide the layout, Write the CSS, Make it dynamic, Add the Widgets.
Today’s Topic: Deciding The Layout
In this tutorial I will go over deciding the actual layout of the sidebar itself. Many people utilize h2 tags for the titles. I highly recommend against using h2 tags. These tags help with SEO and emphasizing things like “Top Commentators” and “Categories” is bad business for SEO. Therefore we’re going to want to use div’s for the titles.
Here is the current CSS for the sidebar:
#sidebar ul {
margin:2px 0px 10px 5px;
padding:0px;
}
#sidebar ul h2 {
width:218px;
font-size:12px;
padding-left:17px;
overflow:hidden;
margin:0px;
color: #333333;
}
#sidebar ul li {
color:#333;
list-style-type:none;
margin-left:5px;
padding:0px;
}
#sidebar ul ul {
width:211px;
padding:5px 2px 10px 10px;
margin:0px 0px 10px 0px;
}
#sidebar ul ul li {
padding-left:0px;
margin-bottom:3px;
list-style-type:square;
list-style-image:url(images/arrow.jpg);
/*border-bottom:1px dashed #CCCCCC;
list-style-image:url(images/arrow.gif);*/
}
#sidebar ul ul ul {
width:180px;
padding-bottom:0px;
padding-left:10px;
background:none;
border:none;
}
#sidebar ul ul ul li {
list-style-type:circle;
list-style-image:url(images/arrow2.jpg);
padding-left:0px;
margin-bottom:0px;
/*border-bottom:1px dashed #CCCCCC;*/
}
#sidebar a {
color: #333333;
text-decoration:none;
}
#sidebar a:hover {
color: #333333;
text-decoration:none;
}
Here is the current HTML for her sidebar:
<br />
<ul>
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?><br />
</li>
<li><h2>Pages</h2>
<ul>
<li><a href="<?php bloginfo('siteurl'); ?>" title="Home">Home</a> </li>
<?php wp_list_pages('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
</ul>
</li>
<li><h2>Entrecard</h2>
<script src="http://entrecard.s3.amazonaws.com/widget.js?user_id=18479&type=standard_127" type="text/javascript" id="ecard_widget"></script><br /><br />
</li>
<li><h2>Categories</h2>
<ul>
<?php //wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
<?php wp_list_cats(); ?>
</ul>
</li>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li><h2>Meta</h2>
<ul>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://www.nattywp.com/" title="Wordpress Themes">Wordpress Themes</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php get_links_list(); ?>
</ul>
</div>
I’m going to run with that, however I’m going to skip out on the h2 tags for the previously mentioned reasons. The code itself is going to look very similar.
Here’s the new sidebar HTML:
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<ul>
<li><div class="sbartitle">Pages</div>
<ul>
<li><a href="<?php bloginfo('siteurl'); ?>" title="Home">Home</a> </li>
<?php wp_list_pages('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
</ul>
</li>
<li><div class="sbartitle">Entrecard</div><center><br />
<script src="http://entrecard.s3.amazonaws.com/widget.js?user_id=18479&type=standard_127" type="text/javascript" id="ecard_widget"></script><br /><br /></center>
</li>
<li><div class="sbartitle">Categories</div>
<ul>
<?php //wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
<?php wp_list_cats(); ?>
</ul>
</li>
<li><div class="sbartitle">Archives</div>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li><div class="sbartitle">Meta</div>
<ul>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://www.nattywp.com/" title="Wordpress Themes">Wordpress Themes</a></li>
<?php wp_meta(); ?>
</ul>
</li>
</ul>
</div>
Not many changes, but the BIG changes can be seen in the CSS. I have made significant changes to the headings to make them “pop” as well as the links themselves to make them a bit more noticable and seperated from eachother. The sidebar now looks as though there are actual options rather than a conglomeration of “miscellaneous stuff”. I made sure to add plenty of comments to the CSS to highlight the changes that were made.
Here is the new CSS for your viewing pleasure:
/*-- Ok, so I'm going to change this up a bit.
I'm going to eliminate left and right margins. --*/
#sidebar ul {
margin:2px 0px 10px 0px;
padding:0px;
}
/*-- Instead of an h2 tag, lets go with a class to
be used in a div tag...we'll call it sbartitle
I also want the titles to be more..obvious.
So I'm going to change the font and background.
Added an image, resized the sidebar from 280px
to 286px, and made them look like title bars
as they should --*/
#sidebar ul .sbartitle {
background:url(images/sbarbg.gif) no-repeat;
width:286px;
font-size:16px;
overflow:hidden;
color:#FFF;
font-weight:bold;
padding-left:5px;
}
/*-- No DRASTIC changes here, but a few minor edits. --*/
#sidebar ul li {
color:#000;
list-style-type:none;
margin:0px;
padding:0px;
}
/*-- Adding 20px of padding on the left side to
make up for the padding removed elsewhere.
Also increasing the width slightly. --*/
#sidebar ul ul {
width:226px;
padding:5px 2px 10px 20px;
margin:0px 0px 10px 10px;
}
/*-- Adding a dashed bottom border between menu
list items. --*/
#sidebar ul ul li {
padding-left:0px;
margin-bottom:3px;
list-style-type:square;
list-style-image:url(images/arrow.jpg);
border-bottom:1px dashed #CCCCCC;
}
/*-- Minor edits --*/
#sidebar ul ul ul {
width:206px;
padding-bottom:0px;
padding-left:20px;
background:none;
border:none;
}
/*-- Minor edits --*/
#sidebar ul ul ul li {
list-style-type:circle;
list-style-image:url(images/arrow2.jpg);
padding:0px;
margin:0px;
border-bottom:1px dotted #CCCCCC;
}
/*-- Changing the color of links to blue --*/
#sidebar a:link, #sidebar a:visited {
color: #477CC8;
text-decoration:none;
}
/*-- Highlighting a link when hovered in orange with
an underline. --*/
#sidebar a:hover {
color: #FF6633;
text-decoration:underline;
}
Before Changes Screenshot
After Changes Screenshot
Much better IMO. Your thoughts? WoollyMom, what do YOU think of the changes? Is there anything you’d like to see altered about the sidebar? Once it is finalized I will widgitize it.
Rate this post:
(2 votes, average: 10.00 out of 10)
Loading ...
Related Posts
- Wordpress Tutorial: Creating A Sidebar Part Four – Widgitize Your Theme
- Wordpress Tutorial: Creating A Sidebar Part One
- Wordpress Tutorial: Creating A Sidebar Part Three
- Webmaster’s Edge Tutorials On Tutorialized
- The First Batch Of Wordpress Plugins
Previous Post:
Wordpress Tutorial: Creating A Sidebar Part One
Next Post:
Signed Up: Commission Junction
How’d you know I’d be reading this? Oh right. I read your blog everyday and you know it. Huh.
I really love the changes you made. They aesthetically are a huge improvement, and will make the site much easier to navigate. Bravo.
Yeah, I’m just excited to get more money making opportunities up (I knew the sidebar needed some afixin’ first!), as I’m finding that we’re starting to get some decent traffic, but the pennies are still trickling.
As always though, you have done wonderful and amazing work with the blog. Thank you!