In this brewbook article we want to show you the best way to implement your own theme skin to the lightbox. If you want your own skin you have to extend the CSS file (named "bb-lightbox.css" in our package). In this CSS file you find the styles of the lightbox which are divided into three parts.

  1. Base styles
  2. Customizable styles
  3. Theme styles

The base styles

The first part are the base styles. They are responsible for the functionality of the lightbox. Customizations of this rules should not be necessary and are not recommended. To dissuade anyone from changing them, they are minimized into a single line at the beginning of the css-file. If you want to use further updates from us pleas don't change anything in the first row of the CSS file.

The customizable styles

The second part are the customizable styles that are applied to all themes. These styles define the look and feel of the lightbox. Customizable dimensions, positions, colors and icons are most likely defined here. If you change anything in this part it will effect all skins. 

The theme styles

The last part of the CSS file ist the theme styles part in which you can style your own Theme. This part differ from the rest of the styles as they are namespaced with the theme name. To namespace a theme you have to start any style description with the name of your style as class name. This will make sure that they are only applied to one special theme and have no effect on the other themes. 

The first step for an own theme is the name of the theme. In this example we will call it "my-theme".

Start the styling of your lightbox

Without any theme styles the lightbox will look almost exactly like the standard theme. The standard theme defines only two styles, one for the color of the page-overlay and another to emphasize the option-buttons in the fullscreen-view.

Our first style will be a bright green background with a slight transparency for the page-overlay.

.my-theme .bb-lightbox-bg-close {
	background: #0f0;
	opacity: .6;
}

To change the icons for all themes we can override these selectors. To only override them for one theme we would have to namespace them with the theme name.

To change the appearance of the content area two selectors can be used. ".bb-lightbox-slide" and ".bb-lightbox-slide-content". We recommend to use ".bb-lightbox-slide-content" for customization, as it is the main purpose of this container, and ".bb-lightbox-slide" only if the design is too complex for a single container.

Lets add a white border and a radius to the content.

.my-theme .bb-lightbox-slide-content {
	border: 15px solid #fff;
	border-radius: 25px;
	overflow: hidden;
}

Change the navigation icons

All icons are part of an icon-font. Following icons exist:

//fullscreen-icon
.bb-lightbox-fullscreen:before {
	content: "\f105";
}

//fullscreen-icon in fullscreen-mode
.bb-lightbox-mode-fullscreen .bb-lightbox-fullscreen:before {
	content: "\f104";
}

//close-icon
.bb-lightbox-content-close:before {
	content: "\f103";
}

//next-icon	
.bb-lightbox-control-next:before {
	content: "\f102";
}

//prev-icon
.bb-lightbox-control-prev:before {
	content: "\f101";
}

For the best possible performance the icon-font only includes these 5 icons. To use an alternative icon-font (e.g. FontAwesome) it is necessary to override the font-family too.

.bb-lightbox-option-button:before, /* close- and fullscreen-button
.bb-lightbox-control-next:before,
.bb-lightbox-control-prev:before {
	font-family: "MyCustomFont";
}
//close-icon in my-theme
.my-theme .bb-lightbox-content-close:before {
	content: "\f00d";
}

Open the lightbox with your theme

To open the lightbox with this theme we can use the attribute-notation:

<a href="image.png" class="bblb" data-bblb-theme="my-theme">Image</a>

or set the theme as an option in the initialization call:

$('.bblb').bbLightbox({
	theme: 'my-theme'
});