Some bloggers think and feel that Thesis Theme is kind of ugly and they would like to have a custom theme with a unique style, and this is what we was trying to do here on FamousBloggers blog, and we have succeeded so far to style and change the ugly face of Thesis theme and turned to something else probably most of you will NOT notice it’s Thesis Theme anymore, Don’t you think so?
So.. In this tutorial I am going to show you how to make a sidebar buttons for Thesis Theme, so it’s not a navigation buttons but you can use it the way you like and you think it will work for you. We will use images, CSS and some HTML code to past simply to your side bar text widget, although it’s not for Wordpress blogs only, it’s not also for Thesis Theme only, but if you are using any other blogging platform and it’s not of the thesis examples, or you have a static website, and you know where to add the HTML code to display the buttons on your sidebar then this tutorial will work for you just fine. You can see them working on our FamousBloggers blog sidebar.
What you will need?
Basically you will need some HTML and CSS knowledge to customize the code the way to fit your blog, and also some graphic buttons to use them on your blog sidebar, and because I don’t know how you sidebar looks like and what is the specific width, height and color theme you prefer to have for your buttons, so I will not include ready made buttons for you, but I will give you the original PSD file that I am using to create FamousBloggers blog sidebar buttons as a gift, for free, so you can start working using it to create your custom web page buttons, and I will also tell you from where to get free set of icons to include them to your buttons if you would like to make look more professional, and this means you will need to have some little skills with:
So you can get benefit of this tutorial.
From where I get my icon sets?
Almost all icons and images I use on my designs are from the icon finder search iconfinder.com, I remember this website one year back when it was hard to find what you really need on it, but now it has more awesome icons sets that I use for designing logo and buttons in both ICO and PNG formats, you will love it.
Download PSD file and Sample Buttons
First of all download our PSD file and our image samples, the PSD file has the basic layers to create the buttons with a gray background, it will allow you easily to change the buttons colors and/or gradient colors for the mouse over effect by playing with it’s style, and of course change the size of buttons. You can also choose the icons that match your need from the icon finder iconfinder.com website and just replace them with the ones on the PSD file. Now you will be able to easily generate your own buttons.
Also you will need a sprite.png transparent image to replace it with the text of your links, and this is why we included the folder of our sidebar_buttons for you to check it out so you can get the full picture of what we did exactly to create these sidebar buttons.
Download the Sidebar buttons PSD + Sidebar sample buttons Folder
CSS style your sidebar buttons
Copy and past this code to your custom.css file and don’t forget to change the (URL_TO_BUTTON_IMAGE) to point to the right path where your button images are saved on your hosting server, and of course upload your custom.css file back to your server after editing it, this code is a style for two buttons, you can add more buttons and style them as well using the same way.
/*---------------------------------*/ /* Sidebar buttons BOX */ /*---------------------------------*/ .sb-buttons ul li a {background:url("URL_TO_BUTTON_IMAGE/sprite.png") no-repeat scroll 0 0 transparent; display:block; text-indent:-9999px; width:300px;} li.sb_write a:link, li.sb_write a:visited {display: block; width: 300px; height: 70px; background: url('URL_TO_BUTTON_IMAGE') no-repeat scroll 0px 0px; outline: none;} li.sb_write a:hover {display: block; width: 300px; height: 70px; background: url('URL_TO_BUTTON_IMAGE') no-repeat scroll 0px 0px; outline: none;} li.sb_mmo a:link, li.sb_mmo a:visited {display: block; width: 300px; height: 70px; background: url('URL_TO_BUTTON_IMAGE') no-repeat scroll 0px 0px; outline: none;} li.sb_mmo a:hover {display: block; width: 300px; height: 70px; background: url('URL_TO_BUTTON_IMAGE') no-repeat scroll 0px 0px; outline: none;} /*------------ End of Sidebar buttons BOX ---------------------*/ |
HTML Code
After you generate your files upload them to a folder in your host server, so you can call them to view them where you want using this code, just make sure to change the (Page_Link) to the URL you want. This code is going to add two buttons and of course you add more, but don’t forget to create a separate style for each one in your custom.css file the same way we did above.
To show the buttons on your sidebar you will need to add a text widget by going to Appearance > Widgets > and simply add a test widget to your sidebar where you want the buttons to show and past the HTML code into it and save it.
<div> <div class="sb-buttons"> <ul> <li class="sb_write"><a href="Page_Link">Write for us</a></li> <li class="sb_mmo"><a href="Page_Link">Beginners guide for make money online</a></li> </ul> </div> </div> |
Conclusion
There are some simple ways to customize your Wordpress blog theme. Working with Thesis Theme is a lot of fun and it will teach you so many things while working with it, it’s the theme that can teach me by involving me on it’s code and style. You can get amazing icons and PNG files for your design from the icon finder search at iconfinder.com, and the awesome thing is it’s for FREE.
Credits:
I have got this idea from ProBlogDesign.com blog. I like the design of this blog.
What’s the Relationship between Money, Blog Comments and True Love?
5 Powerful Ways to Write Dynamic Content
Top 10 SEO and Marketing Tips from MMO Social Network
To Schedule tweets or NOT to tweet?
Protect Your Content and Reputation
Scribe SEO content became the official SEO plugin for FB Guest Blogging Contest
How To Get More Twitter Followers
How to use Social Media as Unlimited ideas Generator to boost your blog Organic Traffic?
Hesham (103)
Featured in MMO S... (53)
Gerald Weber (31)
Dennis Edell (28)
Nile Flores (20)
Jack@Online Marke... (15)
Gautam Hans (13)
Ralph Jean-Paul (13)
Kiesha @ WeBlogBe... (12)
JR @ Internet Mar... (9)
Tom@Build That List (9)
chandan@work at h... (8)
{ 4 trackbacks }
{ 10 comments… read them below or add one }
(8 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
[Reply]
(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]
Dennis Edell (220 comments) Reply:
March 9th, 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…
[Reply]
(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
[Reply]
Hesham
@FamousBloggers
(923 comments) Reply:
March 2nd, 2010 at 5:25 pm
Thanks for you visit!
Perhaps we can help i needed.
Good luck Debbie!
[Reply]
This will be useful on my current design, thanks.
[Reply]
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]
Hesham
@FamousBloggers
(923 comments) Reply:
February 13th, 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]
(47 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
Pubudu Kodikara´s last blog ..How To Turn Off Windows Indexing Service
[Reply]
Hesham
@FamousBloggers
(923 comments) Reply:
February 12th, 2010 at 2:47 pm
I like your new theme, it’s good for biz.
[Reply]
Pubudu Kodikara
@TechHamlet
(47 comments) Reply:
February 12th, 2010 at 8:12 pm
Hehe… thanks bro
Pubudu Kodikara´s last blog ..How To Turn Off Windows Indexing Service
[Reply]
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!
[Reply]
Hesham
@FamousBloggers
(923 comments) Reply:
February 12th, 2010 at 2:44 pm
Yes! even with static website!
[Reply]
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
[Reply]
Hesham
@FamousBloggers
(923 comments) Reply:
February 12th, 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]
(12 comments) February 11, 2010 at 7:44 am
this will be very usefull for me after some days
[Reply]
Hesham
@FamousBloggers
(923 comments) Reply:
February 11th, 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
[Reply]
sudharsan from technoskillonline
@sudharsanece
(12 comments) Reply:
February 11th, 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]
(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]
Hesham
@FamousBloggers
(923 comments) Reply:
February 9th, 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]
Michael Aulia
@michaelaulia
(57 comments) Reply:
February 11th, 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
[Reply]