When creating light box links, one of the things you want to consider is how the light boxes will look in your publication. The viewer settings already provide some basic options (height and width, rounded or square corners, border thickness), but there are so many more options made available by means of custom CSS. We have many pre-made examples available here, and detailed information below on how to create your own.
Zmags Lightbox CSS Generator:
To make creating the perfect light box appearance as pain free as possible, we are proud to offer this useful utility:
This form allows you to fill out the settings you would like to apply in a straightforward format and automatically generate the necessary CSS at the click of a button. The remainder of this guide will serve as a detailed how-to for using this tool.
Choosing Colors:
Many of the settings on this form involve a color choice. You can select a color in a number of ways. The easiest method is to choose a color you like from the CSS Color Names list, and then enter its name directly.
Alternately, you can use a hexadecimal color value, as seen in the screenshot above. These are most easily obtained using a free Hexadecimal Color Picker online. Enter the provided color value including the '#' into the settings.
Lightbox Frame:
These settings determine the appearance of the border surrounding your light box content.
Border CSS - The style formatting used for the light box border. You will need to choose a type, width, and color.
[type] [color] [width] - example: solid red 3px
default setting - solid rgba(0,0,0,0.5) 11px
type - solid, double, dashed, etc (full list and more info here)
color - see "Choosing Colors" above
width - The border's thickness, a number followed by 'px'.
The separate 'Color' and 'Width' options are not needed unless you would like to have multiple color or thickness settings for different sides of the border, like so:
red blue - red border on top / bottom, blue on sides
red blue green - red on top, blue on sides, green on bottom
red blue green yellow - top, right, bottom, and left respectively
Background - Typically used in conjunction with 'padding', this will determine what's shown in the space between the border and content. The default border is partially transparent, so this background will shine through when the "Border CSS" is set to default. Two major options to consider here:
choose a color - as described above
use an image - host an image online, and use the following code for background: url('IMAGE_URL_HERE') - Simply fill in the address of the image for IMAGE_URL_HERE. Images smaller than the padding rectangle will be tiled.
Padding - The amount of space left between the border and content. This can be set for all sides or individually:
10px - ten pixel border on all sides
10px 20px - ten pixel border on top / bottom, twenty on sides
5px 10px 15px - five on top, ten on sides, fifteen on bottom
5px 10px 15px 20px - top, right, bottom, and left respectively
Close Button:
Border CSS - See setting by the same name in "Lightbox Frame" section above.
Background - Choose a color, as described above.
Color of X - Choose a color for the the 'x' inside the button.
Size - Choose a small, medium, or large close button.
Background Overlay:
Select a color and choose an opacity using a decimal percentage such as .25, .75 or 1. Selecting 0 will hide the background entirely, whereas selecting 1 will make it fully opaque.
Scroll Bars:
Choose one of three options for horizontal and vertical scroll bars:
disabled - never show the scroll bar
always - always show the scroll bar, even when unneeded
auto - show the scroll bar when needed, hide otherwise
Size and Positioning:
When choosing size and position, take note of the units off to the right of each box, as they can be either pixels (px) or percent (%). When entering percentages, use whole numbers such as 25, 75, and 100, rather than decimal equivalents such as .25, .75 and 1.