Title: Changing the background on Posts
Last modified: August 21, 2016

---

# Changing the background on Posts

 *  Resolved [OB](https://wordpress.org/support/users/reburton3941/)
 * (@reburton3941)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/)
 * Hi,
 * I want to change the background color of the posts and the featured post display
   on the home page to Hex E6E6E6. I have a child theme. I have no experience changing
   the css file, but I am eager to learn.
 * My URL is [http://www.bestmenswatchesreviews.com](http://www.bestmenswatchesreviews.com)
 * Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844481)
 * Hi reburton,
 * Try with this:
 *     ```
       #primary-main .main-article {
           background: #E6E6E6;
           border: 10px solid #E6E6E6;
           outline: 1px solid #E6E6E6;
       }
       ```
   
 * This would change all the background of each of the watches on the page to the
   desired color, including the border and outline. If you want to exclude the border
   and outline simply delete the border and outline CSS rules.
 * If you’d like to change the background color behind the 3 watches, add this rule:
 *     ```
       .site-main .post {
         background: #E6E6E6;
       }
       ```
   
 *  Thread Starter [OB](https://wordpress.org/support/users/reburton3941/)
 * (@reburton3941)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844530)
 * Hi,
    As I disclosed in my initial post “I have a child theme. I have no experience
   changing the css file, but I am eager to learn.”
 * Evidently this is my first opportunity to learn. I tried to insert this code 
   in my fifteen-child style,css and nothing changed. I’m sure it must be something
   I’m doing wrong, but what?
 * I opened the Appearance menu > Editor. Then after the line /* =Theme customization
   starts here
    ————————————————————– */ I pasted the code #primary-main .main-article{
   background: #E6E6E6; border: 10px solid #E6E6E6; outline: 1px solid #E6E6E6; }
   I then Updated the file and visited the website but nothing changed. Just to 
   be sure I walked through the steps again to no avail. I tried emptying all caches
   and moving the code inside of the ending notation, but nothing seems to work.
   I am stumped. What am I doing wrong? Again, my website is [http://www.bestmenswatchesreviews.com](http://www.bestmenswatchesreviews.com)
 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844531)
 * Just applied the code above using firebug and it worked.
 * Here’s a screenshot of how the background of each product image changes:
    [http://antonietta-designs.net63.net/imagebg.jpg](http://antonietta-designs.net63.net/imagebg.jpg)
 * Your code seems correct, and there’s nothing that I can spot from where I stand.
   Try adding some random CSS rule just to see if it gets applied, something like
 *     ```
       html, body {
        background-color: red;
       }
       ```
   
 *  Thread Starter [OB](https://wordpress.org/support/users/reburton3941/)
 * (@reburton3941)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844547)
 * Hi,
    Thanks for your help! I tried your code and nothing changed. So it must 
   definitely be something I am doing wrong.
 * To recap: I have a child theme. I know very little. Iam adding the code at the
   end of the child theme’s style.css file. I’ll show you the whole file.`/*
    Theme
   Name: Fifteen Child Theme URI: [http://www.bestmenswatchesreviews.com/wp-content/themes//fifteen-child/](http://www.bestmenswatchesreviews.com/wp-content/themes//fifteen-child/)
   Description: Fifteen Child Theme Author: OB Burton Author URI: [http://www.bestmenswatchesreviews.com](http://www.bestmenswatchesreviews.com)
   Template: fifteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar,
   responsive-layout, accessibility-ready Text Domain: fifteen-child */
 * [@import](https://wordpress.org/support/users/import/) url(“../fifteen/style.
   css”);
 * /* =Theme customization starts here
    ————————————————————– */
 * #primary-main .main-article {
    background: #E6E6E6; border: 10px solid #E6E6E6;
   outline: 1px solid #E6E6E6; }
 * .posted-on {
    display: none; } html, body { background-color: red; } I hope that
   helps you see my error.
 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844560)
 * I’ll try to replicate the issue on my local server and get back to you.
 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844563)
 * Hi reburton,
 * There’s nothing wrong with your code or the child theme.
 * It looks like the CSS rules in style.css in the child theme are being overwritten
   by CSS rules that are in css/skins/default.css in the parent theme. However, 
   you can do one of two things. Either add !important at the end of each rule in
   the child theme styles.css, like this.
 *     ```
       #primary-main .main-article {
       background: #E6E6E6 !important;
       border: 10px solid #E6E6E6 !important;
       outline: 1px solid #E6E6E6 !important;
       }
       ```
   
 * Or you need to be even more specific in the style declaration, like this:
 *     ```
       #primary-main .site-main .main-article {
       background: #E6E6E6;
       border: 10px solid #E6E6E6;
       outline: 1px solid #E6E6E6;
       }
       ```
   
 * Pick one of the above methods and it should work. I recommend the second, but
   it’s up to you.
 * Finally, if you need to change the backdrop to all of the products, the problem
   above doesn’t arise because default.css in the parent theme doesn’t have any 
   background styles for that element. Therefore, just add
 *     ```
       #primary-main .site-main {
       background: #E6E6E6;
       }
       ```
   
 * I hope this helps.
 *  Thread Starter [OB](https://wordpress.org/support/users/reburton3941/)
 * (@reburton3941)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844570)
 * Hi,
    I’m sorry to say it didn’t make any difference. I don’t mean to be a pain,
   it’s just in my nature.:) I have tried everything suggested in this post and 
   nothing seems to do the job. I’m going to show you my style.css in my child theme
   one more time. Please take a look at the way I am applying the code and also 
   please make sure I didn’t make any mistakes in the way I modified the WP example
   for the style.css file. By the way, the snippet above the last suggestion works
   just fine at removing the date and clock icon. Here’s the file: /* Theme Name:
   Fifteen Child Theme URI: [http://www.bestmenswatchesreviews.com/wp-content/themes//fifteen-child/](http://www.bestmenswatchesreviews.com/wp-content/themes//fifteen-child/)
   Description: Fifteen Child Theme Author: OB Burton Author URI: [http://www.bestmenswatchesreviews.com](http://www.bestmenswatchesreviews.com)
   Template: fifteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar,
   responsive-layout, accessibility-ready Text Domain: fifteen-child */
 * [@import](https://wordpress.org/support/users/import/) url(“../fifteen/style.
   css”);
 * /* =Theme customization starts here
    ————————————————————– */ .posted-on { display:
   none; }
 * #primary-main .site-main {
    background: #E6E6E6; } Thanks for your help.
 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844573)
 * Hi, you’re not a pain and debugging code is a process that requires patience 
   and testing, so be prepared.
 * I replicated your issue on my computer in the only way I could: I downloaded 
   a copy of the fifteen theme to my local server and created a child theme by copying
   and pasting your style.css comment snippet above, but added the css rules I showed
   in my previous post. By applying any of the two methods I suggested in the last
   post (which I can’t see in your CSS above), I achieved the desired result. If
   you have applied either one of my CSS rules but didn’t get to change the background
   color, there must be something else that’s interfering.
 * Here’s a link to a zip file with both fifteen and fifteen child theme as I tested
   on my computer:
 * [http://antonietta-designs.net63.net/forumfifteen.zip](http://antonietta-designs.net63.net/forumfifteen.zip)
 * I added a yellow background color, simply because it highlights the change, but
   obviously you’ll need to replace it with your own color choice. Apart from this,
   the child theme uses the same child theme comment as yours and my CSS declaration
   as it appears in the last post. On my machine I see a yellow border and a yellow
   background on the hover effect. If you unzip the file and place its contents (
   fifteen and fifteen-child) in your WordPress installation and, after activating
   the child theme, see a different result, I would be very surprised.
 * I hope it goes better this time.
 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844574)
 * I also added some code to make the entire backdrop to the products yellow (again,
   just for highlighting purposes). Here’s the final CSS (that you’ll find in the
   download):
 *     ```
       .posted-on {
       display: none;
       }
   
       /* these new rules make all background yellow  */
       #content,
       .site-content .container,
       #primary-main .site-main {
       	background: yellow;
       }
   
       #content {
       	padding: 0 !important;
       }
   
       #primary-main .site-main .main-article {
       background: yellow;
       border: 10px solid yellow;
       outline: 1px solid yellow;
       }
       ```
   
 * It works on my end, let’s keep fingers crossed that it also works on your end.
 *  Thread Starter [OB](https://wordpress.org/support/users/reburton3941/)
 * (@reburton3941)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844579)
 * Yeah! Success! I had to use a custom CSS file using the Custom CSS Manager but
   it now works! **Thanks ever-so-much for all your help!**
 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844586)
 * That’s great, you’re welcome!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Changing the background on Posts’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/fifteen/2.1.9/screenshot.png)
 * Fifteen
 * [Support Threads](https://wordpress.org/support/theme/fifteen/)
 * [Active Topics](https://wordpress.org/support/theme/fifteen/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/fifteen/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/fifteen/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * Last activity: [12 years ago](https://wordpress.org/support/topic/changing-the-background-on-posts/#post-4844586)
 * Status: resolved