Control background color with child theme

  • Resolved stephennelson384

    (@stephennelson384)


    6 years, 8 months ago

    I have some pages that I built using Page Builder. When I view them as single pages, I have no problem seeing the background color that I selected in Page Builder for the row or object.

    However, when I choose the same page for my Front page, the background color is always white.

    I suspect that somewhere in style.css the content section for the Front page is broadly assigned white, which is overwriting the colors selected on the page.

    I’d like to stop this behavior so that my pages have the same background colors on the front page as on their single pages.

    Thanks in advance!

    note:

    I’m using a child theme. I’ve added some stuff in Additional CSS (both permanently and temporarily for troubleshooting) but my problem persists even if I remove it all. Additionally, the problem exists in the stock parent theme as well.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your hexadecimal colour is wrong:

    
.site-content-contain {
    background-color: #44444;
    position: relative;
}

    It needs to either be 3 characters or 6.

    • This reply was modified 6 years, 8 months ago by Andrew Nevins.
    Thread Starter stephennelson384

    (@stephennelson384)

    Thanks for helping me with this Andrew!

    I’ve cleaned up the bad background color (specifically I deleted that line from my Custom CSS).

    Unfortunately, my issue persists.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh you don’t need to delete it, you just need to adjust it to the colour you want.

    Thread Starter stephennelson384

    (@stephennelson384)

    I can set the background color of the page, that isn’t my issue.

    My issue is that background colors that I assign in Page Builder for specific rows or objects do not work on the Front Page. They all take on the color that has been set for the background, which obviously isn’t right.

    Background colors that I assign in Page Builder for specific rows or objects work fine on every page except the Front Page.

    So, specifically, I’m trying to stop Front Page from overwriting the other background colors I select.

    Thread Starter stephennelson384

    (@stephennelson384)

    Example: If I make a Text Block and set it’s background color to red, it will be red on all pages except Front Page. On the Front Page, it will be white.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I think you need to contact the plugin support, as you’re not facing a theme problem. The plugin needs to use more specific CSS selectors. There’s no solution I can give you other than to hack the theme and I won’t recommend that because it is bad advice.

    • This reply was modified 6 years, 8 months ago by Andrew Nevins.
    Thread Starter stephennelson384

    (@stephennelson384)

    Thanks again for helping me Andrew.

    Here is an example page to illustrate my issue: https://gush.am/farm/

    As you can see, all the background colors behave properly on this page.

    But when I select that page for Section 1 of the Front Page, all the background colors turn back to white, except if I target each element individually by adding a custom class in Page Builder then referencing that class in Custom Css. You can see this in action on the home page: gush.am

    It seems like Front Page is doing something different with background colors than regular pages. Is there any way to give Front Page the same background color properties as regular pages?

    I am able to accomplish my goals using custom css, but obviously it is onerous to have to create redundant classes and custom css to set backgrounds for each element, especially when I have no trouble setting backgrounds for normal pages.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If I understand your problem correctly, your plugin’s background colours do not work on the different sections of the Homepage. It works if you use Custom CSS, but it does not from an option of your plugin.

    The page you’ve made where the background colours do work is very different to what I recognise as the Twenty Seventeen theme: https://gush.am/farm/

    I don’t know why this background colour feature of your plugin works there and not on the Homepage, and this isn’t something I can know because I don’t know your plugin.

    For instance, your Farm page where the background works contains a piece of CSS added into the <head> section of that page:

    
.vc_custom_1521754818228 {
    background-color: #dd3333 !important;
}

    On your Homepage however that piece of CSS is missing. How, I won’t know because knowing that would require me to know the plugin.

    You need to contact the plugin author for support. If they do not support their product, you should consider looking for an alternative because we don’t support commercial plugins here. An alternative to that is to hire someone from places like https://jobs.wordpress.net/ or https://jetpack.pro/ , but not accept any hire offers posted to these forums.

    Thread Starter stephennelson384

    (@stephennelson384)

    For anyone else finding this thread-

    WPBakery’s Page Builder is currently (spring 2018) not compatible with WordPress’s default theme, Twenty Seventeen

    The reason is because this plugin adds required CSS to pages based on their page ID. Because of that, a page or post that is displayed somewhere other than its home (such as the on Front Page in Twenty Seventeen) will not get the CSS.

    From WPBakery: “We are planning to enhance the design option algorithm in future, so that rendering in such cases can be supported.”

    Meanwhile, you can add a CSS id to any Page Builder element, then style that id using Custom CSS.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Control background color with child theme’ is closed to new replies.