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

Article by James Duffell

Share

Why Your Company’s Website is Important Now More Than Ever

You’ll be more than well aware of the level of uncertainty surrounding the UK’s decision to leave the EU. Threats to trade, investments and changes […]

Becky Nolan
Linkedin's new web demographic reporting tool

LinkedIn’s New Website Demographics: Everything You Need To Know

Knowing and understanding your audience is fundamental in marketing. If you have no idea who you’re targeting your content towards, how on earth can you […]

Hannah Robinson
Key issues with marketing metrics

What Are The Key Issues In Measurement Metrics?

The fact of the matter is, metrics are a must-have in marketing. Not only do they increase your competitive intelligence and make the unpredictable world […]

Hannah Robinson

intelligent independent marketing

Watch our showreel

© 2017 3ManFactory LTD | Company reg: 07642302