This is an old revision of the document!
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.
Some useful tutorials and websites to learn How To use CSS
It depends on your browser :
You might need to download several of these well-know browsers, because the render of a page may change according to the browser.
Each HTML element is accessible through CSS by selector. Read Syntax and 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).
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.
As we have seen, the value of any properties can be changed on-the-fly. The properties can be disabled, changed and created.
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
If you follow that tutorial, you will NOT loose your changes during updates.
Go to [ Administration » Plugins » LocalFiles Editor]]1) » 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.
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» ]
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 :
// It hides the menu of my gallery #menubar { display: none; }
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.
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.