Las scrollbars se usan para subir y bajar por una página web. También podemos usarlas en algunas partes de nuestro blog.
Scrollbars en todos los widgets del blog
Añadimos justo debajo de /* Sidebar Content :
.sidebar .widget{
height:200px;
overflow:auto;
}
Scrollbars en los widgets de una de las sidebarsTambién lo colocaremos debajo de /* Sidebar Content . Localizamos el nombre de nuestras sidebares, normalmente suele ser sidebar una de ellas, la otra será newsidebar, sidebarleft, sidebarrigth...Vamos a suponer que se llaman "sidebar1" y "sidebar2", si queremos colocar las scrollbars en "sidebar1" pegaremos esta pieza de código:
#sidebar1 .widget{
height:200px;
overflow:auto;
}
Si preferimos colocarlas en la otra sidebar "sidebar2" pegaremos esto:#sidebar2 .widget{
height:200px;
overflow:auto;
}
Scrollbar en un Widget solamente.Localizamos en la plantilla el "id" o nombre del elemento al que queremos añadir las scrollbars.
En nuestra plantilla ->Edición HTML sin expandir los elementos veremos algo como esto:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='MIS AMIGOS' type='LinkList'/>
<b:widget id='Archivelist' locked='false' title='' type='ArchiveL'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>
Lo que está en azul es la "id" de cada widget, imaginemos que vamos a ponerle scrollbars a una de nuestras listas de links "LinkList1". Buscaremos /* Sidebar Content y justo debajo pegaremos esta pieza de código (cuando el widget escogido es una lista, hemos de añadir el "ul" :#LinkList1 ul{
height:200px;
overflow:auto;
}
Scrollbars en el cuerpo de las entradasLocalizamos en el HTML de la plantilla: .post { y justo debajo colocar el código para mostrar las barras:
.post {
height:200px;
overflow:auto;
}
Scrollbars para una parte del post (ScrollBox o Caja de Texto)Insertamos esta pieza de código en el CSS de la plantilla, en la que especificaremos el alto (height) y el ancho (width) de la caja de scroll:
.scrollbox {
height:100px;
width:300px;
overflow:auto;
}
En el editor de entradas escribimos el post normalmente y donde queremos incluir la parte con scrollbars, colocamos esto:<div class="scrollbox">TEXTO O IMAGEN/ES QUE VAMOS A INCLUIR EN LA CAJA DE SCROLL</div>
2 comentarios:
Muchas gracias. Un post bastante útil.
Eugenio, te agradezco el comentario.