Support » Plugin: Slider by Soliloquy - Responsive Image Slider for WordPress » Button CSS class not working

  • Resolved OC2PS

    (@sooskriszta)


    Hello! I am using the slider in a homepage widget of Genesis theme.

    In the “Caption”, I am including a couple of links. And those links are assigned CSS classes of the various buttons in the theme.

    However, on the frontend, these “buttons” do not appear as intended. Please advise.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi @sooskriszta 🙂

    It looks like the CSS isn’t quite right.

    Can you send me to a page showing me what you want each button to look like (as example of each button styling) and I’d be happy to help you determine the correct CSS.

    Thanks

    OC2PS

    (@sooskriszta)

    https://sooskrisztina.hu – slider on top of page.

    Buttons should look like on this page: https://my.studiopress.com/themes/corporate/#demo-full

    Except, different color (orange) as on: https://sooskrisztina.hu/kapcsolat/

    • This reply was modified 10 months, 2 weeks ago by OC2PS.

    Hi 🙂

    Thank you! So you’re CSS needs to be changed to this:

    a.button.white.outline {
        border-radius: 9em;
        color: #ffffff;
        cursor: pointer;
        font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 1.6rem;
        display: inline-block;
        width: auto;
        line-height: 3em;
        height: 3em;
        padding: 0 3.333333em;
        box-shadow: 0 0.25rem 2rem -0.5rem rgba(255, 255, 255, 0);
        background: #d93;
        background: -moz-linear-gradient(-45deg,#d93 0,#d33 100%);
        background: -webkit-linear-gradient(-45deg,#d93 0,#d33 100%);
        background: linear-gradient(135deg,#d93 0,#d33 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d93',endColorstr='#d33',GradientType=1);
    }

    Then the 1 button would look like this:

    https://cl.ly/143e9957a67d

    As for the 2nd button, it’s not picking up any styling as it doesn’t have the same CSS class names.

    OC2PS

    (@sooskriszta)

    Where should I put the CSS? The theme already has this CSS…that’s how it shows up okay on the contact page…

    OC2PS

    (@sooskriszta)

    To theme’s custom CSS, I added:

    .button.white.outline, button.white.outline, .wp-block-button a.white.outline {
        color: #ffffff;
        background: transparent;
        box-shadow: inset 0 0 0 2px #ffffff;
    }
    
    .soliloquy-caption-inside .button, .soliloquy-caption-inside button, .soliloquy-caption-inside .wp-block-button a {
        border: 0;
        border-radius: 9rem;
        color: #ffffff;
        cursor: pointer;
        font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 16px;
        font-size: 1.6rem;
        text-decoration: none;
        white-space: nowrap;
        display: inline-block;
        width: auto;
        line-height: 3em;
        height: 3em;
        padding: 0 3.333333em;
        box-shadow: 0 0.25rem 2rem -0.5rem rgba(255, 255, 255, 0);
        background: #d93;
        background: -moz-linear-gradient(-45deg,#d93 0,#d33 100%);
        background: -webkit-linear-gradient(-45deg,#d93 0,#d33 100%);
        background: linear-gradient(135deg,#d93 0,#d33 100%);
    }

    And is it showing as expected for you? The only place I would’ve suggested is the Appearance >> Customize >> Additional CSS

    OC2PS

    (@sooskriszta)

    Yes, thanks, I added to Appearance >> Customize >> Additional CSS

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Button CSS class not working’ is closed to new replies.