How To Create Box For Sidebar Element – Thesis Tutorials

Thesis themes is a wonderful and professional wordpress theme, we can customize in many ways and make it as unique as you can. If you want to customize your thesis theme in simple way, you can just play around the Thesis Options and Design Options in the thesis cpanel, that would be enough for you; but if you want to customize your thesis theme in unique way, you might need to know a little about CSS coding as most of the customizations require you to play around with the custom.css and custom_function.php file.

How To Create Box For Sidebar Element

Today, I just want to share a very simple thesis customization tutorial which is how to create a box for all your sidebar elements. Some people may want their sidebar elements to be surrounded with a rectangular box, it’s to make every single sidebar section can be seen clearer.

It’s pretty simple, just copy the code below and paste in your custom.css file.

.custom .sidebar h3 {text-align: center; font-weight: bold; font-size: 17px; color: #FFFFFF; background:#424242 repeat; border: 3px solid #ffffff; padding: 5px 5px; width: 95%; -moz-border-radius: 5px; margin-top: 5px; padding:5px 5px;}
.custom .sidebar .widget {background-color: #ffffff; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border: 1.5px solid #000000; padding: 5%; width: 90%; }

Once you’ve uploaded and replaced the custom.css file, you will see something like this.
sidebar-box-customization

My Thought

Thesis Theme can be customized in thousand ways and almost all the thesis tutorials can be found on the web, so you have to sketch your design and see what you want to be integrated into your thesis theme. I’ve been using Thesis Theme for quite some times, and I can say Thesis Theme is the best wordpress theme and you can customize it in thousand ways and come out with your brilliant design.

I hope you like this little Thesis Customization tutorial, when I learn new thesis customization tips and get used to it, I’ll also write and share the tutorial over here.

I hope you like my recent new customized thesis theme, it’s simple and I hope you like it!

GET THESIS THEME NOW IF YOU HAVE YET TO BUY ONE!
Buy Thesis

About Lee Ka Hoong

Lee is a part time blogger and he writes about blogging tips, make money online, search engine optimisation, affiliate marketing, traffic building and etc. He shares his adventure and experience on how to make money online with a blog. He also shares online tools and resources for designer at Theme Blogger.

Related Posts

How To Highlight Author Comments – Thesis Tutorials
60 Wonderful And Helpful Thesis Customization Tutorials
How To Fix Custom Editor Bug For Thesis 1.7 and WordPress 3.0.1
Download Thesis Theme 1.8 And Why You Need It?
MyBlog2Day Is Running Thesis Theme

Comments

  1. Pascal says:

    Lee Ka, Nice Thesis hack. Today i come to your site as you are being active in some much blog comments. You have good content regarding wordpress. Reading your site through RSS. I need to know more hacks.
    .-= Pascal´s last blog ..Free Worpress.com to Self Hosted WordPress.org Migration: =-.

    • Lee Ka Hoong says:

      @Pascal,
      Thank you for reading my blog my friend. I hope you find something useful from this blog, if you need anything else simply contact me via the contact form above. :)

  2. Thats cool. Very simple technique to blog with. It seems to be so simple for me who is familiar with CSS but it can be of great help who has little or no tech knowledge
    .-= Senthil Ramesh´s last blog ..Whats wrong with Mashable !! Or is it a CMS issue? =-.

  3. BTW, I would like to know how you made the Blog categories shown below, then recent comments displaying gravatars?
    .-= Senthil Ramesh´s last blog ..Whats wrong with Mashable !! Or is it a CMS issue? =-.

  4. Thesis Theme looks great on your blog. Knowing how to customize themes can be very useful. Even if you’re using a great looking theme, you do want it to be somehow unique. You never want to look too similar to other blogs.

    • Lee Ka Hoong says:

      @Metal Briefcases,
      Thanks my friend, I hope you like my current design. I’m poor in customizing thesis theme, so I took long time to customize it. No doubt, Thesis theme is a wonderful wordpress theme, grab one if you need a professional theme. ;)

  5. Malhar Parve says:

    Thesis is know for its simplicity. Your tips are very helpful for new bloggger’s like us. Also, just want help from you about the sidebar email subscription box. How can I create like yours? Thanks in advance. :)

  6. A very and easy CSS tip to implement. Just keep noting all the tips down and eventually you will have many posts that will help others.
    .-= George Serradinho´s last blog ..eBook – Your Body Is Your Temple =-.

    • Lee Ka Hoong says:

      @Serradinho,
      Yea, I found that I have many notepad files that kept all the thesis tutorials in my laptop. Rather I post them online instead of keeping them privately.

      Again, I would like to say thank you for your help in thesis customization bro! :)

  7. James M. says:

    That’s cool. I effected the same look in mine once but it took more than 8 lines of code. Great hack.
    .-= James M.´s last blog ..Wave board 101: Learning the waveboard =-.

  8. Tinh says:

    Nice tip, thanks. Thesis is now community-based theme, not by blogger individually. We are not along with Thesis :-)
    .-= Tinh´s last blog ..Site Performance: Check Your Site Speed Within Google Webmaster Tools =-.

  9. marcus from how to make money online says:

    Wow. These boxes look great. II have a blog template that was made with 1 of these boxes installed but since you provided such good instructions I think I will ad another box to my blog. Thanks.
    .-= marcus@how to make money online´s last blog ..How To Get More Twitter Followers On Auto-Pilot =-.

  10. titan says:

    still not interested to use premium theme. I prefer with the old one. BUt i admit i like your new theme compare the last one. :D
    .-= titan´s last blog ..Edisi Siasat: Buat Duit dengan Intellilinks =-.

Speak Your Mind

*

CommentLuv badge