Lightbox 2.0 uses a different underlying structure than the original Lightbox plugin. As a result, custom CSS written for the legacy plugin does not apply to dialogues created with Lightbox 2.0.

Before you begin

Understand when CSS updates are required:

For an overview of how Lightbox 2.0 differs from the legacy plugin, see Lightbox 2.0 overview.
Existing Lightbox dialogues continue to use the legacy plugin.
Your existing CSS continues to work for those dialogues.
You do not need to update CSS unless you create or recreate a dialogue using Lightbox 2.0.

You only need to update CSS when:

Creating a new Lightbox dialogue using Lightbox 2.0
Rebuilding an existing dialogue using the new plugin

Why your old CSS does not apply to Lightbox 2.0

The original Lightbox plugin used Fancybox, a jQuery-based modal library. Your CSS likely targets Fancybox class names such as:

.fancybox-skin
.fancybox-overlay

Lightbox 2.0 removes Fancybox and uses a new structure with different class names, including:

.bcModal
.bcModal-overlay

CSS applies based on class names. Because the class names are different, rules written for Fancybox do not match anything in Lightbox 2.0.

No migration is required for existing dialogues using the old plugin
If you want to use Lightbox 2.0, you will need to: Recreate the dialogue using the new plugin and update your CSS to target the new class names.

CSS class name mapping

Replace old Fancybox class names with the Lightbox 2.0 equivalents:

Old (Fancybox)	New (Lightbox 2.0)	Description
`.fancybox-skin`	`.bcModal`	Main modal container
`.fancybox-overlay`	`.bcModal-overlay`	Background overlay
`.fancybox-inner`	`.bcModal-content`	Content area
`.fancybox-inner .bcLightboxCloseButton`	`.bcModal-close`	Close button
`.fancybox-lock`	`.bcModal-open`	Body class when open
`.fancybox-wrap`	`.bcModal-wrapper`	Outer wrapper

Updating your CSS

Open your dialogue.
Go to the What tab.
Copy the contents of the Custom CSS field.

Replace class names

Update your selectors using the mapping above.

Example (legacy CSS):

.fancybox-skin {
  position: fixed;
  right: 0;
  top: 16px;
}

.fancybox-overlay {
  background: rgba(0, 0, 0, 0.65);
}

Updated for Lightbox 2.0:

.bcModal {
  position: fixed;
  right: 0;
  top: 16px;
}

.bcModal-overlay {
  background: rgba(0, 0, 0, 0.65);
}

Verify in your browser

Open the page where the dialogue appears.
Trigger the Lightbox.
Right-click and select Inspect.
Confirm the class names on the rendered elements.

Class names can vary slightly by version, so always verify what is rendered in your browser.

Apply and test

Paste your updated CSS into the Custom CSS field.
Save the dialogue.
Test on your live site or in the simulator.

Common adjustments

Position the Lightbox

.bcModal {
  position: fixed;
  top: 16px;
  right: 16px;
  transform: none;
  left: auto;
}

Remove the background overlay

.bcModal-overlay {
  background: transparent !important;
}

Allow page scrolling

.bcModal-open {
  overflow: auto !important;
}

FAQ

Do I need to update CSS for existing Lightbox dialogues?

No. Existing dialogues continue to use the legacy plugin, and your CSS should continue to work.

Why does my CSS not apply to a new dialogue?

Lightbox 2.0 uses different class names, so legacy selectors do not match.

Can I reuse my old CSS without changes?

No. Update class names to match the Lightbox 2.0 structure.

Can I upgrade an existing dialogue instead of recreating it?

No. Recreate the dialogue using the Lightbox 2.0 plugin.

Lightbox 2.0 Overview

Updating CSS for Lightbox 2.0 dialogues