La plantilla rhuk milkyway: los archivos CSS

Tags: CMS | diseño | gestor de contenidos | imagen | Joomla | plantillas

¿Qué es CSS?

Son las siglas de Cascading Style Sheets (Hojas de Estilo en Cascada). Sirven para asignar propiedades generales a la página de tal manera que se separa la presentación o el diseño de la página (toda la parte gráfica de la Web) de la propia estructura del HTML. Su funcionamiento es muy simple: se aplican reglas de estilo a los elementos HTML entre las que se incluyen: el tamaño, el color de fondo, el color del texto, la posición de los elementos, los márgenes, los tipos de letra, etc.

Cada uno de estos estilos está compuesto por los siguientes elementos:

• Un selector: permite seleccionar el tipo de elemento HTML al que se le aplicará el estilo.

• Una o más declaraciones: definen precisamente el aspecto del estilo

• A su vez cada declaración está compuesta por una propiedad y un valor

Por ejemplo, en la siguiente captura de pantalla de una parte del código mostrado en el archivo template.css de la plantilla rhuk milkyway se define el estilo para el selector body: es decir, las reglas de estilo que van a afectar al contenido de toda la página.

Incluye 5 declaraciones, siendo la propiedad de la primera de ellas font-family su valor Helvetica, Arial, sans-serif, es decir, es el formato de fuente que será utilizado, y por el orden de familias de fuentes establecido. Observa que entre las declaraciones establecidas, el programador de la plantilla ha previsto que el tamaño del texto font-size sea de 12 píxeles y el color establecido para el mismo cercano al negro.

Fíjate que el código debe ser escrito atendiendo a criterios ya establecidos: las declaraciones asignadas a un mismo selector deben escribirse entre llaves y cada declaración debe concluir con el signo punto y coma.

La carpeta y los archivos CSS en la plantilla rhuk milkyway

Ya te hemos indicado que una de las carpetas básicas en cualquier plantilla que utilices en Joomla es la carpeta css que incluye todos los archivos css responsables de la apariencia del sitio. Acude por tanto a la carpeta rhuk milkyway para acceder a esta carpeta y a los archivos en ella contenidos.

En la administración de Joomla idéntico resultado es el que adquieres si en el Gestor de plantillas haces clic en el nombre de la plantilla rhuk milkyway y, en la página que aparece en pantalla, en el botón Editar CSS.

Cada archivo css se corresponde con su homónimo en la carpeta css de la carpeta raíz de la plantilla. De todos ellos el que afecta directamente al diseño general del sitio es el archivo template.css. Ya te hemos indicado que lo recomendable es editar este archivo fuera de Joomla. Puedes hacerlo directamente con un editor de textos o bien utilizando programas específicos para la edición de este tipo de archivos: en el caso de Ubuntu 10.10 dispones de los programas Bluefish y Quanta Plus (algo parecido a un dreamweaver para Linux) para realizarlo (ambos fácilmente instalables desde Synaptic): utilizo este segundo al ser más intuitivo y permitir visualizar los cambios realizados instantáneamente.

Algunos ejemplos de edición

El ancho de la plantilla

En el archivo template.css puedes ver con qué valor concreto se corresponden los tamaños de la plantilla (aquellos que podíamos configurar en los parámetros de configuración de la plantilla). Y por supuesto, si no son de tu interés siempre puedes cambiarlos por tus propias medidas.

Por ejemplo, el tamaño fluido máximo está establecido como mínimo en 750 píxeles y como máximo en 1050 píxeles.

Las dimensiones del logo que se muestra en la cabecera

Si recorres el código del archivo template.css puedes observar las características concretas que debe tener el logo que se incluya en su cabecera: su anchura (width) mide 298 píxeles y su altura (height) es de 75 píxeles. Debes tenerlo en consideración si deseas modificar el logo porque necesitas en este caso una imagen con estas dimensiones.

El código anterior te indica que la imagen del logo se denomina mw_joomla_logo.png y se encuentra en la carpeta images de la carpeta raíz de la plantilla (background – fondo).

Observa que si, en efecto, acudes a la carpeta rhuk milkyway de la carpeta templates de Joomla y localizas este archivo en la carpeta images la imagen en cuestión tiene estas dimensiones.

Por tanto, si deseas sustituir este logo por otro tuyo, personalizado, debes respetar estas dimensiones, el nombre del archivo y su formato, a no ser que modifiques este código en el archivo template.css.

La cabecera del sitio

Por un artículo anterior (el archivo index.php) ya conoces que la cabecera se encuentra situada en la posición top de la plantilla, está dividida en dos secciones, la sección izquierda (header_l) y la sección derecha (header_r) y que, es precisamente en la sección derecha donde se muestra el logo.

Este archivo template.css te muestra cuáles son las características de diseño que va a tener la cabecera del sitio en esta plantilla. Observa que su altura (height) mide 90 píxeles (el logo que va incluido en su interior ya has visto que mide 75 píxeles)

¡¡¡Atención!!!

Lógicamente, todos estos valores, en conjunción, hacen que la plantilla tenga el aspecto concreto que se muestra. Si deseas modificar / editar la plantilla con otros valores a los establecidos de manera predeterminada, deberás revisar todos los códigos que afectan al elemento en cuestión. Por ejemplo, no te va a servir de nada cambiar el tamaño del logo (vamos a suponer que has diseñado una imagen para la cabecera de dimensiones 950 x 75 píxeles) si no cambias en el archivo template.css los valores correspondientes a las dimensiones del logo que se adapten a la nuevo imagen.

Nos ocuparemos de esta cuestión concreta de cómo sustituir el logo por defecto de la plantilla por uno propio en un posterior artículo, pero creo que ya vas intuyendo por donde va a discurrir nuestro tutorial.

Joomla - Plantillas