Personalizar los títulos en las páginas estáticas

Stella me preguntaba hace unos días la forma de añadir una imagen en los títulos de las páginas estáticas, la respuesta la di en los mismos comentarios pero a veces no solemos reparar en ellos así que veremos como hacerlo y de paso nos divertimos que es de lo que se trata. Trabajaremos siempre en la hoja de estilos es decir añadiremos los cambios antes de ]]></b:skin>

Conseguiremos color de fondo y esquinas redondeadas, en los títulos de las páginas añadiendo:

#PageList1 {

width: 100%;

}

#PageList1 ul li a {

color:#fff;

background:#000;

text-decoration: none;

font-weight: bold;

font-size: 15px;

padding: 8px 8px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border: 1px solid #cc6666;

}

#PageList1 ul li a:hover {

color:#000;

position: relative;

background:#fff;

left: 1px;

top: 1px;

}

Si lo que deseamos es que muestre una imagen de fondo:

#PageList1 {

width: 100%;

}

#PageList1 ul li a {

text-decoration: none;

font-weight: bold;

font-size: 12px;

border: 1px solid #000;

padding: 10px 18px 10px;

background: transparent url(url-imagen) left center no-repeat;

}

#PageList1 ul li a:hover {

position: relative;

left: 1px;

top: 1px;

}

Si optamos por dejar sólo texto podemos añadirle sombra.

#PageList1 {

width: 100%;

}

#PageList1 ul li a {

color: #000;

font-size: 16px;

text-shadow: 0px 2px 3px #505050;

text-decoration: none;

font-weight: bold;

padding: 2px 4px;

}

#PageList1 ul li a:hover {

position: relative;

left: 1px;

top: 1px;

}

Si en lugar de personalizar los títulos deseamos que sea el fondo de todos los títulos los estilos los añadiremos en PageList1 que es el bloque donde se encuentran los títulos.

#PageList1 {

width: 100%;

background: transparent url(url-imagen);

}

Al cambiar el texto de los enlaces probablemente también nos gustaría cambiar ese texto de la primera pestaña donde dice "Página principal" lo podemos cambiar marcando para expandir la plantilla y buscando la etiqueta <data:link.title/> la localizaremos unas líneas más abajo de <b:section class='crosscol' id='crosscol'> y la sustituimos por el texto deseado por ejemplo "Inicio" "HOME" "Blog" o cualquier otro, si lo deseamos desde ahí podemos darle un estilos distinto con la etiqueta span.

Para cambiar simplemente el título lo podemos hacer desde el gadget de páginas.
En este blog de pruebas se puede ver un ejemplo.
Estamos abiertos a más ideas ¿nos cuentas?