Antes de aplicar algún cambio

Asegúrate de que tu plantilla es como ésta ya que las definiciones no son las mismas en todas.
Puedes verlo en Diseño/Edición de HTML , como te muestro aquí.




Si no fuera ésta, mira en este blog.
En la sidebar de la derecha hay una lista de todas las plantillas que he modificado.

El nombre del blog es el de la plantilla.

miércoles 24 de septiembre de 2008

La menubar

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.