Cómo añadir cuadros a las entradas de mi blog

Angar Seguir

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Feb 2011
Mensajes
91
Blog: Tesla Game

Quisiera añadir estos cuadros en mis entradas, como se muestra en la imagen.
Desde ya muchas gracias.

Fdq3LrO.jpg
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Blog: Tesla Game

Quisiera añadir estos cuadros en mis entradas, como se muestra en la imagen.
Desde ya muchas gracias.

Fdq3LrO.jpg

es solo CSS + HTML...
esto lo colocas en el theme antes del </head>
HTML:
<style>
.warning, .error, .info, .success {
    padding: 10px;
    margin-bottom: 15px;
    border-style: solid;
    border-width: 1px;
}
 
.warning {
    background-color: #f8fad5;
    border-color: #e5d35b;
}
 
.error {
    background-color: #f5dfdf;
    border-color: #ce9e9e;
}
 
.info {
    background-color: #dfeff5;
    border-color: #9ebcce;
}
 
.success {
    background-color: #e8f5df;
    border-color: #9ece9e;
}
</style>
y esto en los post:
HTML:
<div class="success">
    <p>cuadro verde</p>
</div>
<div class="warning">
    <p>cuadro amarillo</p>
</div>
<div class="info">
    <p>cuadro azul</p>
</div>
<div class="error">
    <p>cuadro rojo</p>
</div>

asi quedaria: Edit fiddle - JSFiddle

vos despues edita el resto a tu gusto!
 

Angar

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Feb 2011
Mensajes
91
Muchas gracias, ya entendi, pero como haria para agregarle el mismo estilo de la imagen, es decir con el titulo dentro del cuadro.
 
Arriba