J3.x

Adding a custom CSS with Protostar/es: Difference between revisions

From Joomla! Documentation

← Older edit
Created page with "* Valla a {{rarr|Extensiones,Plantillass}} y nuevamente '''Plantillas''' (menú directo o barra lateral izquierda). Revise que se encuentre en la opción '''Plantillas''' de l..."
No edit summary
 
(19 intermediate revisions by the same user not shown)
Line 2: Line 2:


{{Joomla version|version=3.5|time=and after}}
{{Joomla version|version=3.5|time=and after}}
El '''CSS''' de la plantilla '''Protostar''' puede ser modificado directamente en el  [[S:MyLanguage/J3.x:How to use the Template Manager|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 [[S:MyLanguage/J3.x:Updating from an existing version|Componente de Actualizacíon de Joomla!]].
El '''CSS''' de la plantilla '''Protostar''' puede ser modificado directamente en el  [[S:MyLanguage/J3.x:How to use the Template Manager|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 [[S:MyLanguage/J3.x:Updating from an existing version|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'''.
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 ==
==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-en.png]]
[[File:J3x admin templates manager templates-en.png]]
* Then open the template Protostar, click on '''Protostar Details and Files'''.  
* A continuación, abra la plantilla Protostar, haga clic en '''Detalles y Archivos de  la Plantilla Protostar'''.  
==Create a '''New File''' user.css==
==Crear un "Nuevo Archivo"' user.css==
* Click on the '''New File''' button
* Haga clic en el botón '''Archivo nuevo de extensiones'''
* It opens a modal window, select the location of the file, here the '''css''' folder on the left
* Vera una ventana modal, seleccione la ubicación del archivo, aquí la carpeta '''css''' a la izquierda
* Type '''user''' in the name field
* Escriba '''user''' en el campo de nombre del archivo
* Select '''css''' as the file type
* Seleccione '''css''' como el tipo de archivo
* Haga clic en el botón '''Crear'''
[[File:J3x admin templates manager customise create new css-en.png|800px]]
[[File:J3x admin templates manager customise create new css-en.png|800px]]


Now you are in a code editor, and you can put your custom code there.
Ahora estás en un editor de código y puedes poner aquí tu código personalizado.
You only need to put the changed properties.
Solo necesita poner lo que desea modificar.
[[File:J3x admin templates manager edit user css-en.png|800px]]
[[File:J3x admin templates manager edit user css-en.png|800px]]
* '''Save''', and you're done!
* Haga clic en el botón '''Guardar''', y listo!
You can see them applied on your page, with the '''Developer tools''' of Firefox or 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-en.png|800px]]
[[File:Firefox developer tools inspect user css-en.png|800px]]
{{tip|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
{{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}}


{{warning|The file name must be <tt>user.css</tt> and not<tt>custom.css</tt>, as it is used by some content editor.  
{{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.
See the discussion on GitHub for more details
Consulte la discusión en GitHub para obtener más detalles
https://github.com/joomla/joomla-cms/pull/4211#issuecomment-55096315
https://github.com/joomla/joomla-cms/pull/4211#issuecomment-55096315
}}
}}
<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

Other languages:
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

Retrieved from "https://docs.sandbox.joomla.org/index.php?title=J3.x:Adding_a_custom_CSS_with_Protostar/es&oldid=667695"