July 29, 2013 at 10:36 pm | web.

If you happen to run into the need to use colobox with two different styles, like one for photos and one for videos you can use the className param in later versions of Colorbox or you can use jQuery to add “addClass” to the wrapper ID so you can target the individual styles that you need to make the version different.

One thing to remember is that adding the class will mean that Colorbox will still render the styles as if the original styles were still there, so if you don’t need certain border and drop shadow background images in your new CSS it is better to use “background: none;” rather than “display: none;” as colorbox has already rendered the cbox styles as if the styles were still there. (eg. Inline padding and styles to determine width.)

#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
.newstyle #cboxTopLeft{background: none;}