🌍
English
Differences
This shows you the differences between two versions of the page.
|
user_documentation:faq:css_code [2012/05/03 18:04] flop25 [Introduction] |
user_documentation:faq:css_code [2015/06/02 12:55] (current) plg [How To : save the changes in my Piwigo] s/loose/lose/g |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== How To Customize Colors (CSS coding)====== | + | ====== How To Customize Colors, Fonts and more (CSS coding)====== |
| + | |||
| + | <WRAP info 65% center round> For more details, see first: [[user_documentation:learn:customize]]</WRAP> | ||
| Line 5: | Line 7: | ||
| HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. | HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. | ||
| + | |||
| The CSS language (//Cascading Style Sheets//) is very useful to customize his gallery. Colors, fonts, positions of elements etc can be changed by using CSS. | The CSS language (//Cascading Style Sheets//) is very useful to customize his gallery. Colors, fonts, positions of elements etc can be changed by using CSS. | ||
| <WRAP info 65% center round>__//**Some useful tutorials and websites to learn How To use CSS**//__ | <WRAP info 65% center round>__//**Some useful tutorials and websites to learn How To use CSS**//__ | ||
| - | * [[http://www.w3.org/standards/webdesign/htmlcss|W3C website]] The W3C is the consortium which defines the standards for Web Applications. It contains [[http://www.w3.org/2009/cheatsheet/|a cheatsheet -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://learn.shayhowe.com/html-css|A Beginner’s Guide to HTML & CSS ]] a new and very informative website for complete beginner. |
| - | * [[http://www.w3schools.com/css/|CSS School]] Interactive tutorials | + | * [[http://www.w3.org/standards/webdesign/htmlcss|W3C website]] The W3C is the consortium which defines the standards for Web Applications. It contains [[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> | </WRAP> | ||
| - | ===== Prérequis ===== | ||
| - | Tout dépend de votre navigateur : | + | ===== What you need ===== |
| - | * Firefox : il vous faudra le plugin Firebug. Ensuite faites F12 ou vous pouvez aussi faire un clique droit, puis "inspecter un élément" | + | It depends on your browser : |
| - | * Internet Explorer : utilisez la touche "F12". | + | |
| - | * Opéra : utilisez Opera Dragonfly en appuyant sur les touches Ctrl + Maj + I sur un ordinateur sous Windows ou Linux, ou sur ⌘ + ⌥ + I sur un Macintosh. Vous pouvez aussi faire un clique droit, puis "inspecter l'élément". | + | |
| - | * Chrome : utilisez la touche "F12", et l’icône loupe pour inspecter un élément. | + | |
| - | * Safari : allez dans Edition->Préférences->avancées et cocher "Activer le menu développement...", puis vous verrez un nouveau menu en haut entre Favoris et Fenêtre. Vous utiliserez "Afficher l’inspecteur web". | + | |
| + | * 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". | ||
| - | ===== Je cherche ma balise ===== | + | You might need to download several of these well-know browsers, because the render of a page may change according to the browser. |
| - | Chaque élément est identifié par une ou plusieurs balises. | + | ===== How To : search the selector ===== |
| - | Sans vous expliquer tout le fonctionnement du code CSS, voici un exemple de ce qu'il est possible de faire avec Mozilla.\\ | + | 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. |
| - | A l'aide donc du plugin Firebug, ouvrez une page de votre galerie et faites un clic droit n'importe puis cliquez sur "Inspecter un élément".\\ | + | |
| - | Un menu dans le bas de la fenêtre s'ouvre (voir **Fig.01**). | + | 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> | <WRAP smaller centeralign> | ||
| - | {{:capture_08142011_131211.png?direct|Fig.01 Menu Firebug}}\\ | + | {{::03-05-2012_20-37-49.jpg?direct |Fig.01 Firebug Menu}}\\ |
| - | //**Fig.01** Menu Firebug// | + | //**Fig.01** Firebug Menu// |
| </WRAP> | </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 | ||
| - | Sur la **Fig.01** je suis volontairement sur l'onglet HTML qui nous permet de visualiser le contenu de la page tel que le lit notre navigateur.\\ | ||
| - | La fenêtre est donc séparée en 2 zones. | ||
| - | - La première zone (à gauche) permet de visualiser le code HTML de la page et de se balader en son sein.\\ <wrap info>__Info__ :</wrap> Vous remarquez qu'en sélectionnant tel ou tel ligne, vous mettez en surbrillance la zone de la page correspondante. Pratique non ?! | ||
| - | - La seconde zone (à droite) nous donne toutes les propriétés CSS qui s'applique à la ligne que l'on a sélectionné à gauche. Et c'est dans cette zone que l'on peut facilement effectuer des modifications de code CSS en direct et observer les effets instantanément. | ||
| + | ===== How To : change the CSS properties ===== | ||
| - | ===== Je modifie mon code à la volée ===== | + | As we have seen, the value of any properties can be changed on-the-fly. The properties can be disabled, changed and created. |
| - | Comme vu précédemment, il devient facile de modifier les propriétés qui affectent une balise directement dans la zone de droite. On peut tout aussi bien rajouter des propriétés qu'en désactiver. | + | ===== 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 ?\\ | ||
| - | ===== Je souhaite intégrer mes modifications dans Piwigo ===== | + | You might have noticed that Firebug doesn't change the files : if you refresh the page, you will lose all your changes\\ |
| + | <wrap important>If you follow that tutorial, you will NOT lose your changes during updates.</wrap> | ||
| - | Une fois que que vous avez trouver une adaptation à faire à votre galerie via le CSS, vous allez vouloir intégrer cette petite adaptation. | ||
| - | Piwigo dispose d'un dispositif permettant d'ajouter votre propres modification à l'ensemble de votre galerie (affectant tous les thèmes) ou bien n'impactant qu'un thème bien précis.\\ | + | Go to **[ Administration >> Plugins >> LocalFiles Editor]]((It needs to be activated!)) >> Tab "//CSS//" ]**\\ |
| - | <wrap important>Bien sûre, vos modifications ne seront pas perdues lors de mises à jours futures (de Piwigo mais aussi des thèmes).</wrap> | + | 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. | ||
| - | ===== Où ajouter mes modifications ? ===== | + | 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>> ]**\\ |
| - | > Via le forum on vous donne un code CSS et vous ne savez pas où l'ajouter ?\\ | ||
| - | > Via Firebug vous avez trouvé comment embellir votre galerie ?\\ | ||
| - | Allez dans **[ Administration >> Plugins >> [[plugins:installes:localfiles_editor]]((Le plugin doit être activé au préalable)) >> Onglet "//CSS//" ]**\\ | + | <WRAP center round info 60%> |
| - | Là vous avez une liste qui vous donne le choix entre un fichier ''local-rules.css'' et puis tout une liste correspondant aux thèmes de votre galerie. | + | 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. |
| - | Le fichier ''local-rules.css'' est un fichier qui sera lu à chaque fois par Piwigo, peut importe le thème affiché.\\ | + | Illustration :\\ |
| - | En conséquent, ajouter votre code dans ce fichier va impacter tous les thèmes. C'est pratique pour certaines adaptations mais pas pour toutes... | + | |
| - | + | ||
| - | Les fichiers correspondant à vos thèmes quand à eux ne vont agir que si le thème en question est actif. Donc c'est très bien pour adapter un thème en particulier. | + | |
| - | + | ||
| - | Ajouter simplement le contenu du code que vous avez et enregistrez. Les effets sont normalement immédiat.\\ | + | |
| - | Sinon, pensez à vider le cache de votre navigateur. | + | |
| - | === Dois-je réécrire tout le contenu d'un fichier ? === | + | |
| - | + | ||
| - | Non, absolument pas !\\ | + | |
| - | Inutile de tout réécrire, Piwigo va "__surcharger__" le code CSS original par celui que vous avez modifié. | + | |
| - | + | ||
| - | + | ||
| - | === Dois-je réécrire toutes les propriétés d'un élément ? === | + | |
| - | + | ||
| - | Non, absolument pas !\\ | + | |
| - | Vous n'avez besoin d'écrire que le sélecteur suivi de des éléments modifiés. Tout ce que vous n'avez pas modifié n'a aucunement besoin d'être réécrit. Piwigo va "__surcharger__" le code CSS original par celui que vous avez modifié. | + | |
| - | + | ||
| - | + | ||
| - | === Commentez vos modifications ! === | + | |
| - | + | ||
| - | Si vous ne modifiez que 3-4 éléments il est assez facile de savoir reconnaître le code et savoir ce qu'il impact.\\ | + | |
| - | Mais si vous avez plusieurs lignes, il sera nécessaire de bien identifier vos modifications. | + | |
| - | + | ||
| - | Exemple :\\ | + | |
| <code css> | <code css> | ||
| - | // Avec ce code je cache le menu de ma galerie | + | // It hides the menu of my gallery |
| #menubar { | #menubar { | ||
| display: none; | display: none; | ||
| } | } | ||
| </code> | </code> | ||
| + | </WRAP> | ||
| - | === Où sont stockées mes modifications ? === | ||
| - | Les fichier CSS que vous générez via le plugin LocalFiles Editor se trouvent dans le répertoire : | + | ===== FAQ ===== |
| - | ./piwigo/local/css | + | |
| - | + | ||
| - | Sujet d'origine : http://fr.piwigo.org/forum/viewtopic.php?pid=161852#p161852 | + | |
| + | === Do I need to copy/paste all the content of a theme.css ? === | ||
| - | ====== Pour aller plus loin... ====== | + | 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. | ||
| - | <WRAP round mini-index> | + | === Where are saved/stocked my changes ? === |
| - | **__Page(s) associée(s) :__**\\ | + | The CSS files generated by LocalFiles Editor are in the folder: |
| - | {{backlinks>.}} | + | ./piwigo/local/css/ |
| - | \\ | + | They are named *-rules.css with * is the name of a theme. |
| - | <WRAP hi bigger centeralign center 500px>[[:sommaire|Retourner au sommaire du wiki]]</WRAP>\\ | + | |
| - | \\ | + | |
| - | </WRAP> | + | |