La plantilla que vamos a modificar es la Herbert, que podemos identificar en el encabezamiento del código, así:
Los blogs con plantilla Herbert tienen una sidebar derecha. Vamos a agregar una sidebar izquierda: Vamos a Edicitar HTML :
|
- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (Search), una línea del mismo:
@media all {
div#main-wrapper {
float: $startSide;
width: 66%;
padding-top: 0;
padding-$endSide: 1em;
padding-bottom: 0px;
padding-$startSide: 1em;
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 */
}
y cambiamos el Width (ancho), de 66% a 48%
- Más abajo en:
div#sidebar {
width: 30%;
float: $endSide;
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 */
}
cambiamos el Width de 30% a 24%.
- Debajo del anterior segmento de código, justo debajo de la primera llave de cierre ( } ) pegamos éste:
div#newsidebar-wrapper {
margin: 10px;
padding: 10px;
text-align: $startSide;
}
div#newsidebar {
width: 24%;
float: $startSide;
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 */
}
- Más abajo buscamos este segmento:
div#sidebar-wrapper {
padding-top: 20px;
padding-$endSide: 1em;
padding-bottom: 0;
padding-$startSide: 1em;
text-align: $startSide;
}
}
y, debajo de la primera llave de cerramiento ( } ), pegamos esto:
div#newsidebar-wrapper {
padding-top: 20px;
padding-$endSide: 1em;
padding-bottom: 0;
padding-$startSide: 1em;
text-align: $startSide;
}
- Siguiendo más hacia abajo localizamos este segmento de código:
#sidebar h2 {
margin: 0px;
color: $sidebarTitleColor;
font: $sidebarTitleFont;
padding: 0px;
border: none;
}
debajo del cual pegamos esto:
#newsidebar h2 {
margin: 0px;
color: $sidebarTitleColor;
font: $sidebarTitleFont;
background: $descriptionBgColor;
padding: 0px;
border: none;
}
La línea backgrounod la hemos añadido para ponerle color al fondo de los títulos de los elementos. Si queremos el mismo efecto en la otra sidebar la añadimos en el código de arriba.
- Debajo encontramos estos tres segmentos:
#sidebar .widget {
margin-top: 0px;
margin-$endSide: 0px;
margin-bottom: 33px;
margin-$startSide: 0px;
padding: 0;
}
#sidebar ul {
list-style-type: none;
font-size: 95%;
margin-top: 0;
}
#sidebar li {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 105%;
}
Los copiamos y los pegamos enseguida cambiando sidebar por newsidebar.
Si queremos enmarcar los elementos individualmente, en #sidebar .widget y en #newsidebar .widget añadimos esta línea:
border: solid 1px $borderColor;
pudiendo cambiar el grosor, y el estilo de la línea.
- Por último bajamos a la zona de HTML, copiamos el código de la sidebar, que es éste:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>
</b:section>
</div>
y lo pegamos encima de esta línea:
<div id='main-wrapper'>
Una vez pegado le hacemos las siguientes modificaciones:
- Borramos todos los b:widget (los que están resaltados); el del prefil (Profile) lo dejamos para que la sidebar no nos quede en blanco y podamos distinguirla.
- cambiamos los dos
id='sidebar'porid='newsidebar'.
- Borramos todos los b:widget (los que están resaltados); el del prefil (Profile) lo dejamos para que la sidebar no nos quede en blanco y podamos distinguirla.
- Para que el b:widget del perfil no nos quede repetido, lo que nos produciría un error, debemos borrarlo del código de la primera Sidebar, o sea que de ese código borramos esta línea:
<b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>
- Finalmente: Vista previa y Guardar plantilla.
| Yendo a Página principal ► Diseño ► Diseño podemos añadir y organizar elementos en cada Sidebar |
| Twittear |
| |
9 comentarios :
Esta era la información que estaba buscando. Sus explicaciones son muy claras.
Muchas gracias y un gran saludo.
Toda la informacion de tu blog me ha servido mucho. Lo mantengo como referencia.
Pregunto: como puedes lograr, por ejemplo, que tu box de enlaces, el titulo "enlaces", este centrado, y todo su fondo ocupe el espacio del box y no solo el espacio de la palabra en si.
Gracias
DaycareWeb:
Para lograr este efecto tenemos que crear una tabla. Ve a este tutorial:
http://bloguermast.blogspot.com/2009/12/tablas-basicas.html
y busca: "Tabla de una columna con encabezado". Ese ejemplo lo puse para ti.
Saludos
Excelente!!! muy bien hay temas muy interesantes..
ojala sigan subiendo mas temas sobre css
hola no tienes canal en youtube?
gracias saludos
Liv Chatre: No tengo canal en youtube.
Saludos.
Hola
Utilicé una plantilla ethereal y no se cómo agregarle un sidebar y me gustaría ponerle musica de fondo ¿cómo lo hago? por favor ayudenme,
Maribe
Gracias por tus explicaciones, son muy útiles
Un saludo
Saludos Loli!
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.