Estilos diferentes para cada página en WordPress

Muchas veces en WordPress nos interesa tener un estilo de menú o logo diferente para cada una de las páginas, o que por ejemplo, el menú de la home sea de diferente color que el resto de páginas.

En éste caso en concreto quería que las letras del menú fueran de un color, en las páginas alternativas, y blancas para la home, ya que la home está diseñada con una imagen que hace de background. A parte quería que el logo no se viera en la páginas de inicio.

Para ello primero hemos de indentificar la id de las páginas que queremos que sean diferentes al resto. Lo podéis hacer de varias formas, las más sencilla es editar la página en concreto y la URL que muestra ya contiene ese id, en mi caso:

midominio.com/wp-admin/post.php?post=40&action=edit&lang=es (la id sería 40)

Lo primero que haremos será hacer que el logo no se vea en la páginas de INICIO, como en mi caso es la página con id 40:

Añadiré la siguiente línea en los CSS de mi web: .page-id-40 #logo {display: none;} en mi caso (platilla del DIVI) la id que identifica el logotipo es esta #logo.

OJO, si la web tiene varios idiomas recordar también nombrar la página de inicio que contiene los otros idiomas, en mi caso:

.page-id-40 #logo, .page-id-346 #logo {display: none;}

Luego si queremos hacer que el color de los enlaces del menú superior también sean de diferente color que los del resto de páginas, podemos usar ésta línea de código CSS, donde identificamos las páginas de inicio y e color que tendrá en menú en ellas:

.page-id-40 #top-menu li a, .page-id-346 #top-menu li a {color: #ffffff;}

Éste sería el aspecto de la página principal, sin logo y con el menú en color blanco:

Y éste el aspecto de las páginas secundarias, con el logo visible y el menú con el texto en color dorado:

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

cinco × 2 =

Empiezapori es agente digitalizador de la ayuda Kit Digital

Somos agente digitalizador de la ayuda Kit Digital. Te ayudamos en la creación de tu sitio web o comercio electrónico y gestionamos tus redes sociales.
Llámanos (93 470 00 37) o rellena el formulario y nos pondremos en contacto contigo. Te ayudamos a gestionar la ayuda.
Para más información y contacto haz clic en el siguiente enlace.

Scroll al inicio