Okay
  Public Ticket #2571819
Section color
Closed

Comments

  • Undercover Design started the conversation

    Hi, I'd like create a new default section with a dark grey background-color, white font-color and some other custom settings like margin etc.
    The default section options only allow "White" and "Light Grey" for background.

    I added some lines in the custom CSS:

    .section#leistungen{
        background-color: #1e1e1e;
        color: white;

    }

    But it doesn't work.
    Is it possible to adjust it?


  •  1,973
    Support replied

    I Think this would work if you include the page as a section in the one pager but it looks like you want it as a separate page:

    https://www.undercoverdesign.de/leistungen/

    Can you try setting the background using Elementor?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Undercover Design replied

    Yes, I want this as a section in a one pager. I added this section temporarily to check if it works but the bg-color stays the same. And no, editing with Elementor didn't help either.

  •  1,973
    Support replied

    Hi,

    Can you add the section to the one pager? So I can try to get the CSS right?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Undercover Design replied

    Ok, I did it. You can find the section under the menu point "LEISTUNGEN".

  •  1,973
    Support replied

    Hello,

    because the elementor defines another <section> element inside you need to add two CSS statements in customizer -> additional CSS

    #leistungen {
        background-color: #your_hex_color_here !important;
    }
    #leistungen section {
        background-color: red !important;
    }

    https://prnt.sc/v2u2mx


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Undercover Design replied

    Thank you. That helped a lot.

    Now I can change the background color.

  • Undercover Design replied

    Hello Clapat-Support-Team, 

    I still have a section problem. When I open my page individually, everything looks as it should. But as soon as I include this as a section, all settings (e.g. margin) are ignored.

    Single page: https://www.undercoverdesign.de/leistungen

    As a section: https://www.undercoverdesign.de/#leistungen

  • Undercover Design replied

    Any suggestions?

  •  1,973
    Support replied

    Hello,

    the problem I think is that WPBakery is using the header (and the footer) of the page to operate with its elements such CSS styles and when a page section is added to the one pager it just inserts the page content container.

    So you should add the inline styles as custom css

    Let's take this page as an example

    https://www.undercoverdesign.de/leistungen/

    If you open the page source you will see them under <style type="text/css" data-type="vc_shortcodes-custom-css">

    https://prnt.sc/10sf3ol

    So in this case the styles to add are:

    .vc_custom_1615801686167{background-color: #1e1e1e !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}.vc_custom_1615903368307{background-color: #1e1e1e !important;}.vc_custom_1615801936534{padding-right: 10% !important;padding-left: 10% !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}.vc_custom_1615906154815{padding-right: 15% !important;padding-left: 15% !important;}.vc_custom_1615900173508{margin-bottom: 0px !important;padding-bottom: 1em !important;padding-left: 10px !important;}.vc_custom_1615900929295{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 5em !important;padding-left: 0px !important;}.vc_custom_1615901034540{margin-bottom: 0px !important;padding-bottom: 1em !important;padding-left: 10px !important;}.vc_custom_1615900939135{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 5em !important;padding-left: 0px !important;}.vc_custom_1615901048420{margin-bottom: 0px !important;padding-bottom: 1em !important;padding-left: 10px !important;}.vc_custom_1615900665713{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}.vc_custom_1615805103858{margin-right: 0px !important;border-right-width: 0px !important;padding-right: 0px !important;}.vc_custom_1615901911073{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;background-color: #1e1e1e !important;}

    Once again copied from the page source


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Undercover Design replied

    Thanks, that helped somehow. That means, every time I make a change to the page, I have to copy the source code out and paste it into the overwrite CSS? Sounds pretty complicated and time-consuming.

    Could it be a general problem with the theme that custom pages are not interpreted correctly when they are added as a section? I already had this problem, which cost me a lot of time.

  •  1,973
    Support replied

    This is the unfortunate way WPBakery works - it adds inline styles in the page header(<head>) for its elements but the header for a page section cannot be added in the one pager.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Undercover Design replied

    That surprises me, since the theme expressly recommends WP Bakery and even provides the user with a license. Hasn't anyone tested that before?

  •  1,973
    Support replied

    Hi,

    It has been tested, we mapped all the shortcodes we could to WPBakery elements , individual pages don't have any problems, you have to do this workaround for page sections.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy