Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

how-to-change-lightbox-background-color-in-wordpress

How to Change Lightbox Background Color in WordPress

by Waseem Abbas on Jan 12, 2017

Share This Post!

Do you want to change the background color for your lightbox photo galleries? Sometimes you want to customize the look to match the design of your website. In this tutorial, we will share how to change lightbox background color in WordPress.

By default, WordPress image galleries don’t have a lightbox feature, so there is no option for changing the background color either. However, you can use an image gallery plugin like Envira to add lightbox photo galleries to your WordPress site and customize them to match your theme.

To change lightbox background color in WordPress, you’ll need to follow these 6 steps:

  • Step 1. Install and activate Envira Gallery plugin
  • Step 2. Install and activate Gallery Themes Addon
  • Step 3. Create an image gallery using Envira
  • Step 4. Enable lightbox settings for image gallery
  • Step 5. Choose your lightbox theme
  • Step 6. Add your image gallery in WordPress posts/pages

Ready to get started? Let’s go!

Step 1: Install and Activate Envira Gallery Plugin

First thing you need to do is install and activate Envira Gallery plugin.

Envira Gallery

If you need help with this step, then check out our guide on how to install Envira.

Step 2: Install and Activate Gallery Themes Addon

Upon activating the plugin, simply go to Envira Gallery » Addons. Look for Gallery Themes Addon to install and activate it.

To access this addon, you must have Envira Plus or higher license. You can learn more about how to upgrade your license in Envira here.

Gallery Themes Addon

Once the Gallery Themes addon is activated, you can enable lightbox settings for your image gallery.

Step 3: Create an Image Gallery Using Envira

Next, go to Envira Gallery » Add New. Add a title and drop your photos into the Native Envira Gallery section.

Add New Gallery

To learn more about creating image galleries with Envira, you may want to check out our guide on how to create an image gallery with thumbnails in WordPress.

Step 4: Enable Lightbox Settings For Image Gallery

Now that you’ve created an image gallery with Envira, go ahead and edit your image gallery. Then, go to the Lightbox tab and check the Enable Lightbox option.

Enable Lightbox

Lightbox is now enabled for your image gallery!

Step 5: Choose Your Lightbox Theme to Change Lightbox Background Color

After enabling lightbox for your image gallery, you’ll see some options to change the lightbox background color, image size, navigation, and more.

Change Lightbox Background Color

Simply select your theme: either Base (Dark) or Base (Light). The Base (Dark) theme includes a black lightbox background, and the Base (Light) theme includes a white lightbox background color.

Step 6: Add Your Image Gallery in WordPress Posts/Pages

Once you are satisfied with your lightbox background color, simply click on the Publish button.

(If you are editing a pre-built image gallery in Envira, then you should hit the Update button after changing the lightbox theme.)

Now you will see a shortcode in the Envira Gallery Code widget. Go ahead and copy it.

Copy Shortcode

Then, go to Posts » Add New or edit an existing post. In the visual editor, simply paste the shortcode.

Paste Shortcode

Make sure to update the post.

Now you have successfully changed the lightbox background color for your image gallery, and published it on your site!

We hope this tutorial has helped you to learn how to change lightbox background color in WordPress. You may also want to check out our guide on how to create a WordPress image gallery with next and previous buttons.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Share This Post!

Comments

  1. So you can change the background color as long as it’s either black or white. Really? What if you want it to be green? Or blue?

    1. Hello Robert,

      You can change the background color using an rgba value to allow opacity to be controlled (how light or dark the background color is).

      .envirabox-overlay {
      background: none !important;
      background-color: rgba(0, 153, 0, .5) !important;
      }

      Simply use this color picking tool to sample the rgba for your background. The last box is for the opacity. Hope this helps! 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.