• 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 los posts del H Theme en formato caja

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

Mostrar posts L Theme formato caja
Mostrar los posts de la home del H Theme en formato caja

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

CSS Entrada 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?