¿Por qué usar anulaciones CSS?
Siempre es una buena idea mantener sus estilos CSS separados del estilo de plantilla existente, si está utilizando una plantilla Joomla preconstruida.
- Es más fácil de mantener
- Sus cambios no se perderán si actualiza la plantilla
- Puede copiar / mover fácilmente las modificaciones a otra plantilla u otro sitio.
¿Cómo funciona la anulación de CSS?
CSS significa "Hojas de estilo en cascada", "Cascada" en este contexto, lo que significa que debido a que más de una regla de hoja de estilo podría aplicarse a una pieza particular de HTML, la regla utilizada se elige en cascada desde las reglas más generales a la regla específica requerida (el se elige la regla más específica), o en función del orden de las reglas para cualquier elemento (se elige la última regla encontrada).
Siempre que su archivo CSS personalizado se cargue después de los archivos CSS de plantilla predeterminados, puede agregar sus propios estilos para anular elementos específicos según sea necesario (hay algunas excepciones, más sobre eso a continuación).
Uso general
Para cargar una hoja de estilo personalizada en la <head>etiqueta de Joomla , se puede agregar el siguiente código al index.phparchivo de su plantilla ( YOURDOMAIN.COM/templates/yourtemplate/index.php), justo antes de la </head>etiqueta final para garantizar que su archivo se cargue en último lugar.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(El archivo CSS puede tener cualquier nombre y no tiene que estar en la subcarpeta / css /, pero es más limpio de esa manera).
También es posible agregar una <link>etiqueta normal , pero esta es menos flexible que la opción mencionada anteriormente:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!Importante
Algunas extensiones pueden cargar sus estilos CSS después del suyo (o incluso agregar estilos directamente en el archivo index.php), anulando así sus anulaciones. Esto generalmente se puede resolver agregando !importanta sus estilos, por ejemplo.h1{color:red!important;}
Uso en diferentes marcos
Ahora la parte divertida: muchos marcos de plantillas tienen la posibilidad de que los usuarios quieran hacer cambios en sus plantillas, agregando así una manera fácil de incluir sus anulaciones CSS. Estos son algunos de los métodos utilizados:
RocketTheme Gantry 4
Las plantillas RocketTheme funcionan con Gantry Framework, y un archivo CSS personalizado se cargará automáticamente si se encuentra. El archivo CSS debe colocarse en la /templates/yourtemplate/css/carpeta y el nombre debe ser YOURTEMPLATEFOLDER-custom.css.
Ejemplo: si está utilizando su Afterburner 2plantilla gratuita , el directorio de plantillas predeterminado es /templates/rt_afterburner2/. Agregue un archivo llamado rt_afterburner-custom.css(cuidadoso con guión bajo y guión) a la subcarpeta / css /, y el marco de pórtico lo cargará automáticamente.
Forma 5
Las plantillas de Shape 5 se envían con un custom.cssarchivo vacío en el subdirectorio / css / de su plantilla. Simplemente agregue sus estilos a este archivo y se incluirán en su diseño.
Gavick Pro
Las plantillas de Gavick Pro se envían con un overrides.cssarchivo vacío en el subdirectorio / css /. Pero tenga en cuenta que este archivo no se carga de forma predeterminada, debe activarlo Override CSSen la pestaña Configuración avanzada en la configuración de la plantilla.
Joomla Shine
Cree un archivo CSS personalizado en la / css / subcarpeta de su plantilla, por ejemplo, custom.cssy especifique el nombre del archivo en Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
Marco T3
Las plantillas basadas en el Marco T3 pueden o no incluir un custom.cssarchivo en la subcarpeta / css / de su plantilla (simplemente créelo si no está allí), pero cuando esté presente, el archivo se cargará después de cualquier otro archivo CSS.
Warp Framework
Las plantillas basadas en Warp Framework cargan automáticamente el custom.cssarchivo encontrado en la subcarpeta / css /. Se pueden cargar archivos CSS adicionales agregando
$this->warp->stylesheets->add('css:yourcssfile.css');
en el fichero /layouts/template.config.php.