Size and Positioning
Color and Appearance
The following styles can be applied to your lightbox links in the Publicator's viewer settings. These styles were created using the Lightbox CSS Generator. To easily select an entire block of code, try triple-clicking!
Size and Positioning
There are a few different notable approaches to sizing your light boxes:
Fixed Sizing: This is the simplest approach; your light boxes will be shown at the same specific size in every scenario. There is no need to involve the Lightbox CSS Generator at all for this, simply set the height and width as desired in your viewer settings.
Percentage Based: Using the Lightbox CSS Generator, enable this option to size your light boxes based on the size of the screen or window containing them. This is useful for when your publication will be displayed across devices of varying screen sizes, and you want to use a large light box without overflowing the edges of smaller screens. For example, this code will create a light box filling 80% of the screen's height and width.:
#colorbox{position:fixed !important;height:80% !important;width:80% !important;top:10% !important;left:10% !important;}.zmags #cboxWrapper{ position:absolute !important; height:100% !important; width:100% !important; }.zmags #cboxContent{ position:absolute !important; height:100% !important; width:100% !important; }.zmags #cboxLoadedContent{ position:absolute !important; height:100% !important; width:100% !important; }
Device Specific: Using our Preferred Viewer functionality, it is possible to have a different viewer for each type of device your publication may be viewed on; by extension this means that different light box settings may be applied to each as well. Below is a list of various device screen sizes; if you will be taking this approach, choose your light box sizes accordingly:
- Various desktop formats:
1600 x 900 px
1440 x 960 px
1440 x 900 px
1366 x 768 px
1360 x 768 px
1280 x 800 px
1280 x 768 px
1280 x 720 px
1024 x 768 px
960 x 600 px
800 x 600 px
640 x 480 px (Not common these days.)
- Various Apple devices:
iPad (normal): 1024 x 768 px
iPad (retina): 2048 x 1536 px
iPad Mini: 1024 x 768 px
iPhone 5: 1136 x 640 px
iPhone 4s and earlier, iPod Touch (normal): 480 x 320 px
iPhone 4s and earlier, iPod Touch (retina): 960 x 640 px
- Various Android devices:
Droid 2: 480 x 854 px
Droid 3, 4: 540 x 960 px
Galaxy Note: 800 x 1280 px
Galaxy Note II: 720 x 1280 px
Galaxy SI, II, III: 480 x 800 px
Sony Ericsson LT15i: 480 x 854 px
Generally however, it's best not to worry too much about the specific size of every device beforehand; sometimes simple trial-and-error testing is the best approach. Try out a few different sizes and see what works best for your content.
Color and Appearance
| Minimalist | |
 |
.zmags #cboxContent{border:solid black 1px !important;background:white !important;padding:10px !important;}.zmags #cboxClose{background:white !important;border:solid black 1px !important;color:black !important;}
|
Polaroid |
|
 |
.zmags #cboxContent{border:solid black 1px !important;background:Floralwhite !important;padding:10px 10px 60px !important;}.zmags #cboxClose{background:Floralwhite !important;border:solid black 1px !important;color:black !important;}
|
| This style is much like the minimalist example above, but uses a larger bottom padding and offwhite background to evoke the sense of an old polaroid photo. Best used with images rather than text. | |
Horizontal Bars |
|
 |
.zmags #cboxContent{border:double red !important;border-width:5px 0px !important;background:rgb(153,153,153) !important;padding:10px !important;}.zmags #cboxClose{background:rgb(153,153,153) !important;border:solid red 2px !important;color:red !important;}
|
| Easily change the bars to a different color like so: Click the customize link. In "Border CSS" for the Lightbox Frame and Close Button, as well as the "Color of X" setting, change 'red' to a different color. Click "Generate Code". | |
Coupon |
|
 |
.zmags #cboxContent{border:dashed black 2px !important;background:white !important;padding:10px !important;}.zmags #cboxClose{background:white !important;border:solid black 1px !important;color:black !important;}
|
| This example uses black dashed borders, but also looks nice with them changed to red, or dotted instead. | |
Frame 1 |
|
 |
.zmags #cboxContent{border:double rgba(0,0,0,.5) 11px !important;background:tan !important;padding:20px !important;}.zmags #cboxClose{background:tan !important;border:solid rgb(105,90,70) 2px !important;color:rgb(105,90,70) !important;}
|
Frame 2 |
|
 |
.zmags #cboxContent{border:groove rgba(255,255,255,.5) 11px !important;background:tan !important;padding:20px !important;}.zmags #cboxClose{background:rgb(233,218,198) !important;border:solid rgb(181,166,147) 2px !important;color:rgb(181,166,147) !important;}
|
Frame 3 |
|
 |
.zmags #cboxContent{border:ridge rgba(255,255,255,.5) 11px !important;background:SaddleBrown !important;padding:20px !important;}.zmags #cboxClose{background:SaddleBrown !important;border:solid rgb(181,166,147) 2px !important;color:white !important;}
|
Frame 4 |
|
 |
.zmags #cboxContent{border:solid 11px !important;border-color:black rgb(76,76,76) rgb(76,76,76) black !important;background:white !important;padding:20px !important;}.zmags #cboxClose{background:white !important;border:solid rgb(76,76,76) 2px !important;color:black !important;}
|
Parchment |
|
 |
.zmags #cboxContent{border:solid rgba(0,0,0,.5) 1px !important;background:Antiquewhite !important;padding:20px 10px !important;}.zmags #cboxClose{background:Antiquewhite !important;border:solid rgb(125,117,107) 1px !important;color:rgb(125,117,107) !important;}
|
| This style is intended to appear as if your content rests on a sheaf of aged paper or formal stationary. Advisable to adjust padding size to taste, and given what content the light box will contain. | |
Pattern |
|
 |
.zmags #cboxContent{border:0px !important;background:url('http://YOUR_SITE_HERE/pattern.jpg') !important;padding:30px !important;}.zmags #cboxClose{background:rgb(228,203,173) !important;border:solid black 1px !important;color:black !important;}
|
This style does away with the border entirely, and instead loads an online image directly into the padding. To use, you'll need to host an image online, and point to it in the background setting (swap in your own URL where "YOUR_SITE_HERE" appears in the code). If you would like to use the pattern seen in this example, right-click this smaller version and choose "Save Image As": |
|
Gradient |
|
 |
.zmags #cboxContent{border:0px !important;background:url('http://YOUR_SITE_HERE/gradient.png') !important;padding:20px !important;}.zmags #cboxClose{background:rgb(204,221,181) !important;border:solid black 1px !important;color:black !important;}
|
This style works in the same way as the above, but using a gradient image instead. Here it is if you'd like a copy: |
Comments
0 comments
Please sign in to leave a comment.