Problem with classes and "cookie warning"

**rhdpre07** · 21 August 2024, 10:28 AM

Problem with classes and "cookie warning"

I don't know html and I can't seem to change the color of the text that I want to make white...

With the browser inspector I can change everything...but not the text and I don't know how to change the css file or how to add a class for that text...can anyone help me?

Thanks a million

https://www.neoclick.es/Detectados/index.htm

estilos.css

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
background: #f2f2f2;
font-family: 'Montserrat', sans-serif;
}

p {
margin-bottom: 20px;
line-height: 150%;
}

main {
margin: 20px auto;
max-width: 1000px;
background: #fff;
min-height: 80vh;
padding: 20px;
border-radius: 10px;
}

.aviso-cookies {
display: none;
background: #ffffff;
padding: 40px;
width: calc(100% - 40px);
max-width: 500px;
line-height: 150%;
border-radius: 10px;
position: fixed;
bottom: 20px;
left: 20px;
z-index: 100;
padding-top: 60px;
box-shadow: 0px 2px 20px 10px rgba(222,222,222,.25);
text-align: center;
}

.aviso-cookies.activo {
display: block;
}

.aviso-cookies .galleta {
max-width: 100px;
position: absolute;
top: 10px;
left: calc(50% - 50px);
}

.aviso-cookies .titulo,
.aviso-cookies .parrafo {
margin-bottom: 15px;
}

.aviso-cookies .boton {
width: 100%;
background: #ca082f;
border: none;
color: #fff;
font-family: 'Montserrat', sans-serif;
text-align: center;
padding: 15px 20px;
font-weight: 700;
cursor: pointer;
transition: .3s ease all;
border-radius: 5px;
margin-bottom: 15px;
font-size: 14px;
}

.aviso-cookies .boton:hover {
background: #0d9712;
}

.aviso-cookies .enlace {
color: #4DBFFF;
text-decoration: none;
font-size: 14px;
}

.aviso-cookies .enlace:hover {
text-decoration: underline;
}

.fondo-aviso-cookies {
display: none;
background: rgba(0,0,0,.20);
position: fixed;
z-index: 99;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}

.fondo-aviso-cookies.activo {
display: block;
}

and although it works fine (I think) I get an error on line 14 in the js

const botonAceptarCookies = document.getElementById('btn-aceptar-cookies');
const avisoCookies = document.getElementById('aviso-cookies');
const fondoAvisoCookies = document.getElementById('fondo-aviso-cookies');

dataLayer = [];

if(!localStorage.getItem('cookies-aceptadas')){
avisoCookies.classList.add('activo');
fondoAvisoCookies.classList.add('activo');
} else {
dataLayer.push({'event': 'cookies-aceptadas'});
}

botonAceptarCookies.addEventListener('click', () => {
avisoCookies.classList.remove('activo');
fondoAvisoCookies.classList.remove('activo');

localStorage.setItem('cookies-aceptadas', true);

dataLayer.push({'event': 'cookies-aceptadas'});
});

**Acorn** · 21 August 2024, 12:58 PM

The only place the font color is not White is:
.aviso-cookies .enlace {
color: #4DBFFF;

Change this to color: #FFF;

For your JS to work, the Event Listener has to find the button with an ID of btn-aceptar-cookies.
If your JS code is embedded in the <head> Tag, the button will not have been created by then.
Try moving the JS Code to the Website Body rather than add it in as an in-line blob (<script src="js/aviso-cookies.js"></script>).

Ensure that the HTML elements with the IDs btn-aceptar-cookies, aviso-cookies, and fondo-aviso-cookies all exist in your HTML.
The localStorage API is supported in most modern browsers, but you may want to consider fallbacks for older browsers if necessary.
The value stored in localStorage is a string, so you might want to store it as 'true' instead of true for consistency, although it will work as is.

Overall, the code is structured correctly and should function as expected for managing cookie consent.

Your design is using a Cookie Notice that is a third-party product. You really need to go back to them if you have integration problems as it is too specific for a normal Xara user to tackle.

Acorn

Thread: Problem with classes and "cookie warning"

Thread Tools

Display

Problem with classes and "cookie warning"

Re: Problem with classes and "cookie warning"

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions