Skip to main content

Change Lightbox Background

In this doc I'll show you how to change the color of the lightbox.

The lightbox in Oriel Pro is built through the UIkit integration, if you use a YoothemePro or UIkit 3 template you can configure the lightbox styling through the template parameters. If you don't use a YT Pro or UIkit 3 template you can of course also change all these options. For this you have to create new rules in the Custom.css or the corresponding file for "Custom CSS Overrides" of your template. You can find out exactly where to add your own CSS rules in the manual of the template you are using.

 

Before:

 After:
oriel bg black oriel bg white

The background of the lightbox is defined in the CSS class uk-lightbox. Therefore it is sufficient to add the following CSS rule to your Custom.css file:

.uk-lightbox{
      background: #ffffff;
} 

Unfortunately I can't give you any more information about where to put this CSS rule because the file/procedure differs depending on the template. Please contact your template provider if you can't find a "custom.css" or "override.css" for your template. Note: Every template offers a possibility to integrate your own CSS styles, check the manual of your template provider for more details.

Other Articles