1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Custom Style for button not showing on live site

Discussion in 'Free Divi Community Forum' started by mathivh, Dec 10, 2019.

  1. mathivh

    mathivh New Member

    I've created a custom style for a specific button my site (https://factumvastgoed.be, the button near the bottom of the homepage with the text "Toon alle projecten"). The preview shows the button as I want it. However when I save the page and view it live (even after purging all caches server- and clientside), the hover layout is different from the preview.
    The preview layout (on hover): button-hover.png
    The live site layout (on hover): button-hover-live.png

    When I check the source code of the site: it gives
    PHP:
    body .et_pb_button:hover, .woocommerce a.button.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce #content input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce a.button:hover, .woocommerce-page a.button:hover, .woocommerce button.button:hover, .woocommerce-page button.button:hover, .woocommerce input.button:hover, .woocommerce-page input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-page #respond input#submit:hover, .woocommerce #content input.button:hover, .woocommerce-page #content input.button:hover {
            background: #ce401c!important;
    }
    The body .et_pb_button:hover part is the only part that is in full black (and thus relevant for the button I assume)

    I believe this comes from the Divi theme customizer button setting. It however adds a
    Code:
    Log In or Sign Up to view this code.
    tag, which according to me is overriding the Custom Style for the specific button.

    I tried to fix this by enabling Output Styles Inline, to no avail.

    Can anyone please enlighten me on how to get the Custom Styles Layout for the button on hover to work?

    Divi Theme 3.19.15
    Wordpress 5.3
     
    #1 mathivh, Dec 10, 2019
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  2. Problemizer.com

    Problemizer.com Divi Expert

    Hello,

    This is the code you wrote somewhere and I just added !important to the background color and it worked.
    body #page-container .et_pb_button_0:hover {
    background-color: rgba(0,0,0,0) !important;
    }

    If you can find this line of code, just add !important, if not, then add this CSS above to the Theme Options -> Custom CSS and it should work.

    Kind regards,
    Problemizer.com
     
    #2 Problemizer.com, Dec 10, 2019
  3. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to set the below & see if it works:

    rgba(255,255,255,0)

    upload_2019-12-11_12-47-47.png
     
    #3 Divi.Help, Dec 10, 2019
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  4. mathivh

    mathivh New Member

    Hi,

    Thanks for replying. This isn't really applicable since I use the builder interface to design the button, so there's no way to add !important.
    builder.png
     
    #4 mathivh, Dec 10, 2019
  5. mathivh

    mathivh New Member

    This does seem to have resolved the background changing issue. But this still doesn't show the added symbol on hover as it does on the preview: upload_2019-12-11_9-0-22.png .
    Also this would mean that I can't use any other background color on hover than the theme's default and rgba(255,255,255,0)?

    Thanks!
     
    #5 mathivh, Dec 11, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Basically, you just need to set your button background hover color & it will override the Theme Customizer default value.

    As for the button icon, you can set it in the button module settings as well:

    upload_2019-12-11_22-42-35.png
     
    #6 Divi.Help, Dec 11, 2019
(You must log in or sign up to post here.)