Quienes usen Moodle (el mejor sistema de gestión de e-learning) saben que el mayor problema de este LMS (junto con su espantoso editor HTML) es que sus temas (plantillas) tienen diseños pobres, poco atractivos y que hacen que un sistema tan potente parezca ser una especie de web 1.0

Por suerte, en estos últimos años han empezado a salir diseños variados y plantillas de apariencia profesional. Pero aún así son pocos y los más o menos buenos (ni siquiera realmente sorprendentes) son de pago.

Pero vamos al grano, un sitio web se ve definitivamente mejor si cuenta con un menú desplegable (de esos que despliegan sus contenidos con solo colocar el cursor encima de cada ítem), y si pudiéramos añadir uno a Moodle sería estupendo.

De hecho ya existen plantillas que cuentan con menús desplegables, aquí las que me han gustado:

• Afterburner
• Aarvark
• SHS Blue
• Newbury college
• Solent

Sin embargo, son pocos, y sería genial poder añadir un menú desplegable a cualquier tema de Moodle, ya que hay varios temas bastante atractivos y si le podemos añadir el menú quedará de lo lindo. Vamos al hecho.

PASO 1: EL CÓDIGO DEL MENÚ DESPLEGABLE

En realidad esté código no es para Moodle, se puede insertar en cualquier página html o php. Y tampoco lo escribí yo, lo encontré googleando cuando estaba desesperado buscando como añadir menús desplegables personalizados en vez de atarme a los temas que diseñaron otros. Así que mi aporte es como adaptar este menú a cualquier plantilla de Moodle y, mejor aún, explicarlo en español, que no he encontrado nada al respecto en nuestra lengua.

Vamos al código:

Descárgalo desde aquí

Cuando descomprimas el zip encontrarás una carpeta llamada desplegable y en su interior lo siguiente:

• El archivo desplegable.html (el código del menú)
• El archivo desplegable.css (el código que ordena el html anterior para que tenga el aspecto de menú).
• La carpeta chromejs dentro de la cual se encuentra el archivo chrome.js (el código que hace que el menú se despliegue).

PASO 2: EDITAR EL ARCHIVO desplegable.html

Abre el archivo desplegable.html con un editor de textos y borra la siguiente línea:

1

<link rel="stylesheet" type="text/css" href="desplegable.css" />

PASO 3: AÑADIR LOS ESTILOS DEL MENÚ A LOS ESTILOS DEL TEMA DE MOODLE

Localiza el archivo que contenga los diseños de tu tema de moodle. Debe llamarse styles.css (es lo general aunque no siempre es así). Abre ese archivo con un editor de textos y copia al final todo el contenido del archivo desplegable.css

Por si las dudas, el código es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

.chromestyle{
width: 1000px;
font-weight: bold;
font-size:0.9em;
margin:0px auto;
padding:0px;
}
 
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
/*content: ".";*/
display: block;
height: 0;
clear: both;
visibility: hidden;
}
 
.chromestyle ul{
border: 1px solid #bbb;
width: 100%;
background-color:#eee;
padding: 4px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
 
.chromestyle ul li{
display: inline;
}
 
.chromestyle ul li a{
color: #BF3B44;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
 
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color:#6F2225;
background-color:#fff; /*THEME CHANGE HERE*/
}
 
/* ######### Style for Drop Down Menu ######### */
 
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
 
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
 
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
 
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

No olvides pegar el código anterior dentro (y al final) del archivo css de tu tema de Moodle.

PASO 3: AÑADIRLO A UNA PLANTILLA CUALQUIERA DE MOODLE

Ya tenemos la carpeta desplegable, lo que ahora debemos hacer es copiar todo su contenido dentro de la carpeta de nuestro tema de moodle. ¡Ojo!, no copies la carpeta desplegable sino su contenido.

Bien, ahora debemos hacer unas modificaciones en el archivo header.html (dentro de la carpeta de tu tema de moodle) y eso será todo.

Abre el archivo header.html con un editor de textos (si estas en windows te recomiendo notepad++, en linux, cualquier editor que traiga tu distribución será perfecto). Lo siguiente hazlo con mucho cuidado:

Primero debes añadir el siguiente código dentro de la sección head y justo después de la sección title

1
2

<script src="<?php echo $CFG->themewww .'/'. current_theme() ?>/chromejs/chrome.js" />
</script>

Debe quedarte algo así, no exactamente igual al código que está a continuación, pues solo lo escribo para que veas más o menos donde deben introducir el código anterior. Pero recuerda que cada tema es distinto y no debes modificar en nada el código existente, solo debes añadir el código anterior:

1
2
3
4
5
6
7
8
9

<head>
 <?php echo $meta ?>
 <meta name="keywords" content="moodle, <?php echo $title ?> " />
 <title><?php echo $title ?></title>
 <script src="<?php echo $CFG->themewww .'/'. current_theme() ?>/chromejs/chrome.js" />
 </script>
 <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
 <?php include("$CFG->javascript"); ?>
</head>

El código anterior permite que se solicite las órdenes el archivo chrome.js que era, si te acuerdas, el que generaba el efecto desplegable en el menu. Ahora debemos invocar el archivo desplegable.html que es el que contiene el menú en sí. Para eso ubica la sección page, el código debe ser así:

1

<div id="page">

Una vez ubicado dicha sección pega el siguiente código inmediatamente antes de él:

1
2
3
4
5
6
7

<div>
 <?php
{
 include('desplegable.html');
}
?>
</div>

Si lo has hecho bien, activa el tema en tu Moodle y ¡bingo! ya tienes tu menú desplegable.

SOLO VEO EL MENÚ DESPLEGABLE EN LA PORTADA

Lo más probable es que solo puedas ver el menú desplegable en la portada, más no en las demás páginas de tu Moodle. Eso sucede porque casi siempre, el código en el header.html distingue la portada del resto de paǵinas. Si te sucede eso, busca una segunda sección page y copia el código tal como lo hiciste en el paso anterior. Ya podrás ver el menú desplegable.

CONCLUSIONES

Pueden parecer muchos pasos y muy complejos, pero he intentado ser lo más detallado posible en la explicación. Solo te queda editar manualmente el menú para que aparezcan los elementos que deseas.

Cualquier duda es bienvenida en los comentarios.

Si este artículo te gustó también puedes leer:

• Manual de Moodle, capítulo 9: Cambiar la apariencia de Moodle con los temas (2 comentarios)
• Manual de Moodle, capítulo 8: Conociendo el bloque "Administración del sitio" (11 comentarios)
• Manual de Moodle, capítulo 7: Moodle en español (0 comentarios)
• Manual de Moodle, capítulo 6: Estructura de carpetas en Moodle (0 comentarios)
• Manual de Moodle, capítulo 5: Instalación de Moodle (0 comentarios)

i Nove, nuevo tema para WordPress.com que soporta menús desplegables

Demostrando nuevamente que son quienes marcan la hora en el bloggin gratuito a nivel mundial, la gente de WordPress.com ha añadido un nuevo tema a los más de setenta diseños entre los que pueden escoger quienes arman sus blogs gratuitos con ellos. Y este tema sí que se las trae pues es uno de los más famosos entre los blogs de hospedaje pagado. Diseño elegante, comentarios anidados, colore sobrios e iconos atractivos. Pero de lo mejor es que ES EL PRIMER TEMA DE WORDPRESS.COM QUE TIENE MENÚS DESPLEGABLES. ¿A que no me creen? De veras, de veritas, con este diseño tu blog gratuito puede lucir como uno profesional; solamente crea las páginas, añade subpáginas y listo. La plantilla se encarga de ordenarlos.

He aplicado el diseño en mi blog de WordPress.com para que vean como quedaría en el suyo.

Si este artículo te gustó también puedes leer:

• Curso de WordPress.com: 4 – Widgets (2 comentarios)
• ¿Wordpress o Blogger? (3 comentarios)
• Wordpress.com añade widget para twitter (4 comentarios)
• Curso de WordPress.com: 4.1 – Widgets (Del.icio.us) (4 comentarios)
• Curso de WordPress.com: 3 – Cambia el diseño (5 comentarios)