Descubre cómo añadir un marco a los posts que aparecen en la home del H Theme mediante código.
Hace unos días, Asier, uno de nuestros suscriptores, me dejó esta sugerencia:
Hola Nahuai. Otra de las cosas que me parece interesante es cómo poner cajas, tipo las que tiene Joan en su home page, en cualquier tema de Genesis Framework.
Tal y cómo le comenté, el código para conseguir ese resultado será distinto dependiendo del tema.
Así que hoy vas a aprender cómo aplicar este cambio al H Theme, aunque este tutorial también de guía para hacerlo en otras plantillas de AsiThemes.
¿Buscas un resultado final parecido a este?:
Solo necesitas realizar unas pequeñas modificaciones de CSS para obtener este efecto de «caja».
¿Vamos a ello?
Snippet para añadir un marco alrededor de los posts en el H Theme
Introduce el siguiente fragmento al final del fichero style.css:
Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque consigues un borde gris de 2 píxeles alrededor de las entradas en la página principal.
Por supuesto, puedes personalizar tanto el color como el grosor de la línea.
También tienes la opción de crear marcos más o menos redondeados cambiando el valor de border-radius.
Y ¡listo! Los posts de la home ya se visualizan en formato caja.
Conclusiones
Ya ves qué fácil es crear una «caja» alrededor de los posts que aparecen en la página principal del H Theme.
Y aunque este snippet está creado para una plantilla concreta, puedes usarlo de guía para modificar otros child themes de AsiThemes.
Si quieres hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, déjamela en los comentarios (solo para suscriptores).
