Comments on: How To Change Your Wordpress Theme Background CSS http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css Simply the Stuff To Grow Your Business Now Wed, 28 Jul 2010 12:35:36 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Sanjiv http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-482 Sanjiv Mon, 05 Jul 2010 06:32:25 +0000 http://carolynecooper.com/?p=190#comment-482 Hey Carolyn, I got it . Your 2nd suggestion worked and I got the white background, which i wanted. Thanks a million, 'cause I have been trying do this since quite some time. sanjiv. Hey Carolyn,
I got it . Your 2nd suggestion worked and I got the white background, which i wanted.
Thanks a million, ’cause I have been trying do this since quite some time.
sanjiv.

]]> By: carolyn http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-481 carolyn Mon, 05 Jul 2010 05:12:43 +0000 http://carolynecooper.com/?p=190#comment-481 Thanks for the kind words. I try to help. I think I see the problem by viewing your website link and if you are in a hurry, just skip to the bottom of this reply. But if you want to learn how to track down the problem, read on. Okay. There are some possibilities for why changing a background style doesn't have any affect. 1. You didn't change the right style. 2. The background is actually a graphic image. 3. You didn't change the style in the correct stylesheet. Let's start backwards because the last one is the easiest to test. Some stylesheets either have a custom CSS file that overrides the default or call on a CSS file that is stored somewhere else (I know, weird and dumb, but you know how geeks are -- they've got to show off how clever they are). Anyway, to make certain you are changing the correct stylesheet. If possible, make a backup of your stylesheet. (Actually, you should keep a backup of your theme on your own hard drive just to be safe.) 1. Look again at your theme stylesheet in the Appearance Editor (the file name is style.css in most cases). 2. Now look for your base body tag which will look something like this: <code>body { </code> If it has a background color, change it to something audacious like bright red. <strong>B<em>ut before you do, make a note of the current color.</em> </strong>If it doesn't have a background color, let's make one. <code>body {background-color: #ff0000;}</code> If you have a background graphic, your body tag will look something like this: <code>body{ background:#c35d8a url('img/header.png') repeat-x;</code> You will want to hide that temporarily, by doing this: <code>body{ /*background:#c35d8a url('img/header.png') repeat-x;*/</code> (This completely comments out the background.) Did that change the background? If yes, then you know you are changing the correct stylesheet. If not, then you know you need to hunt for a custom stylesheet. But before you do that, quickly restore your stylesheet to the way it was. To find out what stylesheets are being used by your theme, open a new browser tab or window and then select view source from your browser options (<em>Safari:</em> It's under Develop >> Web Inspector; <em>Chrome:</em> It's View >> Developer >> View Source; <em>Firefox:</em> It's View >>Page Source; <em>Internet Explorer:</em> Sorry, dude, I can't help you. I won't have that browser on my machines.) You want to look at the top in the <code>head</code> section for things that say "stylesheet" like this: <code> <link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/<strong>style.css</strong>?060410-205319" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/<strong>custom/layout.css</strong>?062810-35811" type="text/css" media="screen, projection" /> <!--[if lte IE 8]><link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/<strong>lib/css/ie.css</strong>?060410-205239" type="text/css" media="screen, projection" /><![endif]--> <link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17<strong>/custom/custom.css</strong>?063010-15755" type="text/css" media="screen, projection" /> </code> In this example, I have 4 stylesheets loaded: style.css; layout.css which is in the /custom subdirectory; ie.css in the /lib/css subdirectory; and custom.css in the /custom subdirectory. <strong>Since custom.css is the last one loaded by the browser, it trumps all other styles. </strong><em>So if there is something in that custom.css that says my background-color is white, then I can make all the changes I want to style.css</em> (the first stylesheet loaded) <em>and it won't have any affect.</em> So now you have made certain you are working with the correct stylesheet, look at the actual source and make certain there isn't a wrapper around your content. For example, if you View Source for this website you will see that immediately after the <code>body</code> tag, there are <code>div</code> tags before any content appears. <code> <body class="custom cat_wp"> <div id="container"> <div id="page"> </code> So in my case, if I wanted to change the background, I might need to change the style for <code>#container</code> or <code>#page</code>. Check your source and see if your theme wraps all the content inside a container or wrapper tag. <strong>Here's you're problem, Sanjiv, </strong> you're content is wrapped in a couple of styles. <body class="hideHeaderMenu1"><a name="top" rel="nofollow"></a><a id="skipToPosts" href="#content" rel="nofollow">Skip to posts</a> <div class="pageContainer"> Look first at the style <code>.hidHeaderMenu1</code>. According to Safari's Web Inspector, it has the background style: <code>background: white url(http://mediconweb.com/wp-content/themes/arjuna-x/images/pageBG.png) repeat-x 0px 0px;</code> In other words, your theme uses a graphic background named pageBG.png. Just delete the <code> url(http://mediconweb.com/wp-content/themes/arjuna-x/images/pageBG.png) repeat-x 0px 0px;</code> bit and I bet that solves your problem. Let me know if you have any more questions. And thanks for stopping by. Thanks for the kind words. I try to help.

I think I see the problem by viewing your website link and if you are in a hurry, just skip to the bottom of this reply. But if you want to learn how to track down the problem, read on.

Okay. There are some possibilities for why changing a background style doesn’t have any affect.

1. You didn’t change the right style.
2. The background is actually a graphic image.
3. You didn’t change the style in the correct stylesheet.

Let’s start backwards because the last one is the easiest to test.

Some stylesheets either have a custom CSS file that overrides the default or call on a CSS file that is stored somewhere else (I know, weird and dumb, but you know how geeks are — they’ve got to show off how clever they are). Anyway, to make certain you are changing the correct stylesheet. If possible, make a backup of your stylesheet. (Actually, you should keep a backup of your theme on your own hard drive just to be safe.)

1. Look again at your theme stylesheet in the Appearance Editor (the file name is style.css in most cases).

2. Now look for your base body tag which will look something like this:
body {
If it has a background color, change it to something audacious like bright red. But before you do, make a note of the current color. If it doesn’t have a background color, let’s make one.
body {background-color: #ff0000;}

If you have a background graphic, your body tag will look something like this:
body{
background:#c35d8a url('img/header.png') repeat-x;

You will want to hide that temporarily, by doing this:
body{
/*background:#c35d8a url('img/header.png') repeat-x;*/ (This completely comments out the background.)

Did that change the background? If yes, then you know you are changing the correct stylesheet. If not, then you know you need to hunt for a custom stylesheet. But before you do that, quickly restore your stylesheet to the way it was.

To find out what stylesheets are being used by your theme, open a new browser tab or window and then select view source from your browser options (Safari: It’s under Develop >> Web Inspector; Chrome: It’s View >> Developer >> View Source; Firefox: It’s View >>Page Source; Internet Explorer: Sorry, dude, I can’t help you. I won’t have that browser on my machines.) You want to look at the top in the head section for things that say “stylesheet” like this:

<link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/style.css?060410-205319" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/custom/layout.css?062810-35811" type="text/css" media="screen, projection" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/lib/css/ie.css?060410-205239" type="text/css" media="screen, projection" /><![endif]-->
<link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/custom/custom.css?063010-15755" type="text/css" media="screen, projection" />

In this example, I have 4 stylesheets loaded: style.css; layout.css which is in the /custom subdirectory; ie.css in the /lib/css subdirectory; and custom.css in the /custom subdirectory. Since custom.css is the last one loaded by the browser, it trumps all other styles. So if there is something in that custom.css that says my background-color is white, then I can make all the changes I want to style.css (the first stylesheet loaded) and it won’t have any affect.

So now you have made certain you are working with the correct stylesheet, look at the actual source and make certain there isn’t a wrapper around your content. For example, if you View Source for this website you will see that immediately after the body tag, there are div tags before any content appears.

<body class="custom cat_wp">
<div id="container">
<div id="page">

So in my case, if I wanted to change the background, I might need to change the style for #container or #page.

Check your source and see if your theme wraps all the content inside a container or wrapper tag.

Here’s you’re problem, Sanjiv,
you’re content is wrapped in a couple of styles.
<body class=”hideHeaderMenu1″><a name=”top” rel=”nofollow”></a><a id=”skipToPosts” href=”#content” rel=”nofollow”>Skip to posts</a>
<div class=”pageContainer”>

Look first at the style .hidHeaderMenu1. According to Safari’s Web Inspector, it has the background style: background: white url(http://mediconweb.com/wp-content/themes/arjuna-x/images/pageBG.png) repeat-x 0px 0px; In other words, your theme uses a graphic background named pageBG.png. Just delete the url(http://mediconweb.com/wp-content/themes/arjuna-x/images/pageBG.png) repeat-x 0px 0px; bit and I bet that solves your problem.

Let me know if you have any more questions. And thanks for stopping by.

]]> By: Sanjiv http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-480 Sanjiv Mon, 05 Jul 2010 03:07:45 +0000 http://carolynecooper.com/?p=190#comment-480 Hi Carolyne, I explored in google for instructions on how to change the background color of my free wordpress theme. It is grey and I want to change it to white. It is only in your article that I could find a very exhaustive explanation. Kudos to you. But Carolyne,I followed everything you have said , yet the color would not change. I substituted Background#d9d9d9 with #ffffff and clicked "update file". The yellow band appeared saying that "File edited successfully". But the background color has not changed. What could I have possibly missed? Hi Carolyne,
I explored in google for instructions on how to change the background color of my free wordpress theme. It is grey and I want to change it to white. It is only in your article that I could find a very exhaustive explanation. Kudos to you.
But Carolyne,I followed everything you have said , yet the color would not change. I substituted Background#d9d9d9 with #ffffff and clicked “update file”. The yellow band appeared saying that “File edited successfully”. But the background color has not changed. What could I have possibly missed?

]]> By: carolyn http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-429 carolyn Mon, 07 Dec 2009 21:25:33 +0000 http://carolynecooper.com/?p=190#comment-429 Joni, thanks for the kind words. Regarding changing the "the entire background of all the images that appear on the page", I'm not exactly certain what you mean. I've created a special post to answer your question. You can find it by clicking here: <a href="http://carolynecooper.com/web-dev/wp/how-the-background-color-of-images-can-be-changed" rel="nofollow">How the Background Color of Images Can Be Changed</a> I hope this helped answer your question. Please feel free to contact me if you need more help and thanks again for the kind words about my tutorial. Joni, thanks for the kind words. Regarding changing the “the entire background of all the images that appear on the page”, I’m not exactly certain what you mean. I’ve created a special post to answer your question. You can find it by clicking here: How the Background Color of Images Can Be Changed

I hope this helped answer your question. Please feel free to contact me if you need more help and thanks again for the kind words about my tutorial.

]]> By: Joni http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-428 Joni Sun, 06 Dec 2009 05:14:04 +0000 http://carolynecooper.com/?p=190#comment-428 Hi Carolyn; Your tutorial is the simplest and easiest I've seen yet. What I would like to do is change the entire background of all the images that appear on the page. The theme base isn't something I need changing so much but all the image backgrounds and logo are what I would like to change. Is that possible? Hi Carolyn;
Your tutorial is the simplest and easiest I’ve seen yet.

What I would like to do is change the entire background of all the images that appear on the page.

The theme base isn’t something I need changing so much but all the image backgrounds and logo are what I would like to change. Is that possible?

]]> By: carolyn http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-410 carolyn Wed, 05 Aug 2009 16:47:26 +0000 http://carolynecooper.com/?p=190#comment-410 RS, Changing background images is a little more complex than changing the background color. You have to upload your image, usually to your themes directory, and then modify the body tag in your stylesheet with not only the path to the image file, but information about positioning. To help you out, I wrote a separate post with the steps that you can find <a href="http://carolynecooper.com/web-dev/how-to-change-your-wordpress-background-image" rel="nofollow">here: http://carolynecooper.com/web-dev/how-to-change-your-wordpress-background-image. </a> I hope this answers your question and helps you out. p.s. You can use the file your uploaded to your media directory but it requires a little more precision in the background URL attribute, particularly if you left your upload directory settings on default when you installed Wordpress. By default, Wordpress organizes your media uploads by year and month. Getting the path correct can be a real pain. RS,
Changing background images is a little more complex than changing the background color. You have to upload your image, usually to your themes directory, and then modify the body tag in your stylesheet with not only the path to the image file, but information about positioning. To help you out, I wrote a separate post with the steps that you can find here: http://carolynecooper.com/web-dev/how-to-change-your-wordpress-background-image.

I hope this answers your question and helps you out.

p.s. You can use the file your uploaded to your media directory but it requires a little more precision in the background URL attribute, particularly if you left your upload directory settings on default when you installed Wordpress. By default, Wordpress organizes your media uploads by year and month. Getting the path correct can be a real pain.

]]> By: Rs http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-409 Rs Tue, 04 Aug 2009 23:22:15 +0000 http://carolynecooper.com/?p=190#comment-409 hi, thanks so much for the tutorial above. I have a further question on the same lines. I figured out how to change the color, but i want to change the background color to an imge that is on my desktop, a jpg file saved on my desktop. I havent been able to figure out where to upload the file to..i use wordpress, and tried putting it in to my media files, but that didnt help. and i have no clue of where the code has to be changed. Please help. Regards, R hi, thanks so much for the tutorial above. I have a further question on the same lines. I figured out how to change the color, but i want to change the background color to an imge that is on my desktop, a jpg file saved on my desktop. I havent been able to figure out where to upload the file to..i use wordpress, and tried putting it in to my media files, but that didnt help. and i have no clue of where the code has to be changed.
Please help.
Regards,
R

]]> By: femke http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-408 femke Wed, 22 Jul 2009 10:57:40 +0000 http://carolynecooper.com/?p=190#comment-408 tx, really usefull post! tx, really usefull post!

]]> By: abhi http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-336 abhi Mon, 08 Jun 2009 06:17:28 +0000 http://carolynecooper.com/?p=190#comment-336 really great explanation for a simple thing .. i admire your patience ^^ http://techtadka.net/tutorials/web-tutorials/201-how-to-change-a-wordpress-theme.html really great explanation for a simple thing .. i admire your patience ^^

http://techtadka.net/tutorials/web-tutorials/201-how-to-change-a-wordpress-theme.html

]]> By: Slym http://carolynecooper.com/wp/how-to-change-your-wordpress-theme-background-css/comment-page-1#comment-326 Slym Wed, 20 May 2009 10:40:44 +0000 http://carolynecooper.com/?p=190#comment-326 this is really a great tutorial, i was looking something similar and hope it will serve my purpose. I am moving from blogger to wordpress and finding difficulty in terms of updating coding. But hope soon i will be able to fix everyrhing this is really a great tutorial, i was looking something similar and hope it will serve my purpose. I am moving from blogger to wordpress and finding difficulty in terms of updating coding.

But hope soon i will be able to fix everyrhing

]]>