Aspire de nuevo. Lineas laterales gadgets. | Oloblogger Como decíamos ayer , la plantilla Aspire tienes algunos pequeños inconvenientes . Ahora nos vamos a ...

20 de abril de 2009

Aspire de nuevo. Lineas laterales gadgets.

Como decíamos ayer, la plantilla Aspire tienes algunos pequeños inconvenientes. Ahora nos vamos a ocupar de la desaparición de las líneas laterales que rodean los artilugios de las sidebars.

Para crear el formato de pergamino de estos gadgets, el código incluye una imagen de fondo para la cabecera y otra para el resto del contenido. Con la primera no existe ningún problema, pero en el caso de contenidos muy largos, la imagen de fondo de la parte inferior, a pesar de tener una longitud más que suficiente para el 90% de los casos, se queda corta para algunos contenidos muy extensos.

Ese fondo está alineado a la parte inferior de cada artilugio (bottom), así que cuando la longitud del gadget supera la longitud de la imagen, la imagen de fondo no llega a cubrir todo el artilugio. El resultado es que en la parte superior del contenido, no son visibles las líneas que deberían rodear el mismo. (Ver imagen de ejemplo).

Esto se podría solucionar acortando la imagen del pie y creando un tercer ID para la parte central, sólo con las líneas. Lo que ocurre es que habría que modificar manualmente todos los códigos de todos los gadgets y, además, acordarnos de modificar todos aquellos que fuéramos incorporando nuevos.

Dicho esto, vamos a hacer una chapuza que es lo nuestro y con una modificación mínima, intentaremos solucionar de una forma digna el problema. Para ello, simplemente vamos a incluir unas líneas de borde, que se superpondrán a la imagen de fondo antes mencionada. Estas líneas estarán en toda la longitud del contenido del artilugio. En todo excepto en el título).

Dónde haya imagen no se notarán porque serán del mismo color, pero dónde no llegue la imagen, si que se apreciarán, consiguiendo el resultado deseado.

Y después de todo este rollo, aquí está el código a buscar y en negro, los atributos que hay que añadir. Con Vista Previa podeis decidir si os convence o no la solución.

#sidebars .widget-content {background:url(http://www.webpagedesign.ws/aspire/sidebarbottom.jpg) center bottom no-repeat;padding:0px 10px 15px 10px;margin-left:2px;margin-right:2px;border-left:1px solid #AE8535;border-right:1px solid #AE8535;}

¿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

8 comentarios :

  1. Como me habías dicho que era un problema de dibujo ya había asumido que no tenía solución.
    Lo probaré esta tarde. Muchas gracias.

    PD. No lo llames chapuza, suena mejor solución no convencional.

    ResponderEliminar
  2. buenas tardes Oloman, tengo una duda existencial que igual la tienes por ahí contestada y no la encuentro.
    Quiero saber como hacer una página estática, a ver si me explico. Imagina que quiero hacer una página de símbolos y que me lleven ahí, bueno. como tu tienes, faviconerñia, juegos....... no se si me explico bien, pero quisiera saber hacerlo.
    Muchas gracias y besosss

    ResponderEliminar
  3. Inma: La verdad es que no entiendo demasiado bien lo que quieres, pero a ver si con un poco de suerte es algo parecido a esto.

    Mujer Quijote: Me mola lo de SOLUCION NO CONVENCIONAL, pero también me gusta decir la verdad ;)

    ResponderEliminar
  4. MUCHAS MUCHAS GRACIAS ME SOLUCIONASTE ESTE PROBLEMA QUE TENIA CON ESTA PLANTILLA ASPIRE, MUCHOS SALUDOS

    ResponderEliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Tu tienes un problema adicional Alzira y es con el gadget ULTIMAS NOTICIAS. El ancho de ese artilugio supera el que hay disponible para esa columna y se "come" las líneas laterales.

    Tendrías que encontrar esta parte (o parecido) en tu código (con artilugios expandidos) y cambiar el width:100%; por un width:145px;

    <div class="gadgets-gadget-container" id="div-z4trgsvtg1ge" style="width: 100%; visibility: visible;"><div id="gfc_iframe_27050651_1_body"><iframe id="gfc_iframe_27050651_1" name="gfc_iframe_27050651_1" style="width: 100%; height: 821px;" allowtransparency="true" frameborder="0" height="200" scrolling="no"></iframe></div></div>

    ResponderEliminar