How to be an Expert Theme Tweaker: Changing the Background
Tweek, from South Park.
Some of us are born tweakers. We find a WordPress theme we like, we install it, and then we decide we don’t like the font. Or we want a custom logo. Or we want Google ads to appear below every third post. Or…we just want the site to look like our own, and not something generic or something that belongs to someone else.
That’s the real root of the issue, I think. Luckily, there are a few simple theme modifications you can make — even if lines of code make you go blind — that will make a site your own. Let’s start with one of the most common requested changes: giving your theme a custom background.
The problem with explaining how to tweak WordPress themes is that they’re all set up differently. The more specific I make my instructions, the more they won’t work with most themes.
So the first thing to do is figure out how your particular theme handles backgrounds. In your WordPress dashboard, go to Appearance → Editor. The file that appears by default is called style.css, and that’s the file that largely dictates how a theme looks.
Near the top — underneath some theme information and maybe some other basic code — will be a line that looks like this:
body {
Underneath it will be a bunch of presentational rules, like “font” or “color.” For example, in my PressPlay 2.0 theme, you’ll see:
body {
font-family: Georgia, serif;
line-height:1.6em;
font-size:.85em;
color:#111111;
text-align:center;
background:url('images/header-bg.png') repeat-x;
background-color:#ecf0d9;
}
You guessed it: it’s those background lines that you’ll be changing. (Note: sometimes you’ll find them under html, not body.)
In PressPlay, three things are happening: I specify a background image (the URL inside the parentheses), I specify that the image should be repeated horizontally across the top of screen (repeat-x), and I specify that the rest of the background should be a grayish color (that’s what #ecf0d9 means). So yes, the background of my entire header is just one thin image repeated sideways.
(Browsers give images precedence over colors. So while the entire background is set to that grayish color, the image then appears on top of it.)
Other themes might only have a color specified. Or they might only have an image, with no repeat rule. (By default, if images are too small to span the whole screen, they automatically repeat horizontally and vertically.) Or they might have no background specified at all. So how do you change it to what you want?
There are a few different tools at your disposal. Erase any background lines that the theme might have inside that body { } or html { } section, and replace them with some combination of the following:
background-color
To make your background a solid color, add this line:
background-color:#______;
Fill in the blank with a hexadecimal color code. That’s a combination of six characters, all of them ranging from 0 through F (that is, 0-9 and then A-F). The first two digits represent red, the middle two represent green, and the final two represent blue. 0 is the absence of a color; F is the full color. So #0000ff would represent blue.
Confused? Yeah, don’t worry about it. You can generate color codes easily on this site.
background-image
To display a background image, add this line:
background-image:url('______');
Fill in the blank with the web address of an image. Make sure the image is on your server, not somebody else’s.
background-repeat
To control how a background image is repeated, add this line:
background-repeat:________;
Fill in the blank with repeat, no-repeat, repeat-x, or repeat-y. The first two are self-explanatory. Repeat-x refers to the x-axis, meaning the image will repeat horizontally; repeat-y refers to the y-axis, meaning the image will repeat vertically.
Mess around and see what you can come up with. If everything goes haywire, chances are you made a typo; make sure each line ends with a semicolon, make sure image URLs are surrounded by single quotes, etc. Good luck!
Hi Michael,
Thanks for the beautiful theme! We are just starting to use it, so forgive me if my questions are too basic.
1. We have a category called “restock” that lists links to items that we have, well, restocked! The links work in the original post but if you click on the category “restock”, when the post comes up the links are missing. Is there a way around this?
2. I am still only a few months old to wordpress so maybe this is true with all themes, but I am wondering…we have a multi-user blog and would like a user’s profile to come up (as well as their other posts) when someone clicks on their posting name. Is this an option that can be turned on (for those who want it) and off (for those who don’t)? Right now, I don’t see any way for these mini-bios to show up. I know that I can make a page for users, but I’d like it to be a little more dynamic than that.
Again, thanks for the theme and thanks in advance for listening!
Debbie
Scary. That second paragraph made me think that you’ve been watching me in my office over the last few hours…Can’t wait to read more!
Hi,
So, I went to wordpress.org and searched their plug-ins and I think I found something that will display profiles…but the first issue is still problematic and I am not sure I would even know what to search for….I just want the links that are in the original post to be maintained when looking accessing the post under its category. Any ideas? Coding?
Thanks again,
Debbie
Hi,
Great article. I want to change me comment’s page css and setting how i can do that?
Thanks
Well, I really like this theme, and I tried to experiment with new colors (per above). I find that almost none of my changes actually take. I probably changed every single color code — one at a time, trial and error — and only changed two or three minor things. What I’d like to do is create a color scheme that’s not green. I did change the header and footer background. Took awhile on the footer, but I got it done. I haven’t had much luck with getting rid of the rest of the greens. What am I missing here? Why doesn’t changing color codes do anything? Or rather, almost never do anything except in a few rare cases… Is this a caching problem? I’ve tried clearing browser cache. My SuperCache plugin is turned off. Anyway, thanks in advance for the help.
I think I figured it out. What I really want to change is not color codes but images. You might want to call attention to this in your article above because lots of websites use images where you don’t expect to find them. Changing the color may be as simple as editing the image in photo software. No code change at all. I’m glad this will work out for me because I like the functionality and cleanness of your theme.
Hi,
I like the design of it but can’t set the navbar showing pages instead of categories
Thanks for informative article.
Still in progress with my website. Wanted to enlarge the fonts and went to body{ font size and changed from .81 to 1em and …well, it all reacted. Sure the fonts were larger, but also lost the menu titles on the top bar, which I really like.
Also, I tried to upload an image from WP, got URL then entered it in PressPlay options. Didn’t work. WP is hosted at godaddy, should I have to upload it at the hosting service then?
I know…these are newbie questions, and new to this I am.
Really like the theme, I tried so many others. I even like the green.
Oh, also,
is there a way to set up a landing page, and set it up with autoresponder, etc. ??? Or to import widgets?
many thanks, and thanks for the nice theme design.
C.J.
Hi,
I would like to add my adsense code when i open a single post.
i tried to put the code in the single post.php file but nothing happens. appreciate any help here.
thanks.
how do i get the comment page working? mine is giveing me headache, thanks
Hello,
Can you tell me where in css is section responsible for font type in posts ? I