CODEWITHSUNDEEP
cssfancybox
earachefl
earachefl

Reputation: 1890

How to change fancybox border color

I've been trying to change fancybox's border color from white. I've succeeded in targeting every part of fancybox except the border. How can I change the color of the fancybox border?

Upvotes: 2

Views: 21618

Answers (4)

elclanrs
elclanrs

Reputation: 94101

If you're using 1.3.4, the border is in #fancybox-content css rule. A quick firebug or devtools inspect will tell you that.

UPDATE [March 2015] for both versions:

For Fancybox v1.3.4

<style type="text/css">
#fancybox-content {
 border-color: #FF0000 !important; /* or whatever */
}
</style>

JSFIDDLE

For Fancybox v2.0.x

<style type="text/css">
.fancybox-outer {
 background-color: #FF0000; /* or whatever */
}
</style>

For Fancybox v2.1.x

<style type="text/css">
.fancybox-skin {
 background-color: #FF0000 !important; /* or whatever */
}
</style>

JSFIDDLE

Notice the difference between fancybox v2.0.x and v2.1.x

Upvotes: 9

plugincontainer
plugincontainer

Reputation: 630

But if you want a "real border": In your...

$('.fancybox').fancybox({

...set padding : 0,

...and in your css:

.fancybox-outer, .fancybox-inner {position: relative;}

...add, e.g. border:1px solid #f00;

Upvotes: 0

earachefl
earachefl

Reputation: 1890

Change the border-color property, not the background-color. That's what I had to do.

Upvotes: 3

Magnus
Magnus

Reputation: 25774

Using fancybox 2.x, the thing that worked for me was:

<style type="text/css">
.fancybox-skin {
 background-color: #FF0000; /* or whatever */
}
</style>

This seems to set the color of the frame, the width of which is set through the "padding" parameter to the $(".fancybox").fancybox(...) init function.

Upvotes: 4

Related Questions