background color on specific page

BB Theme
1

hello, I am using this code to change the background color on a specific page and it isn’t changing it. It is placed in the Editor for the BB Child theme. Is the code correct?

/* make catalog page different background than rest of site */
.page-id-3210 .fl-page-content {
background: #2A2A2A !important;
}

thanks, Chris

2

[Content Hidden]

3

Hey Chris,

That is correct. The problem is, you’ve another style targeting the same element on line 142 of your stylesheet which is also set to important. You’ll want to remove that first before your new one works.

Ben

4

[Content Hidden]

5

Hey Chris,

Yep, that is correct! There is also an area for CSS in the customizer if that is the one conflicting.

Best,
Billy

6

[Content Hidden]

7

Hey Chris,

I just had another look at your site and it seems that styling will have no effect on it. What are you trying to change exactly? The background images you have on that page are set per BB row so you may want to check into that first. :slight_smile:

Ben

8

[Content Hidden]

9

Hey Chris,

The Catalog page’s background is white from after the header on my end. Is this the right page I should be looking at? Try using the CSS selector body.page-id-3210 .fl-page-content and see if it works.

Ben

10

this is the css i currently have in the child theme style.css

/* make catalog page different background than rest of site */
.page-id-3210 .fl-page-content {
background: #2A2A2A !important;
}

i doesn’t seem to be working?

11

Hi Chris,

I have investigated your issue regarding the grey solid background color towards to the bottom of your site and this is caused by two things, as far as I can tell.

  1. There is custom CSS you appear to have added via the child themes style.css on line 142 as Ben mentioned earlier. That is targeting the same element.
.fl-page .fl-page-content {
    background-color: #F2F3F7!important;
}

To override this, and only style that page, use the following CSS instead:

.page-id-3210 .fl-page .fl-page-content {
    background: #2A2A2A;
}

As you can see from the code above, I haven’t used the !important declaration, as there should be no need for it. However, you will also need to amend the other CSS and remove the !important declaration there too.

  1. It also appears to be the end of your space image and therefore, the parallax effect can not and is why there is a solid color.

The method in which the Parallax background option works is that, the image should be of a greater height than the row it is being placed in. Otherwise, you end up with the issue you have at the moment, where the row/element is greater in height.

Best,
Danny

12

Hello, I made the changes you suggested above and removed the !Importants and the catalog page background is still the same light color.

Chris

13

Hey Chris,

Are you referring to the Woocommerce product background color? I’m able to see a huge white gap there, just below the background image. Could you try using the CSS snippet below? Let us know if it’s what you’re looking for.

.fl-row-bg-parallax.fl-row-bg-overlay.fl-node-5684731230dcd .fl-row-content-wrap {
    background-color:#000;
}

Thanks!

KC