-
AuthorPosts
-
February 10, 2024 at 12:48 pm #1433901
Hi,
is there a way to get this done:
I would like to have a big cookie-banner-popup in the center with full color and a background with light transparency, so you can see the actual website through it. An overlay.
It shoud be responsive to work on mobile, tablet and desktop.Best regards :)
February 11, 2024 at 8:47 pm #1434025Hey northorie,
Try starting with the theme options to have the cookie bar at the bottom of the page, and then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#top .avia-cookie-consent.avia-cookiemessage-bottom { bottom: unset; left: unset; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.3); } #top .avia-cookie-consent .avia-cookie-consent-button { display: block; width: 60%; margin: 10px auto; } #top .avia-cookie-consent p { display: block; padding-bottom: 20px; } #top .avia-cookie-consent-button { border-radius: 50px; } @media only screen and (max-width: 767px) { #top .avia-cookie-consent.avia-cookiemessage-bottom { width: 80%; } } @media only screen and (min-width: 768px) { #top .avia-cookie-consent.avia-cookiemessage-bottom { width: 25%; } }
the desktop results:
tablet:
mobile:
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.Best regards,
MikeFebruary 21, 2024 at 1:31 pm #1435028Hi,
so sorry for my late reply. I actually wrote one last week, but it seems it wasn’t saved correctly.Thanks for your effort. That’s actually quite good already. Is Something like in the picture attached also possible? (picture on private content)
Best regards
February 21, 2024 at 5:22 pm #1435044Hi,
Your image looks like a subscribe popup form, I assume you are referring to the slightly transparent background overlay and that the box is white, with a dashed border, the following adjustments will produce this:
#top .avia-cookie-consent-wrap[aria-hidden="false"] { background-color: rgba(0, 0, 0, 0.3); height: 100vh; width: 100vw; top: 0; position: absolute; z-index: 999; } #top .avia-cookie-consent.avia-cookiemessage-bottom { bottom: unset; left: unset; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; color: #000; border: 3px dashed #000; } #top .avia-cookie-consent .avia-cookie-consent-button { display: block; width: 60%; margin: 10px auto; background-color: #e1e1e1; color:#000; } #top .avia-cookie-consent p { display: block; padding-bottom: 20px; } #top .avia-cookie-consent-button { border-radius: 50px; } @media only screen and (max-width: 767px) { #top .avia-cookie-consent.avia-cookiemessage-bottom { width: 80%; } } @media only screen and (min-width: 768px) { #top .avia-cookie-consent.avia-cookiemessage-bottom { width: 25%; } }
Best regards,
MikeFebruary 21, 2024 at 8:08 pm #1435069That’s really good actually :)
Thank you very much.
The only problem is, that the transparent overlay won’t disappear. Do you have a solution for this one?February 22, 2024 at 5:50 pm #1435143Hi,
I adjusted the css above, please remove yours and try the above css again, then clear your browser cache and check.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.Best regards,
MikeFebruary 23, 2024 at 1:03 pm #1435194Hi,
I did, no change. Background is still visible, though the cookie banner disappears.
Link to my site on private data- This reply was modified 10 months ago by northorie.
February 23, 2024 at 5:23 pm #1435235February 23, 2024 at 7:51 pm #1435248As Homer Simpson would say “Duh!”
You’re so right..sorry for that one. It’s perfect! Thank you very much, that helped a lot :)
I’m happy an thread can be closed.Best regards
- This reply was modified 10 months ago by northorie.
February 24, 2024 at 1:03 pm #1435282Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Full transperent Cookie-Banner’ is closed to new replies.