• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar las entradas de un CPT en formato caja en el H Theme

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?:

mostrar CPT boxed H Theme
Mostrar CPT en formato boxed en el H Theme

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 1827 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).

CPT CSS Genesis Framework H Theme

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?