En la clase de hoy empezaremos a trabajar con CSS para darle nuestro propio estilo al Genesis child theme que estamos creando desde cero.
5 – CSS de nuestro child theme
Ya tenemos nuestro theme totalmente funcional. Hemos creado widget areas, hemos añadido ciertas funcionalidades, y hemos modificado la front page y la home. Momento ahora de empezar a vestirlo. Y lo haremos con CSS.
En esta ocasión vamos a empezar por darle formato a los widgets que hemos creado, que son los únicos que están sin definir. En las próximas lecciones iremos repasando todas las secciones de la web, para ir ajustándolo todo según nuestro criterio.
Bien, pues ya lo tenemos a punto. ¡Fijaros como unas pocas líneas de CSS marcan una diferencia abismal de estilo! A partir de ahora, recorreremos todo el archivo style.css para modificar diseño, y en ciertos momentos usaremos los hooks de Genesis para añadir, quitar o modificar la apariencia y el contenido.
Los deberes que tenéis hoy son los siguientes:
- Crear el CSS necesario para .bienvenidos y .cta-en-la-home.
- Colocar las líneas en style.css, documentarlo y añadirlo en el índice.
- Opcionalmente, si vais a vender el theme, crear un archivo de texto "instrucciones.txt" contando al usuario cómo rellenar esos widgets.
Como siempre, si tenéis cualquier duda podéis contactar a través de la pestaña de soporte de la Intranet. Y como ya he dicho en el vídeo, también apreciaré si me hacéis saber vuestra opinión en cuanto a la metodología. ¿Queréis que lo vaya haciendo todo línea a línea, o preferís que "corte y pegue" estilos que ya tenga preparados? En todo caso, en la próxima clase... ¡Más! :)
Todos los capítulos de este curso:
- Curso de Genesis Child Themes #1: Crear un child theme
- Curso de Genesis Child Themes #2: functions.php
- Curso de Genesis Child Themes #3: front-page.php
- Curso de Genesis Child Themes #4: home.php
- Curso de Genesis Child Themes #5: CSS
- Curso de Genesis Child Themes #6: Creando estilo
- Curso de Genesis Child Themes #7: CSS de estructura
- Curso de Genesis Child Themes #8: Estilos comunes
- Curso de Genesis Child Themes #9: Puliendo CSS
- Curso de Genesis Child Themes #10: Responsive