Adding a custom CSS with Protostar/es: Difference between revisions
From Joomla! Documentation
Created page with "{{warning|El nombre del archivo debe ser <tt>user.css</tt> y no<tt>custom.css</tt>, ya que este es utilizado por algún editor de contenido. Consulte la discusión en GitHub p..." |
Created page with "[[Category:Template Management{{#Gestor de Plantillas:}}]] [[Category:Template Reference{{#Referencia de Plantillas:}}]] [[Category:Joomla! 3.x{{#Joomla! 3.x:}}]] Category:J..." |
||
| Line 30: | Line 30: | ||
}} | }} | ||
<noinclude> | <noinclude> | ||
[[Category:Template Management]] | [[Category:Template Management{{#Gestor de Plantillas:}}]] | ||
[[Category:Template Reference]] | [[Category:Template Reference{{#Referencia de Plantillas:}}]] | ||
[[Category:Joomla! 3.x]] | [[Category:Joomla! 3.x{{#Joomla! 3.x:}}]] | ||
[[Category:Joomla! 3.5]] | [[Category:Joomla! 3.5{{#Joomla! 3.5:}}]] | ||
[[Category:Joomla! Website Management]] | [[Category:Joomla! Website Management{{#Gestión de un siio web Joomla!:}}]] | ||
[[Category:Tutorials]] | [[Category:Tutorials{{#Tutoriales:}}]] | ||
[[Category:Beginners]] | [[Category:Beginners{{#Principiantes:}}]] | ||
</noinclude> | </noinclude> | ||
Revision as of 06:54, 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
- 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
File:J3x admin templates manager customise create new css-es.png
Ahora estás en un editor de código y puedes poner aquí tu código personalizado. Solo necesita poner lo que desea modificar. File:J3x admin templates manager edit user css-es.png
- 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. File:Firefox developer tools inspect user css-es.png
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í
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
[[Category:Template Management{{#Gestor de Plantillas:}}]]
[[Category:Template Reference{{#Referencia de Plantillas:}}]]
[[Category:Joomla! 3.x{{#Joomla! 3.x:}}]]
[[Category:Joomla! 3.5{{#Joomla! 3.5:}}]]
[[Category:Joomla! Website Management{{#Gestión de un siio web Joomla!:}}]]
[[Category:Tutorials{{#Tutoriales:}}]]
[[Category:Beginners{{#Principiantes:}}]]