Agregue una hoja de estilo custom.css. si su plantilla no la recoge automáticamente, puede agregarla en su head.php, generalmente la ruta es: templates / templatename / tpls / blocks / head.php <link rel = "stylesheet" href = "/ templates / templatename / css / custom.css "type =" text / css "/>
Tony M
Respuestas:
22
¿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.
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
Para uso general, sugeriría usar en JHtml::_('stylesheet', 'path/to/file')lugar de addStyleSheetcomo ya se discutió en otra respuesta :) Aparte de eso, una buena respuesta. Definitivamente será útil para las personas
Lodder
Gracias @Lodder. Espero que esta información pueda ser útil para las personas. Con respecto a su sugerencia, leí el debate. ¿Cómo se JHtml::_puede usar con $this->template?
En realidad, los nuevos temas de cohetes usan MENOS. Todo lo que tiene que hacer es crear un archivo en la carpeta MENOS llamado template-custom.less y poner su código en eso. Entonces puedes disfrutar de los trucos que trae MENOS. Warp 7 le permite crear su propio "estilo" en la carpeta de estilos y en realidad puede pegar un archivo custom.css en ESA carpeta (dentro de su propia carpeta css). De esa manera, cada estilo puede tener su propio CSS personalizado. También hace frente a las actualizaciones de plantillas. El uso del archivo custom.css predeterminado significa que se sobrescribe cada vez que actualiza el tema.
Brian Peat
1
Gran respuesta y muy útil! Otra opción que le gustaría agregar para plantillas / marcos que no incluyen la provisión de archivos CSS personalizados es el uso de una extensión de terceros, como CSSConfig extensiones.joomla.org/extensions/style-a-design/templating/… que está diseñado para este propósito exacto.
Neil Robertson
7
Joomla 3.5+ (plantilla Protostar)
A partir de Joomla 3.5, puede crear un archivo llamado user.cssy colocarlo en:
templates / protostar / css / user.css
Nota: el nombre del archivo debe seruser.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.
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.
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.
Como muchos otros marcos de plantillas, Helix también ofrece la posibilidad 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.
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 proporcione 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.
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 tema del hidrógeno que se lanza 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 de átomo CSS / JS personalizada (una nueva característica 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 gantry-theme://acceso directo 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.
Respuestas:
¿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.
¿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 alindex.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.(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:!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 serYOURTEMPLATEFOLDER-custom.css.Ejemplo: si está utilizando su
Afterburner 2plantilla gratuita , el directorio de plantillas predeterminado es/templates/rt_afterburner2/. Agregue un archivo llamadort_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 activarloOverride 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 enExtensions -> 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 agregandoen el fichero
/layouts/template.config.php.fuente
JHtml::_('stylesheet', 'path/to/file')lugar deaddStyleSheetcomo ya se discutió en otra respuesta :) Aparte de eso, una buena respuesta. Definitivamente será útil para las personasJHtml::_puede usar con$this->template?JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');Joomla 3.5+ (plantilla Protostar)
A partir de Joomla 3.5, puede crear un archivo llamado
user.cssy colocarlo en:Nota: el nombre del archivo debe ser
user.cssLa plantilla protostar verificará si:
> 0.Si se cumplen ambas condiciones, importará automáticamente este archivo por usted.
Ver la solicitud de extracción en Github
fuente
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.
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.
Como muchos otros marcos de plantillas, Helix también ofrece la posibilidad 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.
fuente
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 proporcione 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.
fuente
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 tema del hidrógeno que se lanza 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 de átomo CSS / JS personalizada (una nueva característica 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:
El
gantry-theme://acceso directo 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:
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.
fuente