Skip to main content

Custom Stylesheets

While Backlight is highly customizable on its own, it's also incredibly easy to implement a custom stylesheet with your own CSS. You may want to use a custom stylesheet to style an element in ways not covered by Backlight's designer, to override our existing styling, or to style your own elements in copy areas or PHPlugins.

To use custom CSS, create or edit an existing CSS file in /backlight/custom/css.

In Backlight's Designer, edit the desired Page Template. Scroll down and set:

  • Advanced Customization => Custom Stylesheet => Enabled : On
  • Advanced Customization => Custom Stylesheet => Include File : file-name.css

Any page, album or album set utilizing that template will include the file's styling rules.

When overriding default styling, it's good to begin by examining the page template's generated stylesheet. The best way to avoid conflicts or strange behavior is to use the same selectors that we've used to style Backlight.