In last week Thesis Theme tutorial, I’ve shown you how to change background color. In today tutorial, I’m going to extend the concept and show you how to add custom background image.
How To Add Custom Background Image?
Here are the 4 steps you can do on your own.
Step #1: Open custom.css
Open custom.css file using any text editor of your choice such as Notepad. The file is located at thesiscustom folder. This file is specially created for you to customize the design of Thesis Theme such as font, font size, font color, background color, background image and etc.
Step #2: Adding Background Image
Add the following codes to your custom.css file and save it.
body.custom {
background: #8db6b6 url('images/bg-ocean.jpg') 50% 0 no-repeat;
}
.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}
.custom #page {
background: #fff;
}
You need to include background image in this folder thesiscustomimage. From the code above, the image filename is bg-ocean.jpg. You can change to any other image file you like.
Step #3: Changing Background Color
From the code above, you can modify the background color in body.custom. The color is in hexadecimal format with a leading #. You can check out the online color picker from my previous post – Adding Bckground Color In Thesis Theme.
Step #4: Upload custom.css & Image To Your Web Server
Finally upload modified custom.css file to your web server folder thesiscustom and image file to your thesiscustomimage folder. Done, you should be able to see the effect now.
Conclusion
Thesis Theme has been designed in such a way that we can customize the theme conveniently. Without touching the core framework, you can easily follow the steps above to customize your background image.
Related Posts:
{ 15 comments… read them below or add one }
Superb.
Really appreciate your initiative and expertise.
thanks
Hi. I have pasted in each item according to your instructions, yet I can find no effect at all, even after deleting my cache and so on. Any ideas? Copying and pasting code is something I am familiar with yet, nothing happens. Does this work with 1.4.1?
Thanks,
Regis
@Regis,
It should be working fine with Thesis 1.4.1. I have a few questions:
1. Did you modify your Thesis source code before?
2. Where do you put your custom.css file?
3. Could you send me the content in your custom.css file?
Thanks for your prompt reply.
In answer to your questions:
1) No, this is the first time I have tried to edit anything, although a Wordpress Ninja guy set up my blog for me initially and put in all the SEO, etc. in a special deal with Blog Success.com. This is my 4th web design platform, and I am trying to grok the methods used by this new one. My first serious attempt at adding features has been today, thus my questions.
2) I’ve tried it in two pairs:
/wp-content/themes/thesis/custom_backgrounds
/wp-content/themes/thesis/custom_backgrounds/custom_images
and
/wp-content/themes/thesis/custom/images
/wp-content/themes/thesis/custom
3)
More information about styling your Thesis installation using this file can be found
in the User’s Guide:
http://diythemes.com/thesis/rtfm/customizing-thesis-with-customcss/
*/
body.custom {
background: #8db6b6 url(‘images/dreamy-world-70.jpg’) 50% 0 no-repeat;
}
.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}
.custom #page {
background: #fff;
}
None of these places seem to work, but I am wondering about how the paths are working- it seems in the custom.css to refer to ‘images/name-of-image.jpg’ but I am not sure what that is relative to.
Also, I am not sure what method to use to append the custom.css file to allow the background you speak of in Step 3 to affect the appearance. This is quite unclear to me.
Thanks for your prompt attention.
@Regis,
In “Thesis Options”, do you tick the checkbox “Use custom stylesheet”? If no, then Thesis will not read custom.css from /thesis/custom/ folder.
Hello~
How do I get a smaller background to hug the left side of the page?
Is it possible to make the whitespace under the text areas and sidebars all transparent?
Thanks,
Robyn
Секс и интим интим знакомства, интим знакомства forum, интим знакомство краснодар, секс интим знакомства, интим знакомства фото, знакомства интим yabb, интим знакомства уфа, самара знакомства интим, интим знакомства петербург, интим знакомства саратова, знакомства интим нижний, интим знакомства москва, знакомства интим threads, питер интим знакомства, интим знакомства ростов, знакомства интим showthread php, знакомства интим minibb, интим знакомства text index
Hey ..Thanks for the tip… I would like to know how you added the RSS and twitter in your header…?
Just found out about BlogHighlight. Really loving your Thesis customizations and Thesis tutorials. I’ve added BlogHighlight to my Thesis Theme showcase and tips site. Keep up the good work!
awesome your blog is helpinh me lot.
thnx
@Regis Chapman: it happens with thesis 1.6+; if you take a look at “Custom file editor” where thesis options are located, you can see that your path had extra trailings which makes the code invalid,
body.custom {
background: #8db6b6 url(\’images/dreamy-world-70.jpg\’) 50% 0 no-repeat;
Where it should be like this,
body.custom {
background: #8db6b6 url(’images/dreamy-world-70.jpg’) 50% 0 no-repeat;
~it made me MAD and I finally fixed it when I found this out.. thanks!
I love thesis theme and appreciate every post that anyone makes regarding this beautiful theme. I am curious to know how did you ad that yellow box at the end of the post after related posts.
thank you
@Fati,
I use Thesis hook “thesis_hook_after_post_box” and write a custom function myself.
add_action(‘thesis_hook_after_post_box’, ‘custom_content_footer’);
function custom_content_footer() {
// Write your code here
}
how to add space in header of thesis theme?
can you provide the guide post
body.custom {
background: url(‘path to image’) repeat;
}
I want to display a small image all over the background. I guess it is enough, isn’t it?
{ 2 trackbacks }