En la clase de hoy vamos a definir los CSS de estructura de nuestro child theme, para establecer las dimensiones y márgenes de cada sección.
7 – CSS de estructura
Seguimos avanzando por la selva del CSS. En este caso nos metemos en los estilos que definen la estructura. O sea, que anchos, altos, márgenes, espacios y alineaciones van a tener todas las secciones de la web. ¡Vamos allá!
Ya veis lo fácil que es definir la estructura de la web. Sólo necesitamos el ancho total (en este caso 1.200px) y los parciales que lo conforman (en este caso 800px y 400px para contenido y sidebar respectivamente). A partir de aquí, sólo debemos marcar los floats y listos. ¡Estructura a punto!
Es importante que hagáis lo mismo que he hecho yo en el vídeo, eliminando los estilos que no vamos a usar. Aunque parezca poca cosa, al final pueden llegar a ser cientos de líneas que no pintan nada en nuestro theme.
Así pues, los deberes de hoy:
- Arreglar la CTA de la página del blog
- Definir un ancho total
- Definir un ancho para el contenido y la sidebar
- Definir margins y paddings
- Eliminar todos los estilos no necesarios acorde a vuestro theme
Como siempre, si tenéis cualquier duda en estos pasos podéis contactar a través de la pestaña de soporte de la Intranet. Nos vemos en la próxima clase, en la que segiuremos con las clases comunes y añadiremos alguna que otra funcionalidad. Hasta entonces... ¡Muy buenos días!
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