Support » Plugin: Smart Slider 3 » Set slide background-color to transparent with CSS

  • Resolved sayhellostranger

    (@sayhellostranger)


    Hello thanks for your really extensive wonderful slider application!
    My question: Is there a way to set the background color of a slide with CSS in conjunction with its own CSS class (eg. .all-my-ssl-slide-bg set in the configuration of the content-sheet) to transparent?

    With

    .all-my-ssl-slide-bg {
        background-color: transparent !important;
    }

    i can set a NEW background color, but not set transparent.

    I’ve already tried a few things with the Web Developer and in your style.css, but I just can not find the right css selector or path.

    I’m grateful for any hint.
    Thank you in advance.

    Greetings Mathes

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Ramona (from Nextend)

    (@nextend_ramona)

    Hi @sayhellostranger

    You can use the n2-ss-slide-background class to change the background color of each slide.

    If there’s already a background color set for the slide, they should have a “.n2-ss-slide-background-color” div which you can use.

    You can actually change all background color to be transparent without having to do custom coding at the Slide settings -> Background tab -> Color and reducing the opacity of the color: https://imgur.com/a/4muullM

    Hej Ramona,
    Thanks for your super fast response. Maybe I did not get it right.
    I’ve entered ‘.n2-ss-slide-background-color’ as a CSS class under Content / Settings. With

    div.n2-ss-slide-background-color {
         background-color: # 000000! important;
    }

    I can change BG-Color. Thats work fine! But with

    div.n2-ss-slide-background-color {
         background-color: transparent! important;
    }

    does not change the currently set BG-Color to transparent.
    Background 😉 of the whole thing is that I have a lot of slides with white Textfonts, which should have a transparent background. The text is then very difficult to recognize when editing. So I set all to #666666.

    Maybe there is a different approach. Thank you so much for your help.

    Mathes

    Sorry, the code above is wrong, of course. It must of course be that way:

    div.n2-ss-slide-background-color {
         background-color: transparent !important;
    }

    Sorry

    Plugin Support Ramona (from Nextend)

    (@nextend_ramona)

    Hi @sayhellostranger

    Yes, the problem is with the CSS properties, they should be like this:

    div.n2-ss-slide-background-color {
        background-color: #000000 !important;
    }
    div.n2-ss-slide-background-color {
        background-color: transparent !important;
    }

    to make them valid.

    Hey Ramona,
    The CSS code was wrong only in my reply. Sorry for confusing you.
    As I said, assigning the Slide a new solid BG-Color is not a problem.
    But the thing with the transparency, like

    div.n2-ss-slide-background-color {
        background-color: transparent !important;
    }

    does not work for me. The BG is owned by #666666.
    I just tried to look what happend, also rgba() like that:

    div.n2-ss-slide-background-color {
         background-color: rgba(255, 255, 255, 0.7) !important;
    }

    but the new RGBA-Color just covers the gray background (he is getting lighter) and does not replace it.

    Maybe he can only handle #hex statements via CSS?

    Is probably also a rather unusual application from me. Sorry for the trouble.
    Another (last) idea?

    Plugin Support Ramona (from Nextend)

    (@nextend_ramona)

    Hi @sayhellostranger

    No, the background-color: transparent should work fine, I just checked it, it works for me just fine, so it’ll be something else.

    Could you please publish the slider in question to a sample page and send me a link to the page? If you prefer to do this privately, please submit a support ticket: https://smartslider3.com/contact-us/
    and refer to this topic.

    Hej Ramona,

    the Supportmail is out and the Website now public.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Set slide background-color to transparent with CSS’ is closed to new replies.