Customize Piwigo Colors, and Fonts

HTML (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 is very useful to customize any gallery. Colors, fonts, positions of elements etc can be changed by using CSS.

What you need

What you need 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.

Using Brave (my preferred browser), I click on View > Developer > Inspect Elements (⌥ + ⌘ + C on Mac)

Using the “Selector”

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 Brave (see Figure 1).

Figure 1 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.

1. The first one (top) contains the HTML code.
   • You can see on the screen-shot a blue zone on the page : the mouse is over the which corresponds to that blue zone highlighted by Brave
2. The second zone (bottom) 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.

Changing 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.

Saving the changes in Piwigo

As noted above, Brave (or any other browser) doesn’t change the files: if you refresh the page, you will lose all your changes.

If you follow that tutorial, you will NOT lose your changes during updates.

1. Go to Administration » Plugins » LocalFiles Editor » Tab ”CSS” ¹
2. There you can choose in the drop-down menu between local-rules.css and a all the themes enable on your gallery.
   • The local-rules.css file is loaded by Piwigo whatever the theme: if your CSS change needs 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 cases, it’s recommend to apply the CSS code to one theme.
3. Now just copy/past your CSS code and save.

The effects of your changes should be seen immediately. If not, try to refresh the cache of your browser and purge the Purge compiled templates, in Tools » Maintenance»

// This hides the menu of my gallery
#menubar {
  display: none;
}

FAQ

• Do I need to copy/paste all the content of a theme.css?
  • No! 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 where * is the name of a theme.

Footnotes:

1. The LocalFiles Editor needs to be activated ↩︎