Google Fonts: Sácale partido a los menús en TwentyTen y dale color

Escrito por eco escuela 2.0 el . Posteado en Apariencia, Funcionalidades, Temas

edición CSS

Cambia el aspecto de tu blog con "Hojas de estilo"

Una de las novedades de WordPress 3.0 es el cambio de Tema por defecto a TwentyTen, y la inclusión de un cómodo menú. Pero, ¿Cómo le podemos sacar buen partido a dicho menú, y sobre todo a TwentyTen, personalizándo este a nuestro gusto?.

Todos los temas vienen acompañados por una hoja de estilo, que debemos de modificar para cambiar el ancho, color de fondo y texto, tamaño de fuente, y cualquier otro parámetro que nos podamos imaginar.

Por ahora tenemos unos cuantos temas disponibles para elegir en Apariencia Temas de nuestro escritorio de WordPress en nuestro «blog de centro». Poco a poco iremos incorporando nuevos temas que aportarán diferentes funcionalidades en algunos casos, pero sobre todo nos diferenciarán del resto de blogs de centros educativos.

Pero, ¿cómo hay blogs de centros que han cambiado su aspecto sin cambiar el tema por defecto?. Pues es muy sencillo, a través del panel de control de Google Font Directory. Ahora este servicio está disponible de forma muy sencilla para los Centros a través del panel “AparienciaGoogle Fonts” del escritorio de WordPress, de momento sólo con los temas “Twenty Ten Child… y Pilcrow“.

En dicho panel, entre otras cosas, tenemos la opción de introducir un CSS (hojas de estilo) personalizado en el cuadro de CSS. Un ejemplo de CSS más específico sería:

#container p { font-family: 'Reenie Beanie', arial, serif; }

Esto define todos los párrafos que se encuentran dentro de un elemento <div id=»container»></div>. Las hojas de estilo (CSS) pueden ser sensibles y difíciles en ocasiones. Si eres nuevo en CSS los tutoriales w3schools son un buen lugar para empezar.

¿Qué hacemos por ahora? podemos sacarle el jugo a la implementación del menú que se ha hecho en TwentyTen, a través de este cuadro de css personalizado. Para ello podrías copiar y pegar, como ejemplo, en dicho cuadro, lo que sigue:

#access .rojo, #access .rojo a {
background-color:#FF0000;
color:#CCC;
}
#access .verde, #access .verde a {
background: #5efc2c;
}
#access .azul, #access .azul a {
background: #2c42fc;
}
#access .amarillo {
background: #fcec2c;
}
#access .naranjo {
background: #fc732c;
font-color:#000;
}

Observa que en algunas reglas de css hemos añadido también «#access .color a«. Esto provoca que todo el menú desplegable muestre el color seleccionado.

Presento este esquema, pero es extensible a gusto.

Una vez colocado el añadido CSS, nos falta ir a la sección de Menús, (Apariencia Menús), desplegar uno de los elementos, y en «CSS Classes - Optional» colocamos el color de la regla que hemos definido.

Menú personalizadoNos quedará algo así, si vamos asignando a cada menú el color que deseemos:

menú twenty

Como ejemplo, puedes visitar otros blog de centro que han cambiado sus menús, títulos, etc.:

Etiquetas:, , ,

"Trackback" Enlace desde tu web.

eco escuela 2.0

eco escuela 2.0 es un entorno de trabajo cooperativo y colaborativo que reconduce los procesos tradicionales de profesorado de "Enseñar" y de "Aprender" del alumnado a un nuevo modelo en el que cambia el rol del Profesorado "enseña" y del alumnado (aprende o memoriza) a otro en el que se reinventan y RECREAN los procesos de enseñar y aprender en el que ambos APRENDEN A APRENDER.

Comentarios (2)

Deja un comentario