Soporte » Diseño – Temas y plantillas » Cambiar color enlace html/css

  • Resuelto sigmibru

    (@sigmibru)


    Buenas tardes,

    Estoy usando el tema OceanWP y desde el menú «apariencia» del tema he configurado dos colores generales para mis enlaces (el color del enlace y el color del enlace en hover).

    El problema es que los enlaces a la política de privacidad no se ven con el color definido en el tema y necesito cambiar el color del enlace y el hover SOLO en este apartado.

    Desde el editor de Elementor he introducido este codigo en html a mi pie de página, pero se me ha cambiado el color de todos los enlaces de la web.

    Alguien sabe que hago mal? No sé html ni css, pero buscando mucho he compuesto esto:

     

    <style>
    a:link {<br />
    color: #ffffff;<br />
    background-color: transparent;<br />
    text-decoration: none;<br />
    }<br />
    a:active {<br />
    color: #ffffff;<br />
    background-color: transparent;<br />
    text-decoration: none;<br />
    }<br />
    a:visited {<br />
    color: #ffffff;<br />
    background-color: transparent;<br />
    text-decoration: none;<br />
    }<br />
    a:hover {<br />
    color: #c8c5ad;<br />
    background-color: transparent;<br />
    text-decoration: none;<br />
    }<br />
    </style>

     
    <p style=»text-align: right;»><b>Política de privacidad |
    Política de cookies |
    Aviso legal</b></p>
     

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Moderador jose64

    (@jose64)

    Hola.

    El código que muestras, al no ser específico para una clase, se aplica a toda la web. Tienes que definir una clase específica para el elemento que quieres cambiar y aplicar el código para esa clase específica. por lo que entiendo estás creando un bloque de HTML, deberías asignar una clase al párrafo de los avisos y usar esa clase para definir los estilos específicos, algo del estilo:

    <p class="legal"><b><a href="http://localhost/wordpress/politica-de-privacidad/" target="_blank" rel="noopener">Política de privacidad</a> |
    <a href="http://localhost/wordpress/politica-de-cookies/" target="_blank" rel="noopener">Política de cookies</a> |
    <a href="http://localhost/wordpress/aviso-legal/" target="_blank" rel="noopener">Aviso legal</a></p>

    Y en el CSS personalizdo del tema crear la clase legal con los atributos, así solo se aplican donde los invoques, no en toda la web.

    Coméntanos si tienes alguna duda y, por favor, recuerda marcar el debate como resuelto cuando así sea, de esta forma nos ayudas a mantener el foro al día.

    Iniciador del debate sigmibru

    (@sigmibru)

    Hola @jose64 , muchas gracias por contestar.
    He intentado hacer lo que me dices, pero creo que algo hago mal…

    En el editor de texto de Elementor le pongo este codigo html:

    <p class="legal"><a href="http://localhost/wordpress/politica-de-privacidad/">Política de privacidad</a> | <a href="http://localhost/wordpress/politica-de-cookies/">Política de cookies</a> | <a href="http://localhost/wordpress/aviso-legal/">Aviso legal</a></p>

    I luego, en el apartado «CSS personalizado» de mi tema, le pongo esto:

    .legal {
    	a:link {
    color: #ffffff;
    	}
    	a:active {
    color: #ffffff;
    		}
    	a:visited {
    color: #ffffff;
    	}	
    	a:hover {
    color: #c8c5ad;
    		}
    	}

    Pero no funciona… ¿Sabes qué estoy haciendo mal?

    Muchas gracias por tu ayuda

    Moderador jose64

    (@jose64)

    Hola.

    El código no está bien, prueba esto:

    .legal a:link {
    	color: #ffffff;
    		}
    
    .legal a:active {
    	color: #ffffff;
    		}
    
    .legal a:visited {
    	color: #ffffff;
    		}	
    
    .legal a:hover {
    	color: #c8c5ad;
    		}

    Ente las llaves deben ir los valores de los atributos

    Iniciador del debate sigmibru

    (@sigmibru)

    Hola @jose64 ,

    Muchas gracias! Ha funcionado perfectamente.

    Saludos

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • El debate ‘Cambiar color enlace html/css’ está cerrado a nuevas respuestas.