Opacity, transparent, customized css

  • Resolved lisia

    (@lisia)


    4 years, 3 months ago

    Hello!

    Thank you for this great plugin It is working fine even in the free version. I like the adjustments, which can be done.
    But I also would like opacitiy for the background – it is not possible in the setting.
    I tried with customized css:

    .df-container {
background-color: currentColor;
background-color: transparent;}

    I tried:

    .df-container {
background-color: rgba(0, 0, 0, 0.4);}

    It didn’t work.
    Searching around I found your code:

    .df-container {
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

    This one works, but I want just a transparent plane colour.

    It would be great, if you can help me.
    Best regards, lisia

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author DearHive

    (@dearhive)

    4 years, 2 months ago

    Hi,

    Are you trying this on embedded flipbook or popup flipbook.

    Just add !important to force you edit.

    .df-container {
    background-color: transparent !important;
}

    If it’s popup:

    .df-lightbox-wrapper {
    background-color: transparent;
}

.df-lightbox-wrapper .df-container {
    background-color: transparent !important;
}

    In popup a rgba value might be better.

    Best Regards,
    DearHive

    Thread Starter lisia

    (@lisia)

    4 years, 2 months ago

    Thanks a lot. Both codes work fine, when I substitute transparent with a rgba value.
    Great! Tomorrow I have to try an interactive pdf with a video – I’m curious if this works.
    Best regards, lisia

    • This reply was modified 4 years, 2 months ago by lisia.
    Thread Starter lisia

    (@lisia)

    4 years, 2 months ago

    Oh sorry, the code

    .df-lightbox-wrapper {
    background-color: rgba(84, 176, 186, 0.7);
}

    isn’t working for full-sreen-view, only working in the embedded view.

    Is there a solution?
    Best regards, lisia

    Plugin Author DearHive

    (@dearhive)

    4 years, 2 months ago

    Hi,

    Did you add tis too:

    .df-lightbox-wrapper .df-container {
    background-color: transparent !important;
    }

    Please share the link to your page, we will check what’s going on.

    Best Regards,
    DearHive

    Thread Starter lisia

    (@lisia)

    4 years, 2 months ago

    Hello!

    My code in additional css is:

    .df-container {
    background-color: rgba(217, 0, 48, 0.3) !important;
}
.df-lightbox-wrapper {
    background-color: rgba(217, 0, 48, 0.3) !important;
}

.df-lightbox-wrapper .df-container {
    background-color: rgba(217, 0, 48, 0.3) !important;
}

    The site is: https://internettes.at/fotografie/

    The problem is: in full view, there is no background opacity – neither in the embedded mode nor in the thumb mode

    Maybe, there is a solution, but I like dearflip anywhy.
    Best regards, lisia

    • This reply was modified 4 years, 2 months ago by lisia.
    • This reply was modified 4 years, 2 months ago by lisia.
    Plugin Author DearHive

    (@dearhive)

    4 years, 2 months ago

    Hi,

    Fullscreen doesn’t take the page background and displays on top of a black screen.
    A background color with opacity will look darker there:

    .df-container.df-fullscreen {
    background-color: red !important;
}
Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Opacity, transparent, customized css’ is closed to new replies.