¡Hemos reducido nuestros precios! Compruébalos aquí: ¡Suscríbete!

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

Añadir propiedades CSS al header

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este vídeo empezaremos a montar la parte superior compartida por todas las páginas: el header, añadiendo los estilos y clases que luego servirán para controlar la forma de mostrar este header en el tema.

Transcripción

Según voy avanzando en el desarrollo de mi tema, voy a ir encontrándome con que los cambios de estilo que tengo que hacer en los CSS, pueden afectar a diferentes elementos de las páginas. Supongamos que yo cambio la propiedad color. Esa propiedad color después va a afectar a otras partes, así que tengo que tener cuidado con qué es lo que hago y dónde lo hago. Para eso está muy bien el utilizar los archivos SCSS sueltos, como este header que acabo de crear, porque aquí tengo un ámbito en el cual puedo añadir propiedades, como, por ejemplo, este color, en las cuales, pues puedo definir un color blanco y con eso consigo que ese color blanco se aplique en él, pero no se aplique en el resto de la página. Pero, incluso, eso tambíen tiene truco, porque hay contenidos que se comparten. Por ejemplo, en realidad este header se utiliza en varios sitios: se utiliza la etiqueta header en el encabezamiento principal, pero también se utiliza el header, aquí podemos verlo, en este caso, en ese contenido Template: Sticky. Así que, tengo que tener también un poco de cuidado con dónde aplico los contenidos, buscando esos contenidos. Voy a seleccionarlo, haciendo inspecciones de ellos, y mirando a ver exactamente qué clases son las que tienen aplicadas. Por ejemplo, en mi caso, yo podría utilizar ese header directamente. Pero puedo hacer más, yo puedo utilizar el header-content, que es el que me va a servir un poco para envolver todos los elementos que tengo dentro de ese header. Así que puedo cortarlo, puedo pegarlo, y el resultado es que efectivamente este texto sale negro, y en cambio, el otro texto sale blanco. No obstante, también sobre el mismo header yo puedo aplicar otras propiedades. Supongamos que quiero que el fondo de ese header tenga un color determinado. Si aplico ese background color aquí, me lo aplicará en todas las partes donde haya un header, pero también puedo hacer otra cosa, puedo irme al header y mirar ese header que tiene, en concreto, un identificador. Entonces, otra opción también es mantener este header como ámbito para poder añadir modificaciones que afecten a todos los headers a la vez y luego, aparte, para headers concretos lo que puedo es añadir un selector en el que aquí sí que pueda añadir, por ejemplo, ese background color. Por cierto, también, otra cosa, es que es importante el utilizar, dentro de lo posible, la menor cantidad de valores exactos en estos archivos parciales. Lo suyo es utilizar variables que me permitan luego acceder a estos mismo valores desde cualquier parte de la estructura Sass. En este caso, por ejemplo, entonces lo que debería de hacer es pedir que me llame a una variable dónde se haya almacenado el color. Las variables, se guardan en la carpeta variables site. Hay un archivo, colors.scss, que es el que suele utilizarse para guardar esas variables, así que aquí crearé una variable $color_skin, por ejemplo, y la voy a igualar, pues, a... ...0a0c2d, un color oscuro. Lo guardaré, se ha creado esa variable. Y ahora, aquí, igualo a color_skin. Por cierto, que la costumbre es añadirle un doble guión bajo, así que voy a guardarlo de nuevo. Y ahora, aquí sí, voy a guardar de nuevo esa variable. Y me queda un último detalle. En este caso, en concreto, este masthead es un identificador que está aplicado sobre la propia etiqueta header, mientras que esta estructura, a mí lo que me va a generar es un header #masthead así que tendré que cortarlo, ponerlo aquí fuera. Voy a guardarlo, y ahora ya se está aplicando ese color de fondo, y, además, estamos utilizando variables para pasar esos valores. Hay otras formas de conseguir esto mismo, teniéndolo metido dentro, pero esta forma de montarlo, por lo menos a mi gusto, es bastante más clara, porque me sirve para entender que tengo, por un lado, lo que tiene que ver con el header en general y, luego, para el caso de masthead en particular.

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

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.