If you’d like to change specific elements of the appearance of FooBox, use this “Cheat Sheet” of FooBox’s styles. You can add your own custom styles into “Custom CSS” field under the “JS & CSS” tab in your FooBox settings, or add them directly to your theme styles.

Custom Color Scheme

The most common request for FooBox users is to customize the color scheme. The following styles override the white color scheme with your custom color. It’s important to make sure you choose the “WHITE” color scheme in order for these styles to work.

.fbx-light .fbx-inner {
    border-color: #F5F5DC;
}
.fbx-light .fbx-inner,
.fbx-light .fbx-loader,
.fbx-light .fbx-close,
.fbx-light .fbx-prev,
.fbx-light .fbx-next,
.fbx-light .fbx-play,
.fbx-light .fbx-pause,
.fbx-light .fbx-fullscreen-toggle,
.fbx-light .fbx-social-toggle,
.fbx-rounded.fbx-light.fbx-inset-buttons .fbx-prev:before,
.fbx-rounded.fbx-light.fbx-inset-buttons .fbx-next:before {
    background-color: #F5F5DC;
}

Other Customizations

/* Controls the black semi-transparent background for modern browsers */
.fbx-modal {
	background: rgba(0,0,0,.7) none !important;
}
/* Controls the glow around the image. This is the default style */
.fbx-inner {
	-moz-box-shadow:0 0 12px #000;
	-moz-box-shadow:0 0 12px rgba(0,0,0,.8);
	-webkit-box-shadow:0 0 12px #000;
	-webkit-box-shadow:0 0 12px rgba(0,0,0,.8);
	box-shadow:0 0 12px #000;
	box-shadow:0 0 12px rgba(0,0,0,.8);
}
/* Change the appearance for navigation on larger screens */
.fbx-prev {}
.fbx-next {}
.fbx-close {}
.fbx-fullscreen-toggle {}
/* Controls the look of the FooBox Captions */
.fbx-caption {}
.fbx-caption-title {}
.fbx-caption-desc {}
.fbx-title {}
/* Control the look of the FooBox affiliate link */
.fbx-credit {}
/* Controls the image count */
.fbx-count {}

If you’d like to change any of the above styles for either tablets or phones specifically, just add .fbx-phone, or .fbx.tablet before any of the classes. For example, you can change the modal or the captions for phones or tablets with the following:

.fbx-phone.fbx-modal {}
.fbx-phone.fbx-caption {}
.fbx-tablet.fbx-modal {}
.fbx-tablet.fbx-caption {}

NOTE: There is NO space between the classes. This is necessary, not a typo.