Secciones con estilo II Fondos cuando la longitud es variable

Una vez creada la nueva sección, ahora vamos a "lucirnos" colocando una imagen de fondo creada con tres partes distintas: la cabeza, el centro y el pie. Hacerlo así sirve para dar un aspecto más original sin que nos tengamos que preocupar por la longitud del contenido que lleve dentro.

Para ello, creamos (o buscamos) una imagen que nos cuadre y con un editor la cortamos por dónde nos viene bien. Los extremos derecho e izquierdo de cada una de las tres imágenes tienen que coincidir, para que cuando los "peguemos" el conjunto quede como de una sola pieza. El resultado serían estas tres piezas, que preferentemente haremos trasnsparentes en la parte que no lleva dibujo y grabaremos como GIF.

De la parte central, tomamos una altura relativamente pequeña pero teniendo especial cuidado en lo de la coincidencia de puntos de los extremos. Esta parte se va a repetir y formará el fondo real de la sección. Igual que con los fondos generales de una web, tenemos que tener las piezas preparadas para una teselación perfecta. Aquí nos valdrá con que encajen en una repetición vertical.

Tomamos nota de la altura de las imágenes que formaran la parte superior (141px en el ejemplo) e inferior (93px idem) y nos vamos a la parte CSS de nuestra plantilla para crear las tres clases que nos servirán para mostrar esas dos partes. Si anteriormente ya creamos una clase sólo para el cuerpo central, con este sistema habrá que ajustarla.

En la parte central haremos que no se utilicen los pixels transparentes y además entraremos un poco dentro del papel para que el contenido no quede pegado a los bordes de la imagen, mediante un PADDING. El orden en el que hay que indicar los márgenes es: arriba derecha debajo izquierda. Además ponemos un color de texto y tamaño de fuente que queden bien con nuestro fondo. Lo último lo hacemos también con la parte superior. En la parte de abajo no es necesario porque no escribiremos contenido

.pergamino-arriba {
position:relative; /* Posicionamiento previo para poder colocar luego el rótulo */
height:141px; /* La altura exacta de esta imagen */
margin:0px;
text-align:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0ZW1dMGOcQweYhdk2yy-jz2q-r_r9DJO0jG32KtD30XytNaUKYkVUbzmEXmYogx2OctNM6iTYW8Kgkb3Hv1WnP6r29SxEmcd90NDuleulZaoLNZhn7tmdD6ZR_RjDifTZIoGuX5AK3pH/s400/pergamino-arriba.gif) no-repeat; /*No repetir dibujo*/
font-size:16px;
font-weight:bold;
color:#000000;
}

.pergamino-abajo {
height:93px;
margin:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf3THRfC9dSMO784lWAsGZm7G1Eb2UF7gdSXmgBZX7mMwddrjmyyVBdB-8o5ruAtxMKb_Y-3Z2WT7iBWr5lvggXIVfE3VTfoInBt4Um5vaOt4aRH46Fdt-yx7174oLR2jPiPTTiFx5Z4kB/s400/pergamino-abajo.gif) no-repeat; /*No repetir dibujo*/
}

.pergamino {
width:180px;
margin:0px;
padding:5px 35px 5px 35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQijON-WUOAG39N9q4a2kmtjaeIjjn4Sq1HrmKBb3j9oLfCU8NkQq5Vc8SMC4lJiObDcr_wpk1CQBCo-A_DXMjtZksln4XQXxo-RDoSJktDPWAQ_d-BE0_8NYaFnivkj3RJPrAWghIBsmq/s400/pergamino-centro.gif) repeat-y ; /*Repetir sólo en vertical*/
color:#000000;
}

Grabamos si queremos, que crear clases y luego no utilizarlas no daña a nadie y más si no hemos generado ningún gadget en la sección en cuestión. Por eso, para probar como va la cosa, insertamos por ejemplo un gadget de texto y tecleamos algo para ver como va quedando.

Llega el momento de incorporar las clases de los trozos superior e inferior a la parte HTML. Seguimos sin Expandir plantillas de artilugios y editamos buscando la nueva sección. Suponemos que seguimos con la anterior idea de intercalar una sección en medio de la barra lateral, cuyo código era este:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>
<b:widget id='Image1' locked='false' title='' type='Image'/>
</b:section>

<div class='pergamino-arriba'>
<span style='position:absolute;top:70px;left:40px;'>
<!-- Distancia a los márgenes para posicionar el rótulo -->
AQUI PUEDE IR UN TEXTO Y/O UNA IMAGEN
</span>
</div>

<b:section class='pergamino' id='mediosidebar'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>

<div class='pergamino-abajo'/>

<b:section class='sidebar' id='sidebar2'/>

</div>

En verde está ahora lo que hemos incorporado nuevo. Al tener los nuevos dos DIV's una altura determinada -marcada anteriormente por sus respectivas clases- incluso no teniendo contenido se mostrarán encima y debajo de la parte central, que es lo que queriamos conseguir.

Ya podemos incluir cualquier tipo de gadget adicional en la sección, que el fondo central se repetirá lo necesario hasta la longitud requerida.

Y ahora para rizar el rizo, lo plegaremos casi todo para que ocupe poco espacio en nuestra barra, de manera que se vea sólo un título y el contenido se despliegue a discreción del usuario. Pero eso en el siguiente post.

• Secciones con estilo I. Intercalar y formatear una nueva sección en sidebar.
• Secciones con estilo III Plegar y desplegar.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter