Secciones con estilo II Fondos cuando la longitud es variable | Oloblogger Una vez creada la nueva sección, ahora vamos a "lucirnos" colocando una imagen de fondo creada con tres partes distintas: la cabez...

26 de agosto de 2009

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.

¿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
Copy URL

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

follow us in feedly

26 comentarios :

  1. Hola, en las últimas semanas he estado renovando mis blogs y me he pasado mucho por esta página, así como por la blogueria y otras similares. La verdad que gracias a vosotros todo resulta muy facil.
    Por otra parte quería felicitarte por el diseño de tu blog, la verdad que te ha quedado genial, completamente personal y precioso.
    Así que felicitaciones por tu esfuerzo. Por mi parte has ganado una seguidora.

    Si te quieres pasar por mis blogs para ver las renovaciones que he hecho no te cortes, yo estoy satisfecha con los resultados, pero espero seguir mejorando.
    Te dejo las direcciones.
    Blog de cine:
    http://vakitazul.blogspot.com/
    Blog personal y del resto de temas:
    http://stlablog.blogspot.com/

    Un saludo y hasta pronto.

    ResponderEliminar
  2. Muy interesante tu blog, muy bueno. Me gustaría que visitases mi blog y opinases, te lo agradezco. saludos

    www.martindecoca.blogspot.com

    ResponderEliminar
  3. Hola..
    Creo que tu blog me va ha ayudar muuucho..porqué no tengo ni idea de cómo funciona esto del mundo blog..para empezar ya tengo una pregunta...si me la pudieras solucionar seria la ostia en patinete..

    Intento cambiar el fondo del blog, y en el diseño no está la opción "cambiar fondo del blog", eso porqué pasa? he intentado hacer algun movimiento en el HTML con tus explicaciones pero no me deja..algo no huele bien aquí! :_

    ResponderEliminar
  4. Excelente blog (te doy ánimo para que intentar ganar 20blogs).

    Te quiero hacer una sugerencia que no encuentro por internet.

    En mi blog, tengo una cabezera (título) a través de una imagen url (subida a un hosting).

    Ahora quiero hacer posible, lo que por ejemplo tu tienes en tu blog.

    Si pinchas sobre la cabezera te lleva al inicio de página (inicio del blog).

    ¿Como puedo realizar esto? Es muy útil en todas las webs, que un clic en la cabezera te lleve al inicio de todo.

    Saludos!

    ResponderEliminar
  5. @Vacazul, Refugio interior está bastante bien, pero Diosa del Abismo es espectacular ¡Felicidades!

    @Martín, no me gusta mojarme, porque cada uno tiene un gusto y es complicado opinar. No obstante me daré una vuelta ahora.

    ResponderEliminar
  6. @Markens, como opción de principiante ;) junto a la pestaña Edición HTML, tienes otra con Fuentes y Colores. Ahí puedes cambiar fácilmente el color de fondo. Otra opción es buscar el atributo BACKGROUND de la parte de tu blog que quieras cambiar...

    body {
    margin: 0;
    padding: 0;
    font-size: small;
    text-align: center;
    color: #333333;
    background: #000000;
    }

    Por ejemplo, el anterior BACKGROUND hace que todo el cuerpo exterior sea negro. También se puede sustituir por una imagen utilizando el siguiente código en lugar de un número hexadecimal
    background:url(DIRECCION_IMAGEN);

    ResponderEliminar
  7. Kuyle, la forma más fácil es instalando el artilugio CABECERA. Ahí podrás seleccionar una imagen para poner debajo del título del blog o en lugar del título, que es precisamente lo que tú tienes. Ese artilugio incluye un enlace a Inicio, siempre que no estés ya en la página principal del blog.

    ResponderEliminar
  8. Gracias por darte un paseito por mis blogs, me alegro que te hayan gustado, estoy muy contenta sobre todo con el de Diosa del Abismo y me siento halagada de que te haya gustado.
    Un beso.

    ResponderEliminar
  9. Hello! Miiira, no tiene mucho que ver con este post pero no he encontrado ninguno por aquí sobre mis dudas, te explico a ver si es posible lo que me gustaría hacer:
    En mi blog cree una imagen para el fondo como si fuera una hojita para la zona de las entradas y en mi ordenador se ve bien, el problema es que en otros con la pantalla más grande o más pequeña (al igual que si hago la ventana pequeña) se me descuadra todo, no sé si se puede poner de alguna manera para que sea una medida relativa y según sea el tamaño que quede reducida... no sé si me he explicado bien, espero que me hayas entendido y si quieres pasate por ahí y le echas un vistazo...
    Gracias!

    ResponderEliminar
  10. Hola Elvira. El problema está en la forma de construir el fondo. Deberías hacer pedacitos de la siguiente manera. Para el fondo que simula arena haces un trocito (por ejemplo de 200x200 px) y lo colocas tal como lo tienes ahora en el BODY, pero eliminando el atributo NO-REPEAT. Esa será la capa base.

    Luego en el contenedor #content-wrapper es dónde tienes que poner la hoja con el adosado verde. Para eso tendrás que redimensionarla para hacerla del ancho del espacio disponible, que es de 660px si no me equivoco.

    Esto es lo más fácil. Si quieres complicarte un poco más, podrías dividir este último dibujo en dos, uno para MAIN-WRAPPER y otro para SIDEBAR-WRAPPER, que son los dos bloques en que se divide a su vez el explicado en el párrafo anterior. Una vez más, habría que ajustar las imágenes al ancho disponible.

    Quizás deberías empezar por ensanchar un poco más las columnas de la plantilla y luego modificar los fondos, porque con el tiempo seguro que querrás cubrir más espacio... sin pasarse.

    Además del enlace anterior, mira este otro para entender un poco mejor lo que te he intentado explicar de las capas.

    ResponderEliminar
  11. Hola oloman, primero que nada felicitaciones muy buen blog.

    Y este tema era exactamente lo que andaba buscando, pero me surgio un problema.
    La parte de arriba del pergamino esta descuadrada, se fue hacia el lado izquierda, y mi sidebar esta al lado derecho...
    que ise mal?

    aqui te dejo mi blog de pruebas ojala me ayudes pronto ;)

    ResponderEliminar
  12. disculpa olvide el link que tonto !!!!!!
    http://ultimapruebafriends.blogspot.com/

    ResponderEliminar
  13. Supongo que ya encontraste el fallo Renzo, porque lo veo bien en IE(8) y en FireFox. Si te refieres al texto, que se va a la izquierda, es cuestión de aumentar el PADDING en el cuerpo central (.pergamino)

    ResponderEliminar
  14. Gracias por la respuesta Oloman tienes razon lo acabo de arreglar, me falto agregar un codigo.

    Y si tienes razon con el PADDING arreglo ese detalle.

    PERO ME SURGIO OTRO PROBLEMA...... mira quisiera hacer algo como lo que tu tienes en el Ciber-cafe, me refiero que cuando al pasar el mouse ensima cambie de imagen ( SE QUE SE HACE CON EL ROLLOVER)
    pero cual es el codigo exacto para ponerlo en una seccion expandible, que codigo usaste con eso lo del cibercafe, me enseñar porfabor? :D

    gracias de antemano por la respuesta rapida sos el mejor :)

    ResponderEliminar
  15. Tendrías que ver el siguiente post de esta colección. Seguro que hay otra forma más fácil, pero yo he sustituido el texto PINCHA AQUI del ejemplo por un DIV que incluye eventos Javascript para cambiar el fondo:
    <div onmouseover="this.style.backgroundPosition=&quot;left top&quot;;" style="width:160px; height:60px; background:transparent url(URL_imagen_doble160x120) no-repeat right bottom;" onmouseout="this.style.backgroundPosition=&quot;right bottom&quot;;"/></div>

    Está hecho así para poner una sola imagen que contiene los dos aspectos. Se muestran los primeros 60px de alto o los siguientes, según pasemos el puntero por encima o lo quitemos.

    Si buscas ROLLOVER MOVIMIENTO en el buscador, encontrarás otro sistema para dos imágenes independientes.

    ResponderEliminar
  16. Hola oloman gracias por la ayuda... pero tengo otra consulta.

    EN otro blog hice lo mismo, pero el texto queda muy pegado al los bordes del pergamino.

    http://pruebasidebarsfriends.blogspot.com/

    si te das cuenta esta bien pegado a los bordes de la imgen de ULTIMAS NOTICIAS

    e provado con el padding, pero no puedo cuadrarlo mas tienes alguna idea por fabor?????????

    ResponderEliminar
  17. Hola Renzo. Esto es porque el primer bloque es una lista. En ese caso, tienes que cuadrar configurando los selectores .pergamino ul y .pergamino ul li

    ResponderEliminar
  18. tienes alguna idea de como hacerlo??? no entiendo mucho de ul ul li

    y nose si te as dado cuenta pero no puedo logar que esa sidebar ande arriba de la imagen que tiene el EntriesRss CommentsRss

    nose si me entiendes bueno ojala puedas ayudarme :(

    de todas maneras gracias

    ResponderEliminar
  19. Hola oloman , provando provando ise algo a lo q me dijiste le agrege esto a mi plantilla :


    .pergamino ul { width:180px;margin:0px 0px 0px 26px;}
    .pergamino li { width:170px;}

    y lo cuadre bien asi pero nose si esta bien hecho, si lo esta? talvez no, me avisas vale?
    :D

    ResponderEliminar
  20. Sí es así Renzo. Cambiando los valores de esas dos nuevas clases que has creado es cómo cambias el aspecto de las listas sólo dentro de los bloques "pergamino".

    Con respecto a la sidebar, prueba con un MARGIN-TOP con un valor negativo a ver si cuela ;)

    ResponderEliminar
  21. A parte del tema de arriba.

    Hace poco he cambiado la plantilla de mi blog por la mínima 3 columnas y por mucho que le doy para que se pueda votar por estrellas no me sale.

    ¿Me podrías ayudar?

    Gracias

    ResponderEliminar
  22. La verdad es que no Javierlota. Ese es un gadget que no he utizado nunca y, por otra parte, cuando he hecho ensayos en blogs de prueba, nunca me ha terminado de gustar porque me daba problemas en el formato. O sea, que ni lo uso ni creo que lo usaré hasta que no lo mejoren. Por tanto, no sé cómo funciona.

    Puedes probar restaurando plantilla de artilugios, pero eso podría borrar algo de lo que tienes ahora, por lo que si lo haces, que sea en un blog de prueba primero.

    ResponderEliminar
  23. Hola Oloman
    Lo que te quiero preguntar es muy sencillo (eso creo), y es que si este mismo "truco" se puede utilizar en las entradas y si me podrías decir cómo.
    Muchas gracias
    P.D: Por ahí leo también tus apuntes en Uniblog. Saludos.

    ResponderEliminar
  24. Sí se puede usar para las entradas Martín. Las propiedades que aquí se aplican a pergamino, pergamino-arriba y pergamino-abajo, habría que aplicarlas al selector que tu plantilla use para las entradas (post), para la cabecera de entradas (post header) y para el pie de entradas (footer). En algunas plantillas, esto puede no ser tan fácil. No puedo concretarte más.

    ResponderEliminar
  25. Gracias Oloman, te había escrito antes pero veo que no se publicó mi comentario. De todas manera, de nuevo gracias y voy a ver si puedo hacerlo jeje.

    ResponderEliminar
  26. Exelente eres mi idolo oloman O.O! :D

    ResponderEliminar