Chamilo 1 9 Css

7/30/2019 Chamilo 1 9 Css

1/8

Modificar plantillas (css) de Chamilo LMS 1.9.xEn artculos anteriores se mostr cmo modificar las plantillas de Chamilo 1.8.8.x. Ahoranuestro objetivo ser modificar las mismas pero para la versin de Chamilo 1.9.x.Lo que haremos ser tomar una plantilla que viene con Chamilo 1.9.x y modificarla cmo

si se tratase de nuestro propio campus virtual.

1. IntroduccinLa maquetacin HTML/CSS de Chamilo 1.9 est basada en Bootstrap de Twitter lo quetrae flexibilidad y rapidez a la hora de modificar las plantillas, adems permite que laplataforma se vea correctamente en mviles y en las resoluciones de pantalla msutilizadas, entre otras muchas posibilidades de accesibilidad y diseo.

Esta nueva versin inserta en sus hojas de estilo(css) CSS3 permitiendo generardegradados de colores y bordes redondeados con tan slo editar el archivo "default.css".En este ejemplo se ver cmo cambiar los colores del men principal, las imgenes dellogo y pie de pgina y los colores de los enlaces.

Chamilo 1.9.x a diferencia de la antigua versin 1.8.8x requiere un poco ms deconocimientos de cdigo CSS (Hojas de Estilo en Cascada) aunque este artculo se haelaborado pensando en usuarios que no tengan ningn conocimiento al respecto.

2. Preparar mi plantilla y editar el archivo "default.css"

2.1. Se tomar como ejemplo la plantilla llamada "chamilo_orange" que se encuentraen la carpeta : "../main/css/chamilo_orange" del proyecto.

2.2. Se har una copia de "chamilo_orange" y se le pondr el nombre de"mi_campus". Tambin se puede cambiar el nombre a la carpeta "chamilo_orange" por"mi campus" directamente.

2.3. Dentro de "mi_campus" hay varios archivos, en este caso abriremos"default.css". Este archivo se puede abrir con un editor de cdigo como el Notepad++ oel tpico bloc de notas. En artculos anteriores nos refierimos a este tipo de herramientas.
http://contenidoselearning.blogspot.com.es/2012/05/como-crear-una-nueva-hoja-de-estilo.htmlhttp://www.genbetadev.com/frameworks/bootstraphttp://www.desarrolloweb.com/manuales/css3.htmlhttp://notepad-plus-plus.org/download/v6.2.3.htmlhttp://contenidoselearning.blogspot.com.es/2012/09/crear-temas-personalizados-de-chamilo.htmlhttp://www.genbetadev.com/frameworks/bootstraphttp://www.desarrolloweb.com/manuales/css3.htmlhttp://notepad-plus-plus.org/download/v6.2.3.htmlhttp://contenidoselearning.blogspot.com.es/2012/09/crear-temas-personalizados-de-chamilo.htmlhttp://contenidoselearning.blogspot.com.es/2012/05/como-crear-una-nueva-hoja-de-estilo.html


2/8

3. Men principal (color de fondo)Al abrir "default.css" se mostrar algo parecido a la siguiente imagen:

El selector del men principal es: .subnav .navbar-inner. El cdigo a editar ser el que seencuentra dentro de las llaves { ... }, marcado en gris, segn se muestra en la imagenanterior.

Para generar el cdigo a sustituir se ira a charliepark.org/bootstrap_buttons (generador decdigo css online). All se podr graduar el color y degradado deseado. En este caso seha seleccionado el que aparece por defecto.

Luego copiar el cdigo generado marcado en azul, segn se muestra a continuacin:

Y finalmente pegarlo en "default.css" entre las { ... }

.subnav .navbar-inner { eliminar y pegar el cdigo anterior aqu}
http://charliepark.org/bootstrap_buttons/http://4.bp.blogspot.com/-vw9M5rEkDSI/UOasRTWHVGI/AAAAAAAAAGM/y7xPNdl4nR0/s1600/Captura+de+pantalla+2013-01-04+a+la%28s%29+11.17.02.pnghttp://4.bp.blogspot.com/-1CWLjba4qDo/UOVuAmTFxsI/AAAAAAAAAF8/tAheOFF-0_Y/s1600/Captura+de+pantalla+2013-01-03+a+la%28s%29+12.19.48.pnghttp://charliepark.org/bootstrap_buttons/


3/8

El resultado ser algo parecido a la siguiente imagen:

Como se observa en la imagen anterior falta cambiar el color de las lneas divisorias delmen, el color del botn cuando est activado y cuando pasa el ratn por encima, paraello se har la misma operacin anterior.

3.1 Men principal (lneas divisorias)En el archivo "default.css" buscar el selector: .subnav .nav > li > a y modificar el cdigode colores hexadecimal que se encuentra marcado en gris en la siguiente imagen:

Para las lneas divisorias se utilizar un color azul ms oscuro, en hexadecimal sera:"00649B" por lo que se sustituir este cdigo de colores por el marcado en gris en la

imagen anterior. Se podr obtener el cdigo de un color en colorpicker.com
http://www.colorpicker.com/http://3.bp.blogspot.com/-wPDAG2iPRd8/UOv4kyqPSJI/AAAAAAAAAHA/1U-H7Kt3Byg/s1600/Captura+de+pantalla+2013-01-08+a+la%28s%29+10.52.36.pnghttp://4.bp.blogspot.com/-oz_QnF91idc/UOvpnvacbUI/AAAAAAAAAGs/dtE8w0Fmajw/s1600/localhost+screen+capture+2013-1-8-10-34-52.pnghttp://www.colorpicker.com/


4/8

3.2 Men principal (color del botn cuando estactivado y cuando pasa el ratn por encima)El selector para cuando el botn est activado es el que se muestra en la siguienteimagen. Copiamos el mismo cdigo de colores utilizado en las lneas divisorias "00649B"para sustituirlo por el cdigo marcado en gris.

El selector para cuando el ratn pasa por encima del botnes subnav .navbar-inner lia:hover. Le pondremos el mismo color "00649B" sustituyendo este por el que seencuentra marcado en la siguiente imagen:

Finalmente el men principal debera quedar como se muestra a continuacin:
http://4.bp.blogspot.com/-AHtvvvSYO-0/UOwFazz8iKI/AAAAAAAAAH4/fo3SUUPDnPE/s1600/localhost+screen+capture+2013-1-8-12-37-2.pnghttp://1.bp.blogspot.com/-059gy7cnDbg/UOwEHd_zNxI/AAAAAAAAAHo/guGqJRKqd1U/s1600/Captura+de+pantalla+2013-01-08+a+la%28s%29+12.33.12.pnghttp://3.bp.blogspot.com/-7YO0VR7MZBQ/UOwCtpDQXVI/AAAAAAAAAHQ/6bJmruxKXYY/s1600/Captura+de+pantalla+2013-01-08+a+la%28s%29+12.26.21.png


5/8

4. Cambiar el logoPara cambiar el logo simplemente sustituiremos la imagen del logo llamada "header-logo.png" que se encuentra en:

../main/css/mi_campus/images/header-logo.png

El logo que trae por defecto tiene una dimensin de 250px(ancho) y 70px(alto) por lo quela imagen a sustituir deber tener aproximadamente esas dimensiones.

Una vez sustituido el logo deber quedar algo como se muestra a continuacin:
http://4.bp.blogspot.com/-Qscdj0DA2Hc/UO1DYQgOdjI/AAAAAAAAAII/LFwfUNojJQU/s1600/localhost+screen+capture+2013-1-9-11-13-54.png


6/8

5. Cambiar pie de pgina (color)El pie de pgina es una imagen llamada "bg-footer.gif" que tambin se encuentra en:

../main/css/mi_campus/images/bg-footer.gif

Esta imagen solo es de 15px(ancho) y 96px(alto) la misma se repite de forma horizontalpara crear el pie de pgina.

Una vez sustituida la imagen quedar como se muestra a continuacin:

Se puede apreciar en la imagen anterior que an queda la parte inferior del pie de pginaen color naranja cuando debera ser de color negro "1C1C1C". Para ello en el archivo"default.css" buscar el siguiente selectorfooter.

Luego sustituir el cdigo de colores marcado en gris, segn se muestra a continuacin,por "1C1C1C" que es el cdigo de color negro utilizado en la imagen del pi de pgina.
http://2.bp.blogspot.com/-IoMRT8oW4z0/UO1Ip8sqC6I/AAAAAAAAAIo/p1NSXWwSCk8/s1600/Captura+de+pantalla+2013-01-09+a+la%28s%29+11.34.58.pnghttp://2.bp.blogspot.com/-uuof83qA-_M/UO1GqV2uiNI/AAAAAAAAAIY/bItlXggQJKY/s1600/localhost+screen+capture+2013-1-9-11-29-23.png


7/8

Finalmente se obtendr el siguiente resultado para el pie de pgina:

6. Cambiar el color a los enlaces

Si apreciamos la imagen anterior los enlaces son de color naranja.

Para cambiarle el color bastar con buscar el selector"a" en el arhivo"default.css" yreemplazar el cdigo de color marcado en gris como se muestra en la siguiente imagen:
http://2.bp.blogspot.com/-4Gx3rcrUV3w/UO1MUyxQcgI/AAAAAAAAAJQ/1cdxRWM4Ue4/s1600/Captura+de+pantalla+2013-01-09+a+la%28s%29+11.53.27.pnghttp://4.bp.blogspot.com/-E-G_Xd9D9qk/UO1JlQbJEMI/AAAAAAAAAI0/99sOqFBbOFE/s1600/localhost+screen+capture+2013-1-9-11-41-53.png


8/8

Reemplazando dicho cdigo por "BF0042" el resultado final quedar como se muestra acontinuacin:

ConclusionesCon este tutorial se ha personalizado las regiones ms relevantes del campus. Se podrapersonalizar ms, pero no es el objetivo de esta primera parte.

En prximos artculos se mostrar cmo modificar otras regiones as como la utilizacinde otros recursos muy tiles a la hora de disear o modificar una plantilla de Chamilo o unsitio web.
http://4.bp.blogspot.com/-brGVwvwMXRI/UO1RE4-h0FI/AAAAAAAAAJg/esIQeJbKYhc/s1600/localhost+screen+capture+2013-1-9-12-11-58.png

Chamilo 1 9 Css

Documents

Transcript of Chamilo 1 9 Css