Hi

I am trying to follows the instructions at http://www.famousbloggers.net/stylis...ar-thesis.html to add custom sidebar buttons.

This is the HTML code I have adapted to my own requirements and have inserted into a left sidebar text widget:

<div>
<div class="sb-buttons">
<ul>
<li class="sb_ebooks"><a href="http://anitaskinner.com/fast-start-ebooks">eBooks</a></li>
<li class="sb_ecourses"><a href="http://anitaskinner.com/fast-start-ecourses">eCourses</a></li>
</ul>
</div>
</div>

This is the CSS style code I have adapted to my own requirements and have inserted into ATO Add HTML/CSS Inserts:

/*---------------------------------*/
/* Sidebar buttons BOX */
/*---------------------------------*/
.sb-buttons ul li a {background:url("http://anitaskinner.com/wp-content/uploads/2010/03/sprite.png") no-repeat scroll 0 0 transparent; display:block; text-indent:-9999px; width:0px;}
li.sb_ebooks a:link, li.sb_ebooks a:visited {display: block; width: 200px; height: 74px; background: url('http://anitaskinner.com/wp-content/uploads/2010/03/eBooks-image.png') no-repeat scroll 0px 0px; outline: none;}
li.sb_ebooks a:hover {display: block; width: 200px; height: 74px; background: url('http://anitaskinner.com/wp-content/uploads/2010/03/eBooks-image.png') no-repeat scroll 0px 0px; outline: none;}
li.sb_ecourses a:link, li.sb_ecourses a:visited {display: block; width: 200px; height: 74px; background: url('http://anitaskinner.com/wp-content/uploads/2010/03/eCourses-image.png') no-repeat scroll 0px 0px; outline: none;}
li.sb_ecourses a:hover {display: block; width: 200px; height: 74px; background: url('http://anitaskinner.com/wp-content/uploads/2010/03/eCourses-image.png') no-repeat scroll 0px 0px; outline: none;}
/*------------ End of Sidebar buttons BOX ---------------------*/

The sidebar buttons are not showing, all the images have been uploaded to site. Where am I going wrong with this? I just can't get the buttons to show!

My site is: http://anitaskinner.com.

I would really appreciate some help with this.

Thanks and kind regards
Neat

Why not do it this way, change your widget too this

<div class="sb-buttons">
<ul>
	<li class="sb_ebooks"><a href="http://anitaskinner.com/fast-start-ebooks"><img src="http://anitaskinner.com/wp-content/uploads/2010/03/eBooks-image.png"></a></li>
	<li class="sb_ecourses"><a href="http://anitaskinner.com/fast-start-ecourses"><img src="http://anitaskinner.com/wp-content/uploads/2010/03/eCourses-image.png"></a></li>
</ul>
</div>

and change the CSS to this

div#sb-buttons ul li {
border-left:solid 0px #666666 !important;
	}