🌍
Español
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
guia_del_usuario:pmf:personalizar_la_apariencia_css [2013/05/19 17:22] albertparera [Introduction] |
— (actual) | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== Personalizar la apariencia (CSS) ====== | ||
| - | ===== Introduction ===== | ||
| - | |||
| - | 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 muy útil para personalizar su galería. Permite cambiar los colores, los tipos y tamaños de fuentes, las posición de 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 website]] El consorcio W3C donde se definen loes estándares para las aplicaciones web. Contiene [[http://www.w3.org/2009/cheatsheet/|a cheat-sheet -a database of all CSS markups and HTML Elements-]], an [[http://jigsaw.w3.org/css-validator/validator.html.en|online validator]] and much more. | ||
| - | * [[http://www.w3schools.com/css/|CSS School]] Interactive tutorials, very well done and **for absolute beginners. It's more than recommended to read those articles** : [[http://www.w3schools.com/css/css_intro.asp|Introduction]] [[http://www.w3schools.com/css/css_syntax.asp|Syntax]] and [[http://www.w3schools.com/css/css_id_class.asp|Id and Class]] | ||
| - | </WRAP> | ||
| - | |||
| - | ===== What you need ===== | ||
| - | |||
| - | It depends on your browser : | ||
| - | |||
| - | * Firefox : install the extension Firebug. Then press F12, or right-click to open the contextual menu and click on "Inspect this element" | ||
| - | * Internet Explorer : press "F12". | ||
| - | * Opera : use Opera Dragonfly by pressing Ctrl + Maj + I on a Pc, or ⌘ + ⌥ + I for a Mac. You can also right-click to open the contextual menu and click on "Inspect the element". | ||
| - | * Chrome : press "F12", and the icon magnifying glass to inspect an element. | ||
| - | * Safari : go to Edition->Preferences->advanced et tick "Activate the dev menu...". By doing that, you will have a new menu between Favorites et Windows. In there click on Display the web inspector". | ||
| - | |||
| - | You might need to download several of these well-know browsers, because the render of a page may change according to the browser. | ||
| - | |||
| - | ===== How To : search the selector ===== | ||
| - | |||
| - | Each HTML element is accessible through CSS by selector. Read [[http://www.w3schools.com/css/css_syntax.asp|Syntax]] and [[http://www.w3schools.com/css/css_id_class.asp|Id and Class]] to understand. | ||
| - | |||
| - | Here is an example of how you can easily access to the html/css code of any web page, and change it. With Firebug, a new windows appears in Firefox (see **Fig.01**). | ||
| - | |||
| - | <WRAP smaller centeralign> | ||
| - | {{::03-05-2012_20-37-49.jpg?direct |Fig.01 Firebug Menu}}\\ | ||
| - | //**Fig.01** Firebug Menu// | ||
| - | </WRAP> | ||
| - | |||
| - | \\ | ||
| - | **Fig.01** illustrates the HTML tab, where you can visualize the content of any web page -on-line or off-line-. You see what the browser receives and interprets. | ||
| - | This windows is split in 2 zones. | ||
| - | - The first one (on your left) contains the HTML code.\\ <wrap info>__Info__ :</wrap> You can see on the screen-shot a blue zone on the page : the mouse is over the <tr> which corresponds to that blue zone highlighted by Firebug | ||
| - | - The second zone (on the right) gives all the CSS properties applied to the HTML element selected. It shows also the selector used to apply the properties on that HTML element, and where the code is located -in a file and on what lines-. You can change on the fly the properties, by clicking on value and/or the property. The changes are applied immediately and can be seen on the web page without refreshing | ||
| - | |||
| - | |||
| - | ===== How To : change the CSS properties ===== | ||
| - | |||
| - | As we have seen, the value of any properties can be changed on-the-fly. The properties can be disabled, changed and created. | ||
| - | |||
| - | ===== 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. | ||