🌍
Español
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
guia_del_usuario:pmf:personalizar_la_apariencia_css [2013/05/21 16:30] albertparera [How To : change the CSS properties] |
— (actual) | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== Personalizar la apariencia (CSS) ====== | ||
| - | ===== Introducción ===== | ||
| - | |||
| - | El lenguaje de marcado hipertextual HTML y las reglas de estilo en cascada CSS son dos de las principales tecnologías para la creación de páginas Web. HTML proporciona la estructura de la página y CSS el diseño visual para una gran variedad de dispositivos. | ||
| - | |||
| - | El lenguaje basado en reglas de estilo en cascada (//Cascading Style Sheets //) es el responsable de aplicarle estilo a su galería. Permite personalizar los colores, los tipos y tamaños de fuentes, la posición de los elementos... | ||
| - | |||
| - | <WRAP info 65% center round>__//**Aprenda CSS**//__ | ||
| - | * [[http://learn.shayhowe.com/html-css|A Beginner’s Guide to HTML & CSS.]] Una web informativa para principiantes. | ||
| - | * [[http://www.w3.org/standards/webdesign/htmlcss|W3C]] W3C es el consorcio donde se definen los estándares para las aplicaciones web. Contiene la [[http://www.w3.org/2009/cheatsheet/|Cheat Sheet]], una herramienta de código abierto disponible gratuitamente para desarrolladores web que proporciona un acceso rápido a información útil a partir de una variedad de especificaciones publicadas por el W3C, un [[http://jigsaw.w3.org/css-validator/validator.html.en|validador en línea]] y mucho más. | ||
| - | * [[http://www.w3schools.com/css/|CSS School]], tutoriales interactivos muy bien realizados para verdaderos principiantes. Su lectura es totalmente recomendable: [[http://www.w3schools.com/css/css_intro.asp|Introducción]] [[http://www.w3schools.com/css/css_syntax.asp|Sintaxis]] y selectores [[http://www.w3schools.com/css/css_id_class.asp|id y class]] | ||
| - | </WRAP> | ||
| - | ===== Requisitos ===== | ||
| - | |||
| - | Dependiendo de tu navegador: | ||
| - | |||
| - | * **Firefox**: instalar la extensión Firebug. pulsar F12, o clic derecho para abrir el menú contextual y seleccionar "Inspeccionar elemento". | ||
| - | * **Internet Explorer**: pulsar "F12". | ||
| - | * **Opera**: utilizar Opera Dragonfly presionando Ctrl + May + I para Pc, o ⌘ + ⌥ + I para Mac. Puedes también hacer clic derecho para abrir el menú contextual y seleccionar "Inspeccionar elemento". | ||
| - | * **Google Chrome**: pulsar "F12", y el icono lupa para inspeccionar un elemento. | ||
| - | * **Safari**: ir a Editar->Preferencias->Avanzadas y seleccionar "Activar menú de desarrolladores". Aparecerá un nuevo menú entre Favoritos y Ventanas. Selecciona "Mostrar inspector web". | ||
| - | ===== Localizar selectores ===== | ||
| - | |||
| - | Cada elemento HTML está accesible mediante CSS por medio de un selector. Para entenderlo mejor, puede leerse | ||
| - | [[http://www.w3schools.com/css/css_syntax.asp|Syntax]] and [[http://www.w3schools.com/css/css_id_class.asp|Id and Class]]. | ||
| - | |||
| - | Este es un ejemplo de cómo puede accederse y modificarse de forma fácil al código html/css de cualquier página web. Con Firebug, aparece una nueva ventana en Firefox (ver **Fig.01**). | ||
| - | |||
| - | <WRAP smaller centeralign> | ||
| - | {{ :guia_del_usuario:pmf:03-05-2012_20-37-49.jpg?nolink& |Fig.01 Menú Firebug}}\\ | ||
| - | |||
| - | //**Fig.01** Menú Firebug// | ||
| - | </WRAP> | ||
| - | |||
| - | \\ | ||
| - | **Fig.01** ilusta la pestaña HTML donde puede visualizarse el contenido de cualquier página web. Puede verse el código interpretado por el navegador. | ||
| - | |||
| - | La ventana separa dos zonas: | ||
| - | - La primera (izquierda), contiene el código HTML.\\ <wrap info>__Info__ :</wrap> La zona destacada en azul es la que correspondiente a la señalada por el puntero del ratón. | ||
| - | - La segunda (derecha) muestra todas las reglas CSS aplicadas a cada elemento HTML seleccionado. Muestra también el selector usado para aplicar las propiedades en cada elemento html, y dónde se ubica el código -en qué archivo y en qué líneas-. Las propiedades pueden cambirse al vuelo clicando sobre el valor y/o la propiedad. Dichos cambios son aplicados instantáneamente sin necesidad de refrescar la página. | ||
| - | ===== Cómo cambiar las propiedades CSS ===== | ||
| - | |||
| - | Tal y como acabamos de ver, las propiedades puede cambiarse sobre la marcha, deshabilitarlas e incluso crear otras nuevas. | ||
| - | ===== How To : save the changes in my Piwigo ===== | ||
| - | |||
| - | > In the forum someone gave you a piece of CSS code ?\\ | ||
| - | > You have played with one of the tools previously mentioned, and you want to save your changes ?\\ | ||
| - | |||
| - | You might have noticed that Firebug doesn't change the files : if you refresh the page, you will loose all your changes\\ | ||
| - | <wrap important>If you follow that tutorial, you will NOT loose your changes during updates.</wrap> | ||
| - | |||
| - | |||
| - | Go to **[ Administration >> Plugins >> LocalFiles Editor]]((It needs to be activated!)) >> Tab "//CSS//" ]**\\ | ||
| - | There you can choose in the drop-down menu between ''local-rules.css'' and a all the themes enable on your gallery. | ||
| - | |||
| - | * ''local-rules.css'' is a file loaded by Piwigo whatever the theme : if your CSS change need to be applied to all themes, select it. | ||
| - | * If you select a theme, the CSS code written will be loaded only for that theme. In most of the case, it's recommend to apply the CSS code to one theme.\\<wrap info>__Info__ :</wrap>For a parent theme, his *-rules.css file will be loaded for him-self and his child themes! So a child theme can have several local-rules files loaded. | ||
| - | |||
| - | Now just copy/past your CSS code and save. The effects should be seen immediately : if not, try to refresh the cache of your browser and purge the Purge compiled templates, in **[ Tools >> Maintenance>> ]**\\ | ||
| - | |||
| - | |||
| - | <WRAP center round info 60%> | ||
| - | If you need to add comments to remember what a code do, just add two slashes before your text and the line will not be interpreted. | ||
| - | |||
| - | Illustration :\\ | ||
| - | <code css> | ||
| - | // It hides the menu of my gallery | ||
| - | #menubar { | ||
| - | display: none; | ||
| - | } | ||
| - | </code> | ||
| - | </WRAP> | ||
| - | |||
| - | |||
| - | |||
| - | ===== FAQ ===== | ||
| - | |||
| - | === Do I need to copy/paste all the content of a theme.css ? === | ||
| - | |||
| - | Absolutely not!\\ | ||
| - | The CSS in *-rules.css will overload the CSS contains in default CSS files like the theme.css of the theme you are changing. | ||
| - | |||
| - | === Where are saved/stocked my changes ? === | ||
| - | |||
| - | The CSS files generated by LocalFiles Editor are in the folder: | ||
| - | ./piwigo/local/css/ | ||
| - | They are named *-rules.css with * is the name of a theme. | ||