Tod@s los herman@s de luz que me acompañan en este caminar gracias por vuestra luz y armonia

Si necesitáis un tutorial porque algo no sabéis hacer no tenéis mas que pedirlo lo más rápido que pueda os lo pongo con mucho gusto.

lunes, 23 de noviembre de 2009

Añadir la menubar a la plantilla

Es muy fácil poner la menú bar se puede poner encima de la cabecera o debajo donde nos guste más.
Primero vamos hacer es ponerla arriba de la cabecera





Como siempre vamos a diseño, edicion htlm sin expantir artilugios.
Y buscamos esto ( Control + F )
<div id='header-wrapper'>
Debajo de este codigo añadimos esto.
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>

Me imagino que ya tienes un elemento "Lista" añadido, de ahí el id='LinkList2', si tenemos mas de un elemento "Lista" añadidos hemos de saber ( cual toca ) para cambiar su id. Para no complicarnos demasiado, lo mejor es poner en el id un número elevado.

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList50' locked='true' title='Menubar' type='LinkList'/>
</b:section>


En el CSS de la plantilla añadimos el código para nuestro menubar, si no sabemos donde colocar el codigo, lo ponemos antes de ]]>


#menubar h2 {display:none;}

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

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: #003399;
}

#menubar a:hover {
background-color: #CC3300;
}

Podemos cambiar los colores de los links a nuestro gusto.
Vamos a plantilla y veremos el nuevo elemento menubar sobre la cabecera, pinchamos en editar Y añadimos los enlaces que queramos.
Si lo que queremos hacer es colocarla debajo de la cabecera ponemos el primer codigo justo debajo de este codigo.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nbgeyhtuytk (cabecera)' type='Header'/>
</b:section>

Imprime esta entrada