AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

La widebar en la rounders

lunes, 14 de julio de 2008


Este es el lateral de mi última creación/modificación de la rounders.
Como puedes ver, además de las dos columnas laterales le he colocado una widebar, que tiene las mismas propiedades que los boxes de las columnas laterales.
¿Tienes una rounders? ¿Quieres hacer lo mismo?
Es muy sencillo.
Primero has de colocarle la 2ª sidebar. Aquí puedes ver como se hace. Las explicaciones están divididas en entradas en las que vas a poder ver los pasos a dar para hacerlo.
Pero si quieres poner la widebar, el código de la nueva sidebar lo has de copiar debajo de main, no encima.
Las medidas y posiciones para que las 3 columnas encajen a la perfección son estas:
#outer-wrapper {
width:995px;

#main-wrap1 {
width:485px;
float:$startSide;
margin:15px 0 10px 10px;
padding:0 0 10px;

#sidebar-wrap {
width:240px;
float:$endSide;
margin:10px 0 0;

#newsidebar-wrap {
width:240px;
float:$startSide;
margin:10px 10px 0;
Con esto verás que las 3 columnas se colocan de manera equidistante.
Una vez hecho esto, y cuando veas las 3 columnas en el sitio correcto, pones la widebar.
Tiene dos partes: la del HTML y la de CSS.
La primera, que has de pegar encima de <div id='main-wrap1'><div id='main-wrap2'> es así:
<div id='widebar-wrapper'>
<div id='widebar-wrap1'><div id='widebar-wrap2'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section>
</div>
</div></div>

Y la segunda, que puedes colocar donde quieras, aunque yo te recomendaría que lo pusieras encima de #sidebar-wrap { por aquello de tener el código organizado, es así:

#widebar-wrapper {
width:485px;
float:$endSide;
padding-bottom:10px;
margin-top:0px;
margin-bottom:0px;
word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */
}

#widebar-wrap1 {
width:485px;
float:$startSide;
background:$sidebarBgColor url("http://www.blogblog.com/rounders4/corners_main_bot.gif") no-repeat $startSide bottom; margin:15px 0 0px 0px;
padding:0 0 10px;
color:$sidebarTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for
long non-text content breaking IE sidebar float */

}
#widebar-wrap2 {
float:$startSide;
width:100%;
background:url("http://www.blogblog.com/rounders4/corners_main_top.gif") no-repeat $startSide top;
padding:10px 0 0;
}
#widebar {

width:485px;
padding:5px;
word-wrap: break-word;
/* fix for long text breaking sidebar float in IE */
}
#widebar h2 {
margin-$endSide: 10px;
color: $sidebarTextColor;
border-bottom: 1px dotted $sidebarTextColor;
margin-bottom: 0.5em;
}

Has de copiarlo entero, con direcciones y todo, pues son las de las esquinas redondeadas.
Con eso logras que la widebar tenga las mismas características que los boxes de la sidebar, e incluso los mismos colores que uno de ellos.
Si quieres rizar el rizo y darle colores independientes, has de crearle variables propias.
Busca las variables de sidebar que ves aquí y las copias, cambiando sidebar por widebar, tanto en las variables, como en las definiciones de éste código.
Si además quieres que los enlaces también tengan colores propios, copias las variables de link de la sidebar, cambiando sidebar por widebar, y añades este código:
#widebar a:link, widebar a:visited, widebar a:hover {
color: $widebarLinkColor;
}
Y si quieres que al poner el ratón encima se vea de un color diferente, añades la variable widebarHoverLinkColor, (aquí te explico como crear variables), borras de arriba lo de widebar a:hover y añades este código:
#widebar a:hover {
color:$widebarHoverLinkColor;
}
Si tienes dudas ya sabes que puedes preguntar.

Imprime esta entrada

5 comentarios. ¿Quieres añadir el tuyo?

  1. mayyica ha dicho
  2. Hola Eulalia! mira tengo un problema con un reloj que puse y un contador de visitas, y es que desde hace una semana es como si me hubieran desaparecido!!
    El caso es que esta tarde he ido a abrir la web de donde los saqué, la del reloj me dice "Servidor no encontrado" y la del contador de visitas no se me abre ni a la de tres.
    Podrías decirme algun contador y algun reloj que no diera este tipo de problemas ....... GRACIASS!!
    Y Denada por lo del premio, te lo mereces ;) Bscossss

  3. Eulalia ha dicho
  4. mayyica, yo tengo los contadores de histstats y van de coña. Solo una vez hubo un parón general; se ve que estaban actualizando algo.
    Si pinchas en cualquiera de mis contadores irás a la página.
    En cuanto a relojes, mira en Blog roll. Allí hay un enlace a auna página de relojes muy chulos y que tampoco ha dado problemas.
    Saludos.

  5. Mª Gemma ha dicho
  6. ¡Que hubiera sido de mi, sin tus blogs de ayuda!

    Llevaba tiempo buscando una plantilla, pero con tus explicaciones me he creado la mia propia, partiendo de una minima... he ido haciendo modificaciones en el HTML... lo que me has enseñado.

    ¡Eres increible!

    Te enlazo en mi blog y a partir de ahora vendre a menudo a visitarte y saludarte.

    Un abrazo y muchas gracias.

  7. mayyica ha dicho
  8. GRAAAAAAAAACIAAAAASSSSSS en cuanto tenga un ratillo en la ofi (jejejeje) lo miro ;) Bscossss

  9. Anna ha dicho
  10. Eulalia, gracias por tu blog, me saca de más de un apuro. Lo ultimo que buscaba es el tema impresión de entradas, que feliz me has hecho. Voy a ver si soy capaz de ponerlo.
    Felicidades por tu blog y gracias por todo
    Anna

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.