Aqui una continuacón al manual de Aeroxis.
Pues tenemos que la forma de recuadrar que aviamos visto es algo así el css:
Código:
.trow4 {
background: #fcfcfc;
width: 100%;
border: 1px solid #a1c9d8;
font-weight:bold;
padding: 2px;
font-size: 11px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
FORMA ALTERNATIVA ''A'' : BORDE SOBRESALIENTE
Como ven solo marca un borde, pero si quisieramos controlar el tamaño de cada borde para poner un efecto como de sombra podriamos usar en su lugar esto:
Código:
.postbit {
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
background-color: #f7f7e6;
border-top: 1px solid #dedec1;
border-right: 2px solid #dedec1;
border-left: 1px solid #dedec1;
border-bottom: 2px solid #dedec1;
margin-bottom: 3px;
}
Esto nos daria un resultado como este:
[attachment=1873]
Como ven el lado derecho queda como sombreado y le da un muy buen efecto.
FORMA ALTERNATIVA ''B'' : FORMA SERIA
Ok , para esto usaremos este css
Código:
.postbit {
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: rgb(240,240,240);
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-left: 2px solid #c4c4c4;
border-bottom: 1px solid #c4c4c4;
margin-bottom: 3px;
}
Y nos dará un resultado como este:
[attachment=1874]
Como ven , queda muy bien
FORMA ALTERNATIVA ''c'' : Con un Fieldset
Aqui pueden usar el css que ustedes quieran , recomendaria usar el primero que puse. Bien, ya que tienen eso, van a postbit_autor_user. Y en vez de usar el codigo que el tutorial da usen algo así:
<fieldset class="postbit" align="center"">
<legend>Titulo del contenido</legend>
<p>Contenido.</p>
</fieldset>
Les quedará algo chulo como esto:
[attachment=1875]