3manfactory - news

ColorBox Polaroid Theme

Written by James Duffell | Jan 29, 2013 9:10:09 AM

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.

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;}