Tuneando la herbert

La cabecera

2008-09-25T00:04:00.003+02:00

Esta plantilla es de las que no tienen un ancho fijo. Se ensancha o estrecha en función de la ventana o de la resolución del monitor.
Así, si la estás viendo a toda pantalla, en un monitor de 800px de resolución, verás que ocupa toda la pantalla, pero si la ves en un monitor de 1600 también ocupará toda la pantalla, a diferencia de las que tienen una medida fija, que al verlas en pantallas más anchas que el blog solo se ensancha la zona inútil de los lados.

Por este motivo es difícil ponerle una cabecera fija y centrarla, ya que se moverá en función de lo antedicho.

Lo mejor en este caso es poner la cabecera y dejar que quede a la izquierda.

El problema es que entonces queda a la derecha una zona en blanco.

Podemos aprovecharla quitándole anchura a la zona de la cabecera y poniendo una imagen en el fondo, como ves aquí, ya que no se puede subir la columna lateral más arriba de donde está, aunque le quites anchura a la cabecera.

Así, en la zona de #header { dejaremos el width en los píxels que necesitemos para la cabecera, (en este caso han sido 800px) y luego en body { añadiremos la imagen que va a verse ahí en esta línea: background: $mainBgColor; de esta manera:

background: $mainBgColor url(dirección) top $endSide no-repeat;

Con top le decimos que la imagen se va a ver arriba de todo, con $endSide, que va a verse a la dercha del todo y con no-repeat evitamos que la imagen se repita en todo el blog.

Si no pones esto último, la imagen se repetirá, con lo que, dependiendo de como sea esa imagen no quedará mal, aunque se notará esta zona vacía.

Fondos de distinto color

2008-09-24T23:55:00.002+02:00

La plantilla tiene un fondo definido en las variables como mainBgColor. Es la primera de todas las que hay.
Si quieres ponerle al fondo del blog un color distinto al de las entradas y la o las columnas laterales, puedes añadir una variable, justo debajo de esta primera, para cambiar esos fondos.

Copia y pega debajo esa primera variable, cambiandole el nombre y la descripción para que quede así:

<Variable name="bgColor" description="Background Color"


            type="color" default="#ffffff"  / value="#ffffff">

y luego busca estas zonas: #sidebar .widget { #newsidebar .widget { (si ya la has añadido) y .post { y añade en ellas esta línea:

background: $bgColor;

Podrás cambiar los colores en fuentes y colores.

Poner otra sidebar

2008-09-24T23:21:00.004+02:00

SIN expandir elementos.

Para poner una segunda sidebar, primero has de cambiar las medidas de div#main-wrapper { y dejar la linea del width en 48%, y de div#sidebar { dejando el width en 24%.
Este grupo de código termina con
*/
}
debajo has de pegar esto:
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 */
}

Verás que queda una llave } más, al final de lo que pegues. Es correcto.

Baja un poco y verás esta zona:

div#sidebar-wrapper {

al final de ésta, bajo la llave que cierra este grupo, has de pegar esto:

div#newsidebar-wrapper {
padding-top: 20px;
padding-$endSide: 1em;
padding-bottom: 0;
padding-$startSide: 1em;
text-align: $startSide;
}

baja un poco más y verás este grupo: #sidebar h2 {
pega esto debajo de la llave de cierre:

#newsidebar h2 {
margin: 0px;
color: $sidebarTitleColor;
font: $sidebarTitleFont;
background: $descriptionBgColor;
padding: 0px;
border: none;
}

la línea que ves en rojo la he añadido para ponerle color detrás de los títulos de los elementos.
Si quieres que también se vea en la otra sidebar, has de añadirla en el código de encima.

Debajo de este que has añadido verás 3 partes más que empiezan con #sidebar, copialas las 3 y pégalas debajo cambiando sidebar por newsidebar en las 3.

Si quieres enmarcar los elementos individualmente, en #sidebar .widget y en #newsidebar .widget añades esta línea:

border: solid 1px $borderColor;

pudiendo cambiar el grosor, y el estilo de la línea por el que más te guste.

Cuidado: La variable borderColor no existe en esta plantilla. Si quieres usarla has de añadirla. En la entrada de la menubar la encontrarás para copiarla.

Una vez hecho esto, baja a la zona del HTML y copia el código de la sidebar y pégalo encima de esta línea <div id='main-wrapper'> cambiando en los dos id= sidebar por newsidebar, para que se vea así:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>
</b:section>
</div>

Si tienes muchos elementos en la sidebar, al copiar los copiarás todos.
Borra todos los b:widget que haya, (o no los copies) excepto el del perfil, como ves aqui, en el código, para que haya algo en la nueva sidebar y puedas verla.
Luego borra el del perfil de la otra para que no te de error.

Una vez hecho esto, ya puedes hacer vista previa.
Y si has seguido estas instrucciones paso a paso, verás el perfil en una nueva columna a la izquierda del blog.

La menubar

2008-09-24T21:21:00.000+02:00

Como en la mayoría de blogs he aprovechado el crosscol para colocar la menubar y he añadido variables para poder personalizarla.

Para hacerlo has de añadir estos códigos a la plantilla:

En la zona de variables, entre la última de color y la primera de fuentes, añades esto:

<Variable name="menubarColor" description="Menubar Color"
          type="color" default="#999999" / value="#68ed99">

<Variable name="menubarBgColor" description="Menubar Background Color"
          type="color" default="#999999" / value="#ffffcc">

<Variable name="borderColor" description="B>

<Variable name="menubarLinkColor" description="Menubar Link Color"
          type="color" default="#999999" / value="#063E3F">

<Variable name="hoverLinkColor" description="Hover Link Color"
          type="color" default="#999999" / value="#0066CC">

<Variable name="menubarFont" description="Menubar Font"
          type="font" default="normal bold 125% Verdana, Sans-Serif" / value="normal bold 102% Arial, sans-serif>

En el CSS (la primera parte, debajo de las variables) añades esto justo encima de h3 {

/*Crosscol
----------------------------------------------*/
#crosscol-wrapper {
height:30px;
margin-top:0;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-$endSide:0;
padding-bottom:0;
}

#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;

font:$menubarfont;

background-color:$menubarcolor;

border: outset 2px $bordercolor;
}
#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $linkcolor;
}
#menubar a:hover {
color: $hoverlinkcolor;

background-color:$menubarbgcolor;

}

En el HTML, SIN expandir artilugios, has de buscar el código del crosscol, que es así

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

y dejarla así:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'> <b:widget id='LinkListX' locked='true' title='Menubar' type='LinkList'/> </b:section>
</div>

Haz vista previa y si el blog carga bien guarda plantilla.
Al principio no la verás, pues que para que se vea has de añadir algun enlace ya que es una lista de enlaces normal, solo que modificada para que se vea así.

Pon un enlace para poder modificar los colores, ya que saldrá con los que hay aquí.

Nota: Los códigos de las variables son para esta plantilla. En otros modelos no hace falta ponerlos todos.