Como hacer “flotar” el footer de Dokeos

No se para ustedes, pero no me gusta que el footer de Dokeos sea siempre moviendo con la pantalla cuando no hay bastante contenido a dentro de la pagina.

Pero tengo suerte que CSS sea tan bien hecho. Si quiero modificar algun estilo de Dokeos, el primer paso es de hacer una copia del directorio del estilo que más me gusta en los estilos por defecto de Dokeos. Digamos que quiero re-usar dokeos_classic, pues hago una copia de main/css/dokeos_classic/ dentro de main/css/dokeos_classic_floating_footer/

Para el ejemplo siguente, voy a estar usando a VIM, un editor en línea de comando, pero igual los estilos se pueden editar con cualquier editor de texto. VIM me permite un acceso directo al servidor, y por eso no necesito que “mandar” el fichero al servidor despues, pero la idea es que solo es un editor de texto.

    ~$ cd dokeos/main/css/

    ~$ cp -r dokeos_classic dokeos_classic_floating_footer

    ~$ cd dokeos_classic_floating_footer/

    ~$ vim default.css

Ahora estoy dentro de default.css, y voy buscando al elemento “footer” (cerca líneas 360 en Dokeos 1.8.5).

Quiero cambiarlo como sigue (lo más importante acá es el position: fixed; )

#footer {
height: 1.5em;
padding-top: 0.2em;
border-top: 1px solid #4171B5;
background-color: #E5EDF9;
font-size: 12px;
bottom:0pt;
overflow:hidden;
position:fixed;
vertical-align:top;
width:98%;
z-index:9999;
padding-left: 1em;
padding-right: 1em;
}

Si acabo aqui, y lo pruebo en mi navegador (por una página larga), puedo ver que ya funciona, pero que una parte de la página se esconde bajo el footer.

Esto es porque el elemento outer-frame en lo cual el footer esta incluído tendría que definir una propriedad margin del tamaño del footer. Eso se puede hacer con la propriedad margin-bottom: 1.5em; como se ve en lo sigente:

Ahora estoy dentro de default.css, y voy buscando al elemento “footer” (cerca líneas 360 en Dokeos 1.8.5).


#outerframe {
position: relative; /* do not remove, fixes a bug in IE */
border: 1px solid #fff;
background-color: #fff;
margin-bottom: 1.5em;
}

Ya esta. Solo ha sido probado con Firefox 2 hasta ahora, entonces asegurase que sea probado con otros navegadores antes de usarlo por sus servidores de producción.

Me gustaría encontrar una manera de dejar el footer a bajo de la página, pero sin que sea flotante… solo dejar lo estaticamente a bajo, pero que también se quede cuando solo hay media-pantalla de contenido. Hasta ahora no encontré.