Gallery2:CSS Reference - Gallery Codex
Personal tools

Gallery2:CSS Reference

From Gallery Codex

Overview of CSS

CSS is an acronym for Cascading Style Sheets and came about as a means to separate style from content. More information on CSS, with examples, can be found at W3Schools.com.

Themes and CSS

The appearance of Gallery can be easily changed by modifying themes. For every theme there is a theme.css file. All of the CSS in Gallery is defined here.

If you are using the default theme, which is called "matrix", then your theme.css is located at:

 gallery2/themes/matrix/theme.css

Unused Hooks

If you are editing templates you may come across some HTML such as:

 <span class="date summary">

This happens to be in ItemInfo.tpl. You'll notice that there is no "date" or "summary" class in the default theme.css.

To change the appearance of the ItemInfo block you could add the following line to your themes.css:

 div.block-core-ItemInfo { }

If you wanted to change all summary entries:

 div.block-core-ItemInfo .summary { }

Or date:

 div.block-core-ItemInfo .date { }

In summary, the developers have provided hooks for you, even though they are not all used in the default theme. This allows you to avoid having to change templates outside of your theme directory and helps with theme portability.

A Little History

Gallery 2 alpha and early beta releases differentiated between themes and layouts. Gallery 2.0 brings the two together and simply calls them themes.

Because there used to be a separation between themes and layouts, the CSS had to follow strict standards so it would work with multiple layout and theme combinations. As a result, you will notice some prefixes when you are editing CSS. If you make your own theme, there is no reason these must still be followed, but you may find them useful for determining what certain CSS does. Some of the prefixes you'll find in the CSS are:

  • gb - Gallery Block
  • gc - Gallery Class
  • gi - Gallery Item
  • gs - Gallery Section

It's up to the person who makes the theme whether to follow these. It is no longer required to ensure compatibility.

advertisements