Joomla - GNU - Linux - Programación

Escrito por Angus Yg : Metalero en Cursos, CSS Joomla A Fondo

Para embeberlo debemos utilizar las etiquetas HMTL:

<style type="text/css"> código css </style>

Para vincularlo, debemos poner un enlace dentro de head de la forma:

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

Donde estilo.css sería nuestro archivo de estilos.
Para el diseño de plantillas Joomla se utiliza el segundo caso con una pequeña modificación:

<link href=<?php echo $this->baseurl ?>/templates/mi_template/css/template_css.css" rel="stylesheet" type="text/css" />

Observen aquí que utilizamos código PHP para ubicar el directorio base de la instalación de Joomla (php echo $this->baserurl). Este código es muy utilizado dentro de las extensiones y es propio del CMS, y nos sirve para eso: saber cual es el directorio base de instalación. Asimismo algunas plantillas como Ja Teline, utilizan el siguiente:

<link rel="stylesheet" href="/<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

En este caso, la vinculación es a través de otro archivo: observen en la parte superior del template y verán que "include" un archivo php llamado ja_vars_1.5.php. Esto es porque esta plantilla trabaja con funciones de PHP y con clases, pero esa es otra historia, más cercana a la programación.

Otra forma de vincular el archivo de hojas de estilos es:

<link href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/template_css.css" rel="stylesheet" type="text/css" />

En este caso no solo estamos "cargando" el directorio base de Joomla sino que además estamos tomando de la configuración el nombre del template que coincide -generalmente- con el nombre de la carpeta donde está alojado.

Antiguamente, en versiones Joomla 1.0.x se usaba el código:

<link href="/<?php echo $mosConfig_live_site;?>/templates/viejotemplate/css/template_css.css" rel="stylesheet" type="text/css" /> 

que aún funciona en Joomla 1.5.x pero para eso debemos activar el plugin "legacy".

Para finalizar este pequeño capítulo, cabe destacar que cuando observamos el código fuente de una web hecha con Joomla, a traves de cualquier navegador que tenga esta función, veremos que hay muchos códigos CSS más embebidos, pero a no asustarse, no son nuestros, sucede que hay muchas extensiones que tienen sus propias hojas de estilo y que aparecen dentro del html al cargarlo.

Esto es, muchas veces, motivo de conflictos con ciertas plantillas ya que puede suceder que tanto nuestro código como el de alguna extensión usen el mismo identificador o selector. Un ejemplo típico de esto es Chrono Comments, un sistema de comentarios muy bueno y limpio, que incluye varios archivos de estilo y ocasiona más de un conflicto con ciertas plantillas, a veces un verdadero dolor de cabeza (aunque creo que ya se ha solucionado).

En el próximo capítulo haré una introducción a, selectores, identificadores y clases para luego ya empezar a codificar algo útil.