Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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 :)

    #1434025

    Hey 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:
    Enfold_Support_4685.jpeg
    tablet:
    Enfold_Support_4687.jpeg
    mobile:
    Enfold_Support_4689.jpeg
    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,
    Mike

    #1435028

    Hi,
    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

    #1435044

    Hi,
    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:
    Enfold_Support_4774.jpeg

    #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,
    Mike

    #1435069

    That’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?

    #1435143

    Hi,
    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,
    Mike

    #1435194

    Hi,
    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.
    #1435235

    Hi,
    It looks like you have both the old & new css added:
    Enfold_Support_4784.jpeg
    please remove the old css, and clear your browser cache and check again.

    Best regards,
    Mike

    #1435248

    As 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.
    #1435282

    Hi,
    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Full transperent Cookie-Banner’ is closed to new replies.