ColorBox Polaroid Theme - 3manfactory

ColorBox Polaroid Theme

ColorBox is a cracking little jQuery lightbox plugin which is extremely adaptable and lightweight. Customisation is one of its strong points, so I took it upon myself to tinker with one of the default themes to create something a little more unique and simple for myself – a Colorbox Polaroid theme.

ColorBox Polaroid Theme

Using this theme is really simple and rather safe, so you can easily switch back if you wish to.

Installation

  • Ensure that you’re not connecting to an existing ColorBox style sheet
  • Open your style sheet a simply paste the following code where suits

It’s worth noting that theme doesn’t reference any files so you don’t need to worry about the relationship between your style sheet and the location of any files.


#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left; background: #ffffff;}
#cboxContent{position:relative; background: #ffffff;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:#000000;}
#colorbox{}
#cboxTopLeft{width:25px; height:25px; background: #ffffff;}
#cboxTopCenter{height:25px; background: #ffffff;}
#cboxTopRight{width:25px; height:25px; background: #ffffff;}
#cboxBottomLeft{width:25px; height:25px; background: #ffffff;}
#cboxBottomCenter{height:25px; background: #ffffff;}
#cboxBottomRight{width:25px; height:25px; background: #ffffff;}
#cboxMiddleLeft{width:25px; background: #ffffff;}
#cboxMiddleRight{width:25px; background: #ffffff;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:50px;}
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; line-height: 25px; width:100%;}
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
#cboxLoadingOverlay{background:#fff;}
#cboxClose{position:absolute; bottom:0; right:0; display:block;}

Written by James Duffell

Article by James Duffell

Share

Wrkspace choose 3manfactory to align their brand identity

Gem Bend

#WorldEmojiDay 2019 – 10 things you probably won’t know about emojis!

Gem Bend

3manfactory take the helm of social content for Creative Lancashire at National Festival of Making!

Tom Stables

Brand Engineering

Play our showreel

© 2019 3MANFACTORY LTD | Company reg: 07642302