How do I make the side Nav menu look like this?

By adding appropriate styles you can get a look very much like that one with just about any thing.

By way of example, most widgets looks like the following in wordpress:

Code:

<div id="xaxaxa" class="widget widget_xbxbxb">
<div class="widget-title">
<h3>ack! Not a title</h3>
</div>
<div class="widget-content">
<ul>
<li><a href="whatever.html">Whatever Is Here</a></li>
<li><a href="whatever.html">Whatever Is There</a></li>
<li><a href="whatever.html">Whatever Is CSS</a></li>
<li><a href="whatever.html">Whatever Is More</a></li>
</ul>
</div>
</div>

To get a style very much like theirs, you would do the following ( I'm doing it for a widget within sidebar one, hence the references to div#pws-pvt-sb-one ):

1. Style the div that wraps the widget you want to alter:

Code:

div#pws-pvt-sb-one div#xaxaxa {
width: 250px; /* how wide do you want it */
padding-bottom: 10px; /* create the space below the widget items */
background: #9C9A9C; /* color the space below the widget items */
}

2. Style links within the widget

Code:

div#pws-pvt-sb-one div#xaxaxa a {
color: #CCCCCC; /* set the text color of links */
text-decoration: none; /* remove the underline from links */
}

3. Style the unordered list that displays the content

Code:

div#pws-pvt-sb-one div#xaxaxa div.widget-content ul {
list-style: none; /* remove the bullets from the list */
margin: 0; /* remove the margin from the list */
padding: 0; /* remove the padding from the list */
width: 250px; /* set the width of the list */
}

4. Style the list elements

Code:

div#pws-pvt-sb-one div#xaxaxa div.widget-content ul li {
height: 50px; /* how tall do you want them to be */
width: 100%; /* take up all horizontal space in the unordered list */
font-family: arial, helvetica, sans-serif; /* set your font */
font-size: 14px; /* set your font height */
line-height: 48px; /* set your line height. this could be 50 or less */
font-weight: bold; /* bold font */
background-color: 636563; /* set your background color */
border-spacing: 0; /* potential ie funkiness...I could be wrong here */
border-collapse: collapse; /* potential ie funkiness...I could be wrong here */
border-bottom: 1px inset #CCCCCC; /* styled bottom border for each item */
margin: 0; padding: 0; /* remove any unintended margin and padding */
}

5. Style links within the list items

Code:

div#pws-pvt-sb-one div#xaxaxa div.widget-content ul li a {
display: block; /* we want them to take up all available space */
padding: 0 0 0 20px; /* start them in 20 pixels from the left of the list item */
border: 0px none; margin: 0; /* strip out any margins and borders */
}

6. Set the hover style

Code:

div#pws-pvt-sb-one div#xaxaxa div.widget-content ul li a:hover {
color: #FFFFFF; /* change text color on hover */
background-color: #333333; /* change background color on hover */
text-decoration: none; /* remove any hover text decoration */
}

7. Set the active style (if wanted)

Code:

div#pws-pvt-sb-one div#xaxaxa div.widget-content ul li a:active {
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
}

This method is relatively simple to do and works in most modern browsers without a problem...though the look will differ between browsers.

To choose which widget to style like this, view the page source and look for the widget in question...and find the <div id="xaxaxa" class="widget"> entry for it. Use the name provided by the id instead of xaxaxa and you should get a very similar look.

In the privateer, you could either stuff the style into the head using the Privateer - General Display - CSS and JS - CSS Inserts option or add it to a style sheet and include the stylesheet via the Privateer - General Display - CSS and JS - Header Inserts via a link call.

Code:

Please feel free to let me know if the above doesn't help. There are plenty of ways to get looks very much like that one with just CSS.

Once I _finally_ get 2.0 of the theme out, doing this kind of thing should be a breeze...but right now it can take some doing.