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… read them below or add one }
Thank You for the great tips. How to you get the youtube, twitter, facebook and rss symbol?
Thanks
You are welcome. that is not a tough, we got from google.
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!
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!
Already we explain this tutorial See this link http://fourblogger.com/how-to-upload-header-image-or-logo-in-thesis-theme/
I don’t mean for the Thesis header, I mean for the sidebar headers.
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?
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!
For your query, discussion is going on. we will put post soon..
I’m trying to figure out the same exact thing Holly! No luck yet though
I will make a tutorial for this soon and notify you here.
Tony , Glad you adjusted padding as per your need.
One word: Excellent!! Thank you…
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!
hai Monica,
The below tutorials help you to customize your sidebar.
http://fourblogger.com/how-to-change-sidebar-widget-background-and-border-in-thesis-theme/
http://fourblogger.com/how-to-place-different-background-color-for-each-sidebar-heading-in-thesis-theme/
http://fourblogger.com/how-to-add-background-image-for-sidebar-heading-in-thesis-theme/
more sidebar tutorials
http://fourblogger.com/thesis-theme-customization-tutorials-for-sidebar-round-up/
My blog looks cool after adding background to sidebar
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?
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
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