Question

Hi I am using colorbox throughout my web application. I wonder if I can change the border color of my color box. I have gone through the code and see that there is a attribute

 #cboxMiddleLeft:background: url("images/controls.png") repeat-y scroll left top transparent;

and when I go to images folder of color box I see a controls.png image for left and right borders of the color box and property

 #cboxBottomCenter: background: url("images/border.png") repeat-x scroll 0 -29px transparent;

for top and bottom borders of the color box. Both images are in dark grey color.

Now what I want to ask that If I want to change the border of the color box, then should I put the color.png and border.png in that particular color? Can I get these images in all colors? Because its difficult to design the same images in all colors.

The color of my web application changes in many colors and I want to show borders with respect to those colors. What is the best approach for this? Is there any automated way to do this? I searched but couldn’t get any thing.

Regards

Answer 1

How about hiding all of the

$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();

Or just specify in the plugin that you want no border; next add the following css

.blue_border_example {
    border: 10px solid blue;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 0 0 25px blue;
}

Then add this class to #cboxContent like:

$("#cboxContent").addClass("blue_border_example");