How to Add Background Image for Sidebar Heading in Thesis Theme

As we know the sidebar of the website gives better look to visitors so we need to concentrate much on sidebars during the theme customization. In this video tutorial I am going to explain about how to add background image for sidebar headings in thesis theme.

When you add background image you should consider about the size of the side bar and the image because it plays important role in the customization. I am having the sidebar of size 300px.so I am going to redesign the image size using image editing softwares like photoshop, snagit and etc.

You may add single image to the background or bit of images to the background. If you are adding single image which having design we should take care of size we have to fix the same size of the sidebars.

To add the image in background first you have to upload your designed image to the custom folder of thesis theme using your ftp software.

The path of custom folder is public_html/fourblogger.com/wp_content/theme/thesis_16/custom/images/.

Inside image folder you have to upload the image file.

Add the following code in your custom.css file.

/* code for add image in sidebar headings*/

.custom .sidebar h3{
background:url("http://fourblogger.com/wp-content/themes/thesis_16/custom/images/background sidebar image.png");
margin-left:-0.76em;
width:327px;
font-size:1.6em;
line-height:2em;
color:#fff;
padding-top:0.3em;

}

The above code you should change the background url path as your uploaded image path.

Once you placed the above code, you need to style the sidebar image with respect to your sidebar by changing the margin and width.

While changing the width you should adjust both image size and in sidebar h3 width.

In order to fix image exactly in sidebar you should change margin and padding.

In order to look sidebar much better give the border between sidebar and the content.

The default thesis theme sidebar heading is like the below image

default sidebar heading

To paste the above code in custom.css  login your wordpress admin.

Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard. Select custom.css file and click on edit selected file.

Paste the above code and save it then visit your site with background image in sidebar headings like below image.

sidebar heading with image

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 19 comments… add one }

Leave a Comment

  • Nikki Brown January 3, 2010, 1:31 AM

    Thank You for the great tips. How to you get the youtube, twitter, facebook and rss symbol?

    Thanks

    Reply
  • Pascal January 3, 2010, 9:21 AM

    You are welcome. that is not a tough, we got from google.

    Reply
  • Holly January 11, 2010, 12:24 AM

    Hi, I was wondering how to change the image for the sidebar headers each individually? Your code changes all the headers into the same image, can I specify a different image for each widget in the sidebar? Thank you!

    Reply
  • Holly January 11, 2010, 5:06 AM

    Also: what if I want a header image instead of a background image and text title? I would like to replace the text title with an image. Thank you!

    Reply
  • Pascal January 11, 2010, 9:45 AM Reply
  • Holly January 11, 2010, 5:28 PM

    I don’t mean for the Thesis header, I mean for the sidebar headers.

    Reply
  • Pascal January 11, 2010, 6:29 PM

    If you don’t want text to be entered in sidebar header, then don’t give any title for widget. You can design sidebar header image as per your wished text.

    If still i don’t get you, could you please explain your need little bit more?

    Reply
  • Holly January 11, 2010, 9:16 PM

    I’m sorry, maybe an example will help to show what I’d like to do. I don’t have an example of it done on thesis but as you can see on this website: http://mercinewyork.blogspot.com/
    Each sidebar title is it’s own image. How can I specify a different image for each sidebar title?
    Thank you!

    Reply
  • Pascal January 11, 2010, 11:58 AM

    For your query, discussion is going on. we will put post soon..

    Reply
  • Karalee Serra January 22, 2010, 1:10 AM

    I’m trying to figure out the same exact thing Holly! No luck yet though :(

    Reply
  • Pascal January 22, 2010, 1:32 AM

    I will make a tutorial for this soon and notify you here.

    Reply
  • Pascal January 22, 2010, 1:37 AM

    Tony , Glad you adjusted padding as per your need.

    Reply
  • Vanessa March 12, 2010, 9:38 PM

    One word: Excellent!! Thank you…

    Reply
  • Monica April 12, 2010, 9:21 AM

    Hello!

    When do you think the tutorial Holly wanted will be up?

    I am currently trying to find a tutorial on how to add a header and corresponding border to my sidebar widgets. Any help would be greatly appreciated.

    Thanks!

    Reply
  • Suresh April 12, 2010, 10:45 AM Reply
  • Geekyard September 6, 2010, 3:29 PM

    My blog looks cool after adding background to sidebar :)

    Reply
  • bob June 20, 2011, 11:10 AM

    how do you make the images that you put in the sidebar?

    is there a way to change your sidebar without having to make images?

    is there also a way to change your content area like on this site?

    Reply
  • Lenzfire September 16, 2011, 7:41 AM

    Thank you I have changed the sidebar heading background but I need to reduce the gap between the Sidebar heading and sidebar content. but when I do it the heading moves upwards too. How can I make that

    Reply
  • Kamal Patel October 18, 2011, 3:26 PM

    I have put that code in CSS for sidebar ..and upload one image to my Library and given URL in given code….

    Image was coming to my sidebar …but its repeat also and print it double when TEXT is too long…let me know on this so i can make also good one.

    Thanks
    Kamal Patel

    Reply