Home > Web Design > How to add a stylish sidebar image buttons to Thesis Theme, get PSD and Sample Files for FREE
Get Thesis Theme

{ 42 comments… read them below or add one }

1 sidder (1 comments) August 30, 2010 at 7:36 pm

Did one of my blog and it took me about a hour to get it done, I’m new in designing. I had problems with the coding just now but all have been solved now.

Reply

2 Ian from Holistic Marketing @
(6 comments)
August 25, 2010 at 10:03 am

Thesis hasn’t been as user friendly as I hoped it would be. I haven’t checked out the new release yet though. Just checked out iconfinder, awesome sauce, lots of great icon sets.

Reply

3 CC (4 comments) August 24, 2010 at 12:48 pm

I am making a tool bar using this method but can not figure out out to get rid of the spacing between the buttons. You can check my site at iloveelectrohouse.com to see what I mean. I would like the buttons flush against each other.

Also completely off topic when building a thesis blog where you want users to leave comments such as this how do you set it up similar to this forum so you do not have to have people set up a account and go into he wordpress admin?

Reply

4 Hesham @
(2694 comments)
August 24, 2010 at 1:09 pm

To your custom.css file where it says:

li.sb_topelectrohouse a:link, li.sb_topelectrohouse a:visited

Add This:
margin-top:-8px;

Or
margin-top:-9px;

—-
Enable thread comments from Wordpress settings > discussion

I hope this help!

Reply

5 CC (4 comments) August 24, 2010 at 1:21 pm

The margin worked great to get rid of the white space.

Do not really understand how to setup my comment section similar to this so the user does not ever enter the wordpress admin and also so its auto integrated with aweber.

If you can point me to a tutorial or info so I can figure that out I would have such a productive morning going.

thanks for the last tip and great site.
CC

Reply

6 Hesham @
(2694 comments)
August 24, 2010 at 4:43 pm

You don’t need a tutorial to do this!
Plz check your discussion settings!

In your Wordpress dashboard, Goto Settings > Discussion

You should allow anyone to add a comment, enable threaded (nested) comments!

Reply

7 CC (4 comments) August 25, 2010 at 12:12 am

Yes I have done that but trying to figure out how you automatically have aweber built into the comment section so you collect the e-mails every-time someone leaves a comment. Also how you restyled the comment forum so it looks much better.

I do not want to get to off topic since this thread is about your wonderful nav system but love your comment system and would love to get mine looking better and integrated into aweber.

thanks for your time
CC

Reply

8 Hesham @
(2694 comments)
August 25, 2010 at 12:43 am

You really don’t have to collect emails when ever someone post a comment! you should them the option to subscribe or not to subscribe!

I am using a plugin called “Aweber”, plz read this post (I share some interesting information) An Exciting List Building Experiment!

P.S. Try to search the blog for more articles about Thesis!

9 CC (4 comments) August 25, 2010 at 12:46 am

I know I have used Aweber for years and have many lists on it. I noticed I got a optin from Aweber after leaving a comment on this blog that’s why I asked if you were doing something special to build the aweber login into the comment signup feature.

10 CC Travis (1 comments) August 25, 2010 at 12:49 am

One last question related to this post. Where do I place the alt tag for alt text for the menu bar. I have the menubar up at iloveelectrohouse.com but when I insert the Alt tags where I would think they go it makes the graphic not show up. In this setup where would I insert the Alt= tag?

11 Hesham @
(2694 comments)
August 25, 2010 at 12:53 am

Alt tag is not necessary for the buttons!

12 Stephanie (2 comments) August 21, 2010 at 10:23 pm

Hey Hesham – great suggestions and thanks for the tips!

I was trying to add this to my site but using sprites. I created my sprites with psd and made them .png files. For each of my category links on my website, i have three “images” per .png file: a static image, a hover and an active.

I wrote this code but it’s all I have for one image and I know it’s missing a lot for the Custom file of Thesis and I don’t know what to add for the html in the text box

#category link#uncategorized a { background-position: 0 0; }
#category link#uncategorized a.active { background-position: 0 -125px; }
#category link#uncategorized a:hover { background-position: 0 -250px; }

Do you have any suggestions?

Reply

13 Hesham @
(2694 comments)
August 24, 2010 at 1:17 pm

Sorry for the late reply, I visited your blog and it looks great!

It also seems to be working well, do you still have a problem?!

Reply

14 Stephanie (2 comments) August 26, 2010 at 7:14 pm

Hey Hesham – I was finally able to figure out the sprites and I’m happy it’s working! However the .active doesn’t apply to the current page as I thought it would ie if they click La Vie est Belle, La Vie est Belle will change to the .active image while you are on that page but it doesnt. I added a .current command but that’s not working. Once again I seem to be on to something but am missing what I need to make it work.

Any suggestions on how to make the .current command work?

Reply

15 Hesham @
(2694 comments)
August 26, 2010 at 7:24 pm

Try something like:

.rollover-ex > li > ul li.current >a {}

Reply

16 Rakesh Solanki @
(1 comments)
June 8, 2010 at 3:23 pm

Well, this is the most easy tutorial i found on web, because you providing all steps and stuffs right from your post no need to search anything. Thanks Hesham

Reply

17 Hesham @
(2694 comments)
August 24, 2010 at 1:18 pm

Late reply, thank you so much for your time, glad you like it!

Reply

18 Lee Ka Hoong from Make Money Online @
(2 comments)
May 12, 2010 at 10:06 am

This is cool Hesham! I’ve just done one for my blog and it took me more than 1 hour to get it done, I’m noob in designing. I had problem with the coding just now but all have been solved now. :)

Thanks for the tutorial, thumbs up!

Regards,
Lee
NEW from Lee Ka Hoong@Make Money Online´s last blog ..Sunday Killer Link Love Post #24 My ComLuv Profile

Reply

19 Hesham @
(2694 comments)
May 12, 2010 at 11:44 am

Excellent, I have checked it now.. looks great!

I maybe give another tutorial to enhance the performance of the buttons and make it load more faster, I would love to have one image instead of 8 images so we can use CSS to chance position of the background each time we display a button, this will enhance the image hover effect as well as speed load of th sidebar buttons! I just need to do it here on the blog first to test everything then I can write the tut and put it up!

Reply

20 Dev | Technshare (59 comments) March 22, 2010 at 2:43 am

thanks for this post .
downloading ..:)
Dev | Technshare´s last blog ..A Video Marketing Blueprint That Will Knock Your Socks Off My ComLuv Profile

Reply

21 Tinh @
(116 comments)
March 10, 2010 at 12:08 am

Nice tips, however I am using Blogussion theme then it is a bit hard to implement it
Tinh´s last blog ..Boost Google Adsense Revenue With Optimization Tips by Emails My ComLuv Profile

Reply

22 Hesham @
(2694 comments)
May 12, 2010 at 11:47 am

It has nothing to do with what Theme, skin or even site you are running, you can display these buttons on any WP blog because we are using the normal text widget! it just need some work to set the button size to fit your sidebar!

Reply

23 Lee Buford @
(1 comments)
March 8, 2010 at 8:15 pm

Love these buttons… Thanks for sharing!

One question, I am not familiar with .rar files and am not able to download/open your folder. I have my SM icons already, but I am trying to get specifics you mentioned above to install. Is there another place to get the file or a different typ of file?

Thanks much, Hesham!

Reply

24 Dennis Edell @
(244 comments)
March 9, 2010 at 9:11 am

Lee – A free utility download to open .rar files – http://www.jzip.com/ :)
Dennis Edell´s last blog ..$100 – 10 Winners – Comment Contest! ‘Till Months End… My ComLuv Profile

Reply

25 Debbie from heartratemonitorwatch @
(2 comments)
February 15, 2010 at 12:27 am

I think dressing up the sidebars in Thesis is the quickest way to make it look custom. I’m not too comfortable with CSS or HTML… so it will take me a while to get to these customizations,

But I’ll keep these notes for later, thanks
Debbie@heartratemonitorwatch´s last blog ..Timex Women’s Ironman Pulse Calculator Watch My ComLuv Profile

Reply

26 Hesham @
(2694 comments)
March 2, 2010 at 5:25 pm

Thanks for you visit!
Perhaps we can help i needed.
Good luck Debbie!

Reply

27 Ben Davies (1 comments) February 14, 2010 at 2:14 pm

This will be useful on my current design, thanks.

Reply

28 aviaitonMY (2 comments) February 13, 2010 at 2:06 am

Hi,

how you make the date, name and comments count appear in each commnet box and how you arrange in vertically??

hope you can guide me to do it..

im love your commnet box.

Reply

29 Hesham @
(2694 comments)
February 13, 2010 at 2:56 am

I am using “WP Thread Comment” plugin, this one is responsible for arraigning the comments and add reply, and also send an email when you got a reply like the email will be sent to you when I submit this comment!

I use “NoFollow Free” to remove the nofollow tag from comment author link after a few comments added by the same person, which gives his/her link the juice of PageRank of posts he/she comment on, and it add the number of comments as well.

hope this help.

Reply

30 Pubudu Kodikara @
(56 comments)
February 12, 2010 at 11:17 am

Cool… thanks bro.. i’ll look at them right away! might be useful for my new theme :D
Pubudu Kodikara´s last blog ..How To Turn Off Windows Indexing Service My ComLuv Profile

Reply

31 Hesham @
(2694 comments)
February 12, 2010 at 2:47 pm

I like your new theme, it’s good for biz.

Reply

32 Pubudu Kodikara @
(56 comments)
February 12, 2010 at 8:12 pm

Hehe… thanks bro :D
Pubudu Kodikara´s last blog ..How To Turn Off Windows Indexing Service My ComLuv Profile

Reply

33 Dennis Edell @
(244 comments)
February 12, 2010 at 8:01 am

I can use iconfinder on non-thesis, yes?
Dennis Edell´s last blog ..Theme Construction Part 2 – What Should Go WITHIN The Blog? This Is The FUN Part! My ComLuv Profile

Reply

34 Hesham @
(2694 comments)
February 12, 2010 at 2:44 pm

Yes! even with static website!

Reply

35 Kristi Hines (195 comments) February 11, 2010 at 10:32 am

I love your buttons! I’ve been wanting to upgrade my sidebar for a long time now, and these will be perfect! Thanks for the tutorial.
Kristi Hines´s last blog ..How to Promote Your Business, Blog or Website on Twitter My ComLuv Profile

Reply

36 Hesham @
(2694 comments)
February 12, 2010 at 2:47 pm

Looking around on designs and CSS drives me crazy, this niche is very rich with ideas and creativity. I think I should post more often about web-design and fill the Design category with some nice and simple stuff, glad you like it.

Reply

37 sudharsan from technoskillonline @
(13 comments)
February 11, 2010 at 7:44 am

this will be very usefull for me after some days

Reply

38 Hesham @
(2694 comments)
February 11, 2010 at 8:27 am

This means I have to keep this post published for a few days until you come back ;)
Hesham´s last blog ..Thesis 1.7 A New Generation of Website Optimization My ComLuv Profile

Reply

39 sudharsan from technoskillonline @
(13 comments)
February 11, 2010 at 10:59 am

ha ha
whether i will come back or not this post will stick to this url untill this blog expires….
I will use this article after some days when i installed thesis themes to my blog..
currently im reading thesis book so that it will b usefull when installation

Reply

40 Tom from Free Squeeze Page @
(2 comments)
February 9, 2010 at 8:34 pm

That is really handy. I have Thesis on one of my blogs, but I am looking at getting the developer license so I can have it on all my blogs.

Reply

41 Hesham @
(2694 comments)
February 9, 2010 at 8:38 pm

Yeah! after working with Thesis for a few months I decided to get my developer license couple of weeks back! you know .. just in case ;)

Reply

42 Michael Aulia @
(58 comments)
February 11, 2010 at 8:12 pm

Yeah I bought the developer license from day one. Permission to remove the Thesis attribution link footer was enough for me to buy it :)
Michael Aulia´s last blog ..Windows 7 RC no more My ComLuv Profile

Reply

Leave a Comment

  Twitter (ID only. No links or "@" symbols)

CommentLuv Enabled

Our blog uses KeywordLuv. Enter "YourName @ YourKeywords" in the Name field to take advantage.

Sign up for our Newsletter

{ 7 trackbacks }