Each Gallery has a Custom CSS field where you can write CSS that applies only to that Gallery. Use it to fine-tune spacing, override colours, adjust typography, or add any style that isn’t covered by the Gallery’s visual settings.
Location Gallery Editor → Settings → Custom Code → Custom CSS
Writing gallery-scoped CSS #
CSS entered in this field is automatically scoped to the Gallery’s wrapper element, so your rules will not affect other Galleries or the rest of your page. You do not need to add a wrapper selector yourself — write your rules as if you are already inside the gallery container.
For example, to change the background colour of item captions:
FotoGrids wraps this in the Gallery’s unique selector before outputting it to the page.
Targeting the Gallery wrapper with SELECTOR #
Sometimes you need a rule that applies to the Gallery’s outer wrapper element itself — for example, adding a border around the entire Gallery, setting a background colour behind the items, or adjusting the wrapper’s padding. Writing .fotogrids-gallery { ... } wouldn’t work in the per-Gallery field because that selector would match every Gallery on the page, not just this one.
To solve this, FotoGrids provides a magic keyword: SELECTOR. Wherever you write SELECTOR in your Custom CSS, FotoGrids replaces it at render time with the Gallery’s own unique wrapper selector — something like .fotogrids-gallery[data-gallery-id="42"]. This lets you write rules that target the wrapper precisely.
For example:
You can also combine SELECTOR with descendant selectors:
Common uses for SELECTOR:
- Adding a border or box-shadow around the whole Gallery
- Setting a background colour or image behind the grid
- Controlling outer padding or margin without affecting the page layout
- Overriding wrapper-level styles set by your theme
SELECTOR works anywhere in a CSS rule — as a standalone selector, as part of a compound selector, or inside a media query.
Global Custom CSS Pro #
Per-Gallery CSS is great for one-off customisations, but when you have a style that should apply to every Gallery on your site — a consistent caption font, a standard item border radius, or a brand colour applied to interactive elements — replicating it across every Gallery is impractical. FotoGrids Pro includes a Global Custom CSS field where you write the rule once and it applies everywhere, automatically. It supports the same SELECTOR keyword as per-Gallery CSS, giving you precise control even at the global level.
Tips #
Changes to Custom CSS take effect as soon as the gallery is saved. There is no separate compile step.
If a rule doesn’t appear to be working, check whether a more specific selector from FotoGrids’s own stylesheet is overriding it. Adding a more specific selector or using the cascade normally is usually sufficient — avoid !important unless necessary.
