Full transperent Cookie-Banner

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:

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

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:

#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

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

Hi,
It looks like you have both the old & new css added:

please remove the old css, and clear your browser cache and check again.

Best regards,
Mike

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