it-swarm-es.tech

¿Cómo anulo los estilos CSS en mi plantilla?

Cuando utilizo una plantilla Joomla gratuita/comercial de Template Club X/Y/Z, ¿cuál es la mejor manera de incluir mis propios estilos CSS?

21
johanpw

¿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 algunos excepciones, más sobre eso a continuación).

Uso general

Para cargar una hoja de estilo personalizada en la etiqueta Joomla <head>, Se puede agregar el siguiente código al archivo index.php De su plantilla (YOURDOMAIN.COM/templates/yourtemplate/index.php), Justo antes del final </head> 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 etiqueta normal <link>, Pero esta es menos flexible que la opción mencionada anteriormente:

<link rel="stylesheet" href="/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 !important A 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 carpeta /templates/yourtemplate/css/, Y el nombre must be YOURTEMPLATEFOLDER-custom.css.

Ejemplo: Si está utilizando su plantilla gratuita Afterburner 2, El directorio de plantillas predeterminado es /templates/rt_afterburner2/. Agregue un archivo llamado rt_afterburner-custom.css (Cuidado con guiones bajos y guiones) a la subcarpeta/css /, y el marco de trabajo Gantry lo cargará automáticamente.

Forma 5

Las plantillas de Shape 5 se envían con un archivo custom.css 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 archivo overrides.css Vacío en el subdirectorio/css /. Pero tenga en cuenta que este archivo no se carga de forma predeterminada, debe activar Override CSS En 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, p. custom.css Y especifique el nombre del archivo en Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).

Marco T

Las plantillas basadas en el Marco T3 pueden o no incluir un archivo custom.css 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.

Marco Warp

Las plantillas basadas en Warp Framework cargan automáticamente el archivo custom.css Que se encuentra en la subcarpeta/css /. Se pueden cargar archivos CSS adicionales agregando

$this->warp->stylesheets->add('css:yourcssfile.css');

al archivo /layouts/template.config.php.

22
johanpw

Joomla 3.5+ (plantilla Protostar)

A partir de Joomla 3.5, puedes crear un archivo llamado user.css y colóquelo en:

templates/protostar/css/user.css

Nota: el nombre del archivo debe ser user.css


La plantilla protostar verificará si:

  • El archivo existe
  • El tamaño del archivo es > 0.

Si se cumplen ambas condiciones, importará automáticamente este archivo por usted.

Vea el Solicitud de extracción en Github

7
Lodder

Marco Helix (JoomShaper)

Otro marco de plantilla de Joomla, que facilita el flujo de trabajo de personalización.

Las plantillas de Helix Framework también proporcionan una manera fácil de agregar sus estilos personalizados con 2 métodos convenientes.

  1. En el panel de control de la plantilla en el backend, hay un campo CSS personalizado. Aquí puede escribir su CSS, que se agregará como un elemento de estilo en la sección de cabecera de sus páginas y, como tal, también tendrá prioridad sobre otros archivos CSS externos. Por supuesto, esta opción no es la ideal, si planea escribir un montón de líneas de CSS, por lo tanto, hay un segundo método.

  2. Como muchos otros marcos de plantillas, Helix también proporciona la capacidad de crear su propio archivo custom.css. Simplemente créelo y colóquelo dentro de la carpeta css de la plantilla. La plantilla lo analizará y lo incluirá en la sección de encabezado de sus páginas.

5
FFrewin

Johanpw ha hecho un muy buen trabajo con su respuesta a su propia pregunta ... especialmente con respecto a las anulaciones de css para muchas plantillas comerciales.

Solo me gustaría agregar mis dos centavos aquí ...

Como subrayó Johanpw, la creación recomendada de anulaciones CSS es la práctica recomendada. Mantener su CSS personalizado en un solo archivo que sabe que no se eliminará ni se anulará después de una actualización es esencial.

Es importante recordar esto para todas las extensiones de Joomla. No intente cambiar el archivo css principal de un módulo o componente. En su lugar, intente crear su propio archivo template.css personalizado, cárguelo al final y cree todos sus estilos personalizados.

En los casos en que una plantilla comercial no proporciona una forma de agregar una anulación de CSS, puede usar una extensión como esta: Agregar CSS personalizado , que permite exactamente esto. Para crear su archivo de anulación de CSS personalizado y cargarlo al final.

Otra opción que suelo hacer en los sitios que administro es modificar la plantilla y agregar mi propio enlace a mi archivo custom.css , justo antes de la etiqueta de cierre de la plantilla. Esta es una modificación menor, fácil de recordar y restaurar, que estoy bien para tratar, cuando llegue una actualización de plantilla.

3
FFrewin

Pórtico 5 (RocketTheme)

Gantry 5 es la última versión del popular marco de plantillas y ofrece muchas características y capacidades nuevas.

Con respecto a las anulaciones de CSS, hay mucha flexibilidad y opciones.

Tomando el Hydrogen Theme que se publica como una plantilla estándar de Gantry 5, proporciona una carpeta llamada personalizada.

Esta carpeta se proporciona para que el usuario coloque sus archivos/anulaciones personalizados para la estructura/plantilla de pórtico (que no debe confundirse con las anulaciones de plantilla de Joomla, que permanecen en la carpeta plantilla/html). Puede colocar allí su archivo custom.css. Luego, a través del Panel de administración de plantillas de pórtico, puede personalizar sus diseños de plantilla y usar una Partícula personalizada CSS/JS Atom (una nueva función de pórtico 5 ), para agregar su custom.css a la plantilla. Gantry 5 también proporciona los llamados enlaces de flujo , (como accesos directos), para vincular fácilmente su archivo custom.css.

Entonces, desde el interior de la partícula Atom, la vincularía usando:

gantry-theme://custom/thing.css

El acceso directo gantry-theme:// Siempre se referirá a la carpeta de la plantilla de pórtico actual.

El uso de este enfoque es una manera eficiente de agregar custom.css para esquemas de plantilla específicos de su plantilla de gantry5.

Un segundo enfoque, que funciona globalmente para toda la plantilla de pórtico, es agregar un archivo custom.scss , dentro de:

template_directory/custom/scss/custom.scss

Al hacerlo, gantry5 siempre cargará y compilará este archivo scss, y cualquier regla css que haya aplicado anulará las reglas predeterminadas de la plantilla.

Dentro del archivo scss estás perfectamente bien usando SCSS o simplemente css. El compilador puede compilar ambos.

3
FFrewin