Descubre en este tutorial cómo añadir un marco a las entradas de los Custom Post Types (CPTs) en el H Theme mediante código.
Hace unos días, Asier, uno de nuestros suscriptores, me dejó esta sugerencia:
Buenas, Nahuai. Estaría bien saber cómo poder centrar el título en los Custom Post Type del H theme y, si no es mucho pedir, crear una caja para los posts como la que está en esta web. Gracias. Saludos.
El código para conseguir ese resultado será distinto dependiendo del efecto visual que quieras conseguir.
Por lo tanto, aquí vas a aprender cómo insertar un marco o caja en las entradas de CPT al H Theme usando el estilo del tema que tienes delante (es decir, el de Código Genesis) como referencia.
Aunque este tutorial está desarrollado para una plantilla concreta, puedes usarlo de guía para otros child themes de Genesis Framework y, sobre todo, adaptarlo para conseguir un efecto a tu gusto. 😉
¿Quieres un resultado final parecido a este?:
Entonces solo necesitas hacer unas pequeñas modificaciones de CSS para obtener este efecto «caja».
Vamos a ello.
Snippet para agregar un marco alrededor de las entradas de CPT en el H Theme
Introduce el siguiente fragmento al final del fichero style.css:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque consigues que en las entradas del Custom Post Type «Curso» se muestre un fondo gris y un borde, transmitiendo esa sensación de caja. Puedes sustituir «.single-curso» por «.single-tucpt» para adecuarlo al tuyo.
Siempre tienes la opción personalizar tanto el color de fondo (background-color) y el borde (border) o crear marcos más o menos redondeados cambiando el valor de border-radius.
¡Listo! Las entradas de tu CPT ya se visualizan en formato ‘box’.
Conclusiones
Ya ves qué fácil es crear una «caja» alrededor de las entradas de un CPT en el H Theme.
Y recuerda que, aunque este snippet está creado para una plantilla concreta, puedes usarlo de guía para modificar otros child themes de Genesis.
Si quieres hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, déjamela en los comentarios (solo para suscriptores).
