Adding a custom CSS with Protostar/es: Difference between revisions
From Joomla! Documentation
No edit summary |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 6: | Line 6: | ||
==Personalice la plantilla de forma segura == | ==Personalice la plantilla de forma segura == | ||
* Valla a {{rarr|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 . | * Valla a {{rarr|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- | [[File:J3x admin templates manager templates-en.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== | ==Crear un "Nuevo Archivo"' user.css== | ||
| Line 14: | Line 14: | ||
* Seleccione '''css''' como el tipo de archivo | * Seleccione '''css''' como el tipo de archivo | ||
* Haga clic en el botón '''Crear''' | * Haga clic en el botón '''Crear''' | ||
[[File:J3x admin templates manager customise create new css- | [[File:J3x admin templates manager customise create new css-en.png|800px]] | ||
Ahora estás en un editor de código y puedes poner aquí tu código personalizado. | Ahora estás en un editor de código y puedes poner aquí tu código personalizado. | ||
Solo necesita poner lo que desea modificar. | Solo necesita poner lo que desea modificar. | ||
[[File:J3x admin templates manager edit user css- | [[File:J3x admin templates manager edit user css-en.png|800px]] | ||
* Haga clic en el botón '''Guardar''', y listo! | * Haga clic en el botón '''Guardar''', y listo! | ||
Puedes ver los cambios aplicados en tu página con las '''Herramientas de desarrollo''' de Firefox o Chrome. | Puedes ver los cambios aplicados en tu página con las '''Herramientas de desarrollo''' de Firefox o Chrome. | ||
[[File:Firefox developer tools inspect user css- | [[File:Firefox developer tools inspect user css-en.png|800px]] | ||
{{tip|Con cualquier sobreescritura, no estamos seguros en qué orden se cargarán los archivos. Y con los optimizadores y compresores de CSS, puede que no sea como lo queremos. Entonces tenemos que usar la '''Especificidad''' en nuestras declaraciones CSS. Y esto está bien documentado aquí | {{tip|Con cualquier sobreescritura, no estamos seguros en qué orden se cargarán los archivos. Y con los optimizadores y compresores de CSS, puede que no sea como lo queremos. Entonces tenemos que usar la '''Especificidad''' en nuestras declaraciones CSS. Y esto está bien documentado aquí | ||
* https://developer.mozilla.org/en/docs/Web/CSS/Specificity}} | * https://developer.mozilla.org/en/docs/Web/CSS/Specificity}} | ||
| Line 30: | Line 30: | ||
}} | }} | ||
<noinclude> | <noinclude> | ||
[[Category:Template Management | [[Category:Template Management/es]] | ||
[[Category:Template Reference | [[Category:Template Reference/es]] | ||
[[Category:Joomla! 3.x | [[Category:Joomla! 3.x/es]] | ||
[[Category:Joomla! 3.5 | [[Category:Joomla! 3.5/es]] | ||
[[Category:Joomla! Website Management | [[Category:Joomla! Website Management/es]] | ||
[[Category:Tutorials | [[Category:Tutorials/es]] | ||
[[Category:Beginners | [[Category:Beginners/es]] | ||
</noinclude> | </noinclude> | ||
Latest revision as of 07:06, 22 May 2020
Joomla!
≥ 3.5
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 .
- A continuación, abra la plantilla Protostar, haga clic en Detalles y Archivos de la Plantilla Protostar.
Crear un "Nuevo Archivo"' user.css
- Haga clic en el botón Archivo nuevo de extensiones
- Vera una ventana modal, seleccione la ubicación del archivo, aquí la carpeta css a la izquierda
- Escriba user en el campo de nombre del archivo
- Seleccione css como el tipo de archivo
- Haga clic en el botón Crear
Ahora estás en un editor de código y puedes poner aquí tu código personalizado.
Solo necesita poner lo que desea modificar.
- Haga clic en el botón Guardar, y listo!
Puedes ver los cambios aplicados en tu página con las Herramientas de desarrollo de Firefox o Chrome.
A Tip!
Con cualquier sobreescritura, no estamos seguros en qué orden se cargarán los archivos. Y con los optimizadores y compresores de CSS, puede que no sea como lo queremos. Entonces tenemos que usar la Especificidad en nuestras declaraciones CSS. Y esto está bien documentado aquí
Warning!
El nombre del archivo debe ser user.css y nocustom.css, ya que este es utilizado por algún editor de contenido.
Consulte la discusión en GitHub para obtener más detalles
https://github.com/joomla/joomla-cms/pull/4211#issuecomment-55096315