Changing the background on Posts

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;
}

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 https://www.bestmenswatchesreviews.com

Just applied the code above using firebug and it worked.

Here’s a screenshot of how the background of each product image changes:
https://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;
}

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: https://www.bestmenswatchesreviews.com/wp-content/themes//fifteen-child/
Description: Fifteen Child Theme
Author: OB Burton
Author URI: https://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 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.

I’ll try to replicate the issue on my local server and get back to you.

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.

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: https://www.bestmenswatchesreviews.com/wp-content/themes//fifteen-child/
Description: Fifteen Child Theme
Author: OB Burton
Author URI: https://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 url(“../fifteen/style.css”);

/* =Theme customization starts here
————————————————————– */
.posted-on {
display: none;
}

#primary-main .site-main {
background: #E6E6E6;
}
Thanks for your help.

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:

https://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.

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.

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!

That’s great, you’re welcome!