Get in touch
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;}

  Read next Getting Your Business Superfast in Burnley