Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

WordPress práctico: Creación básica de temas

Organización de los contenidos del header

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
Vamos ahora a aplicar estilos CSS al header para darle su forma final. Aplicaremos estos estilos, utilizando SAAS, para organizar los contenidos del cabecero, para conseguir que se distribuyan correctamente y para que tenga tamaño y fondo.

Transcripción

Voy a darle ahora, un poco de aspecto a este header. Voy a añadir varios estilos, por un lado, aparte del display: flex voy a aplicarle el justify-content para que estos dos elementos siempre salgan con distancia entre ellos, para que haya un margen automático. Por otro lado, otra cosa que quiero también, es que tenga un poco de margen que en la parte inferior no tenga ninguno, vaya pegado, pero, sin embargo, sí que tenga en la parte superior, para separarlo de la imagen que añadiré más adelante, y luego, también en los laterales. Guardar este contenido y va ya organizándome un poco esos elementos. Estos elementos, por cierto, este bloque y este otro bloque que se corresponden con el site-branding y con el site-navigation. Así que, para poder hacer modificaciones sobre ellos, lo más fácil, va a ser añadir los selectores concretos para uno y para otro. Los selecciono y los añado. Ambos van a tener una forma de organizarse dentro del flex exactamente igual, que va a ser como una columna que van a ser con display: flex y que van a tener una alineación vertical colocada al final, solo que voy a añadir todavía un detalle más y es que, lo que es la botonera, lo que es el menú principal quiero que salga alineado a la derecha, así que en el site-navigation voy a añadirle también un align-items para que esté colocado sobre la derecha. Lo voy a guardar y bien, ya sale colocado a la derecha, el otro colocado a la izquierda. De momento, salen, prácticamente, alineados hacia abajo, lo que pasa es que no todos los elementos salen, correctamente, alineados abajo. Si me voy a inspeccionar este elemento me encuentro con que tiene un margen que es el que está influyendo dentro de esta distancia y hace que no quede pegado, y, eso mismo, está ocurriendo, también con el nombre del sitio. Así que, voy a hacer modificaciones también, en los estilos del site-branding. Podría seguir manteniendo la estructura de namespaces, o sea, de herencias de tal manera que podría añadir aquí estilos relacionados con estos dos elementos, o, también, puedo colocarlos fuera, en realidad, no tiene mucha importancia. Al añadirlos vemos que ya me pone el margen con "0", y que, efectivamente, quedan colocados como quería. Este elemento también me da un aspecto diferente al que yo quiero, yo quiero que sea blanco sin más. Puedo, muchos de estos elementos, buscarlos dentro de lo que es la plantilla pero hay otros elementos que no son tan fáciles de encontrar. En este caso, en realidad, sería este site-title, bueno, pues puedo añadir el estilo site-title, si no lo encontrase siempre puedo sacarlo directamente inspeccionando el elemento desde el navegador. Bien, pues, en concreto, voy a tener una etiqueta a, que está aquí metida, y si esa es la que va a afectar al site-title puedo meterlo dentro de él, y aquí vemos cómo, efectivamente, está cambiando correctamente, aunque, también debería de cambiar el aspecto de todos estos enlaces. Bien, pues me iré a la parte de site-navigation, lo guardaré y ya tengo el aspecto, aproximadamente, como lo quiero. Cuando hago rollover sobre elementos que tienen otros elementos debajo me encuentro que tiene el fondo transparente y, prácticamente, no se leen, entonces, aquí debería hacer cambios sobre este menú. Hay muchas veces que nos vamos a encontrar con que tenemos que tomar deciciones un poco especiales, decisiones en las que elegir dónde hacer modificaciones, por ejemplo, en este caso yo tengo elements y dentro de elements tengo lists para trabajar con listas de elementos. Por ejemplo, podría trabajar entonces, con la lista de elementos que se está creando desde ese lists, o en navegación, todavía mucho más lógico, podría irme a navegación, aquí tengo los distintos menús, y en este menú tengo la información de cada uno de sus elementos de cómo se tiene que ir pintando, aquí lo podemos ver, de echo main-navigation, etc. Lo que pasa es que este es un caso un poco especial porque yo, realmente, este menú estoy haciendo cambios en él desde el header, lo cual significa que no tendría por qué tener que hacer esos cambios en el resto de menús que se creen en otras partes del tema, no es necesario, es mas, si hiciese esos cambios podría ser contraproducente, así que, los cambios que haga en el menú que están cargados en el header en este caso, debería de hacerlos dentro de este header. Bien, pues la idea entonces, es que puedo buscar el elemento concreto uno cualquiera, para saber exactamente sobre que selector tengo que trabajar, que estoy utilizando el main-navigation ul ul, añadiré un color de fondo, background-color, voy a poner uno oscuro, y, efectivamente, esto está funcionando, entonces, ¿qué tengo que hacer ahora? pues recuperar lo que me interesa de esto. Es la clase main-navigation y luego está un ul y dentro de él está un segundo ul y puedo, un poco, replicar esa misma estructura dentro de mi archivo de sass, dentro de él tengo este site-navigation, solamente voy a tener estos menús. Estos menús van a tener, efectivamente, ese ul ul, así que, lo añadiré y ahora, dentro de él añadiré el background-color. Otra ventaja grande de utilizar estas variables, yo puedo copiar el código que tengo para este fondo y aplicarlo, también, para el fondo de los desplegables. Lo guardo. Voy a recargarlo porque hice cambios directamente sobre el navegador, pero, efectivamente, aquí vemos cómo ya tengo esos elementos, me queda formatearlos un poquito más, un poco de padding, y aquí, ya tengo estos elementos que están mostrándose correctamente.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017
Duración:4:16 horas (48 Videos)

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.