Estilo revista

Acabo de encontrarme con este "truquillo" en Beautiful Beta, dado mi escaso conocimiento del inglés hube de usar el traductor de google para la página, ya sabemos todos como traduce el "invento" así que esto demuestra que el "truquillo" es muy fácil de entender y aplicar.
Supongo que habéis visto en este post que la primera letra es más grande y que queda el "efecto tipo revista" pues esto es lo que vamos a conseguir aplicando este código:


.dropcaps { float:left;
color: #ddd;
font-size:100px; line-height:80px;
padding-top:1px;
padding-right:5px; }

Tenéis que colocarlo en vuestra plantilla - Html- justo antes de ]]></b:skin>

Cada vez que empezáis un post nuevo si queréis que tenga este efecto hay que colocar <span class="dropcaps"></span> e incluir la primera letra entre <span class="dropcaps"> y </span>

Por supuesto eso sería un poco engorroso, para no tener que hacerlo cada vez que publicamos podemos ir a: "editar plantilla - opciones - formato -plantilla de entrada", y en la cajita de "plantilla de entrada" pegamos el ultimo código (<span class="dropcaps"></span>) esto aparecerá cada vez que publiquemos una nueva entrada, sino queremos el "efecto revista" en una de las entradas, borramos ese código y editamos con normalidad.

Nota: En vista previa no funciona.
Espero os sea útil, si surge algún problemilla me lo comentáis por si puedo ayudaros.

AÑADIDO:

Os dejo otro código donde la letra se verá un poco más pequeña (como la que tengo tenía en el blog) pero que también queda guapo.

Colocar esto dentro del CSS de la plantilla, como antes os dije, por ejemplo, antes de]]></b:skin>


SPAN.firstcap {
font-size:250%;
font-weight:bold;
color:#000000;
float:left;
line-height:30px;
width:0.75em;
}

Cuando escribas tus post añades <span class="firstcap">PRIMERA LETRA AQUI</span> y como antes expliqué podéis pegarlo o no en la caja de "plantilla de entrada"

0 comentarios:

Publicar un comentario

Si llegaste hasta acá y no lo encontraste lo que necesitás intentá buscarlo: