Adding a custom CSS with Protostar/es: Difference between revisions
From Joomla! Documentation
Created page with "* A continuación, abra la plantilla Protostar, haga clic en '''Detalles y Archivos de la Plantilla Protostar'''." |
Created page with "==Crear un "Nuevo Archivo"' user.css==" |
||
| Line 8: | Line 8: | ||
[[File:J3x admin templates manager templates-es.png]] | [[File:J3x admin templates manager templates-es.png]] | ||
* A continuación, abra la plantilla Protostar, haga clic en '''Detalles y Archivos de la Plantilla Protostar'''. | * A continuación, abra la plantilla Protostar, haga clic en '''Detalles y Archivos de la Plantilla Protostar'''. | ||
== | ==Crear un "Nuevo Archivo"' user.css== | ||
* Click on the '''New File''' button | * Click on the '''New File''' button | ||
* It opens a modal window, select the location of the file, here the '''css''' folder on the left | * It opens a modal window, select the location of the file, here the '''css''' folder on the left | ||
Revision as of 06:30, 22 May 2020
El CSS de la plantilla Protostar puede ser modificado directamente en el Gestor de Plantillas. Pero el problema con modificar los archivos del núcleo para nuestras necesidades (Joomla o una extensión), es que pueden ser sobreescritos con una actualización y por el Componente de Actualizacíon de Joomla!. Así que para evitar agregar CSS personalizado una y otra vez, existe una simple solución desde Joomla! 3.5.
Personalice la plantilla de forma segura
- Valla a Extensiones → Plantillass y nuevamente Plantillas (menú directo o barra lateral izquierda). Revise que se encuentre en la opción Plantillas de la barra lateral izquierda .
File:J3x admin templates manager templates-es.png
- A continuación, abra la plantilla Protostar, haga clic en Detalles y Archivos de la Plantilla Protostar.
Crear un "Nuevo Archivo"' user.css
- Click on the New File button
- It opens a modal window, select the location of the file, here the css folder on the left
- Type user in the name field
- Select css as the file type
Now you are in a code editor, and you can put your custom code there.
You only need to put the changed properties.
- Save, and you're done!
You can see them applied on your page, with the Developer tools of Firefox or Chrome.
With any overrides, we are not sure in which order files will be loaded. And with CSS optimisers and compressors, it may not be how we want it. So we have to use Specificity in our CSS declarations. And this is well documented here
The file name must be user.css and notcustom.css, as it is used by some content editor.
See the discussion on GitHub for more details
https://github.com/joomla/joomla-cms/pull/4211#issuecomment-55096315