La personalización de Gekko se realiza por medio de Hojas de Estilo en Cascada también conocidas como CSS. Esta sección pretende dar un ejemplo de desarrollo directo de hojas de estilo, para saber más acerca de hojas de estilo así como de la gran cantidad de opciones que tienes disponibles consulta la especificación CSS2.
Lo primero que hay que hacer es ubicar nuestro documento CSS dentro de ./templates/default, en el caso de que en nuestra hoja de estilo se utilizen imágenes, fuentes diferentes, etc generamos un directorio en la ruta ./templates/default/css con el mismo nombre que nuestro archivo css pero sin la extensión, este directorio será utilizado como almacén en las rutas del documento para los archivos enlazados.
![]() | Una forma sencilla de comenzar es copiar el archivo default.css con el nombre del estilo que planeamos diseñar y su respectivo directorio dentro de ./templates/default/css |
A continuación se enlistan los principales aspectos que podemos personalizar de nuestro sitio, además se incluirá un ejemplo que se irá desarrollando al par de la lectura de esta sección. El nombre de nuestro estilo de ejemplo tiene el increíble y original nombre de "mi_estilo" y lo guardaremos como mi_estilo.css
Para cambiar el fondo que tendra nuestro sitio el TAG a modificar es el de BODY en su propiedad background, además de ello este TAG nos permite cambiar el tipo, estilo y tamaño que tendrá toda la página por "default". Otra propiedad importante en este TAG es la de "padding", ya que determina la distancia que existira entre el primer pixel de nuestro documento y el "container" que utilizaremos.
/* Ejemplo: */ BODY { font-family: verdana, sans; // Tipo de Fuente que predominará en el Sitio color: #395d9a; font-style: bold; font-size: 9pt; background: #fe9130; // El valor f2cf42 nos permite asignar un color de fondo a un tono naranja padding: 10px; line-height: 150%; } |
El contenedor es la parte de Gekko en donde es limitado el tamaño de nuestro "framework" y es identificado por el ID #container. Para cambar el ancho de nuestro #container podemos agregar la propiedad width, teniendo en cuenta que el valor que agreguemos será el que utilizaremos como referencia en nuestra imagen del encabezado.
/* Ejemplo: */ #container { background: #ffffff; border: 1px solid #f7a65d; margin: auto; // Utilizamos la propiedad Auto para que el contenedor quede centrado en el navegador padding: 7px; // Distancia que existirá entre el borde del contenedor y el borde del framework width: 850px; // Limitamos nuestro contenedor con un ancho de 850 pixeles } |
Como su nombre lo dice, estos ID controlan el esqueleto del sitio. En esta parte podemos cambiar las propiedades de nuestras secciones derecha, izquierda central, etc.
/* Ejemplo: */ #framework { //Esqueleto del sitio width: 100%; } #td_blockT { //Modifica la parte de los Bloques Superiores padding: 0px; } #td_blockL, #td_blockR { //Modifica la sección derecha e izquierda del esqueleto width: 180px; padding: 8px; vertical-align: top; } #td_blockC { //Modifica la sección central del esqueleto padding: 8px; vertical-align: top; } #td_blockD { //Modifica la parte inferior del esqueleto vertical-align: top; } #blockC { //Se puede modificar las secciones centrales entre los bloques vertical-align: top; } |
![]() | Nota: Para poder identificar cada una de las partes , pueden asignar un color diferente con la propiedad background, y así visualizarlos con mayor facilidad. |
Para cambiar la imagen de la cabecera que aparece en el sitio nos ubicamos en el ID #pageheader.
Ahora bien, dependiendo del ancho que delimitamos en nuestro #container es la imagen que utilizaremos. En el ejemplo anterior (de #container) se limitó a 850 pixeles, por lo que ese será el ancho de nuestra imagen, la cual será almaceada en ./templates/default/css/mi_estilo donde "mi_estilo" es el nombre de la Hoja de Estilo que estamos creando.
La propiedad height nos dará la altura máxima que tendra nuestra imagen.
/* Ejemplo: */ #pageHeader { background: url(css/mi_estilo/nustra_imagen.png) no-repeat; height: 220px; display: block; } |
/* Ejemplo: */ #pageHeader H1 { font-size: 25pt; color: #fe9130; padding: 0px; position: relative; border: 0; top: 40px; left: 30px; display: inline; } #pageHeader H2 { margin: 0px; padding: 0px; font-size: 8pt; color: #9bac18; font-style: italic; border: none; position: relative; top: 70px; left: 70px; } |
El ID "#pageFooter" modifica el texto que contiene nuestra "Nota de copyright", la cual configuramos en nuestra instalación de Gekko o dentro del Panel de Administración
/* Ejemplo: */ #pageFooter { text-align:center; padding: 8px; font-size: 7.5pt; font-style: bold; background: #fe9130; } |
La nota de página es un pequeño bloque de texto comúnmente ubicado en la parte inferior del diseño. Es, por defecto, la parte que nos indica el tiempo de generación, consultas, banner de Gekko, etc. Los estilos de esta Nota pueden ser modificados en el id "#pageNote"
/* Ejemplo: */ #pageNote { padding: 8px; font-style: bold; color: #FFFFFF; font-size: 7.5pt; text-align: right; } |
Cada uno de los bloques puede tener las propiedades de las fuentes diferentes a las predifinadas en el BODY, así como cambiar el color y tipo de borde que tienen por default.
/* Ejemplo: */ .ContentBlock, .block { margin-bottom: 10px; padding: 8px; display: block; font-size: 9pt; background: #FFFFFF; border: 1px solid #fe9130; } .block { font-size: 8pt; color: #0C0C0C; background: #FFFFFF; border: 1px solid #fe9130; padding: 5px; margin-bottom: 8px; } .block .link { padding: 0px 10px 0px 10px; } |
Podemos modificar los diferentes encabezados (o títulos) que existen desde el H1 hasta el H5, por lo general la ubicación de cada uno de los títulos como se indica en el siguiente
/* Ejemplo: */ /* H1 .- Se encuentra en títulos principales, ya sea como nombre de una sección, nombre un post o de una noticia. */ H1, .h1 { border-bottom: 1px solid #ef8220; color: #ef8220; font-size: 18pt; margin: 5px 0px 8px 0px; padding-bottom: 12px; padding-left: 0px; } /* H2 .- De manera de subtítulo o categrorías de un tema principal, tal como en la parte administrativa y el título de cada una de as secciones. */ H2, .h2 { padding-bottom: 6px; border-bottom: 1px solid #efa059; margin: 3px 0px 6px 0px; color: #efa059; font-size: 15pt; } /* H3 .- El nombre de cada uno de los bloques */ H3, .h3 { margin: 3px 0px 8px 0px; border-bottom: 1px solid #ffa229; padding-bottom: 4px; color: #ffa229; font-size: 12pt; } H4, .h4 { margin: 5px 0px 5px 0px; padding: 3px; color: #fcd7a7; font-size: 13px; } H5, .h5 { margin: 5px 0px 5px 0px; padding: 3px; color: #fcd7a7; font-size: 14px; } |
![]() | Las clases, como .h1, .h2, no se ocupan regularmente, sin embargo se agregan por si algun otro TAG (por ejemplo SPAN) necesita ser semejante a un título. |
En estos TAG podemos modificar el estilo, color y tipo de fuentes así como el efecto visual que nos mostrará a la hora de colocar el mouse por encima de este
/* Ejemplo: */ A, A:link, A:visited { color: #9bac18; text-decoration: none; } A:hover { color: #c8e106; text-decoration: underline; } A IMG { border: none; } |
Al igual que ocurre con los links, podemos definir efectos visuales para estos objetos, ya sea cuando este encima, tenga el foco o los valores con los que cargará desde el comienzo.
/* Ejemplo: */ INPUT, SELECT, TEXTAREA { color: #0c0c0c; background: #ffffff; border: 1px solid #fe9130; font-size: 8pt; margin: 1px; margin-bottom: 5px; } INPUT:hover, TEXTAREA:hover { color: #0c0c0c; background: #ffe083; } INPUT:focus, TEXTAREA:focus { color: #000; background: #FBFDFF; } INPUT.text, TEXTAREA { padding: 5px; } BUTTON { font-weight: bold; color: #fe9130; background: #ffe083; border: 1px solid #fe9130; margin: 0px 1px 0px 1px; padding: 1px; vertical-align: middle; font-size: 8pt; } BUTTON:hover { color: #cc9a02; background: #ffe083; border: 1px solid #fe9130; } BUTTON IMG { float: left; margin-right: 3px; } |
.buttons { color: #999999; font-size: 7.5pt; text-align: right; margin: 6px; border: 1px solid #eeeeee; background: #fdfdfd; padding: 3px; letter-spacing: normal; } |
Para diseñar los paneles, como el de Administración o el de Usuario modificamos las siguientes Clases
/* Ejemplo: */ /* Bloque de panel */ .panel { border: 1px solid #eeeeee; margin: 8px; padding: 10px; background: #ffffff; -moz-border-radius: 12px; display: block; } /* Un ícono dentro del panel */ .panel .icon { width: 90px; height: 90px; float: left; margin: 8px; font-size: 7.5pt; text-align: center; display: block; border: 1px solid #ffffff; padding: 5px; -moz-border-radius: 12px; } /* aspecto de los enlaces en íconos */ .panel .icon A { text-decoration: none; } /* un icono señalado con el mouse */ .panel .icon:hover { opacity: 0.7; background: #feb747; border: 1px solid #f89b09; } |
Estas clases permiten cambiar el color que tendra nuestra barra de progreso (de la encuesta o estadísticas por ejemplo), así como la manera en la que se muestra nuestro calendario.
Ejemplo: .chart { font-size: 7pt; } .chart .bar { background: #eeeeee; } .chart .progress { background: #fe9130; height: 8px; display: block; } /* aspecto exterior del calendario */ .calendar { width: 100%; color: #666; font-size: 7pt; text-align: center; } /* dias */ .calendar TD { background: #ffe083; border: 1px solid #fe9130; color: #b1b0b0; padding: 1px; } /* cabezera del calendario */ .calendar .head TD { font-weight: bold; background: #fe9130; border: 1px solid #ffe083; color: #FCFCFC; } /* un enlace */ .calendar A { font-weight: bold; } |
Estas clases son las que utiliza el tagboard, foros y algunos bloques para id indicando alternancia entre textos que se escriben.
/* Ejemplo: */ .sw_class_0 { padding: 2px; background: #ffe083; border: 1px solid #fe9130; color: #bd8327; } .sw_class_1 { padding: 2px; color: #ffffff; background: #fe9130; } |
Por favor consulta Sección 6.7.2 para saber como empaquetar tu recién creado tema si deseas distribuirlo.