Comment changer fancybox couleur de la bordure

J'ai essayé de changer fancybox la frontière de la couleur de blanc. J'ai réussi à cibler chaque partie de fancybox à l'exception de la frontière. Comment puis-je changer la couleur de la fancybox frontière?

  • Quelle est la version de fancybox?
  • la version 1.3.4.......
InformationsquelleAutor earachefl | 2012-02-12
  1. 10

    Si vous utilisez 1.3.4, la frontière est en #fancybox-content règle css. Un rapide firebug ou devtools inspecter va vous le dire.

    Mise à JOUR [Mars 2015] pour les deux versions:

    Pour Fancybox v1.3.4

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

    JSFIDDLE

    Pour Fancybox v2.0.x

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

    Pour Fancybox v2.1.x

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

    JSFIDDLE

    Avis la différence entre fancybox v2.0.x et v2.1.x

    • En fait, c'est ce que j'ai fait, et c'est la première chose que j'ai essayé, avec l'ajout de !important. Sur mon site, au moins, que la règle change tout le contenu, MAIS la frontière. Et oui, je suis en utilisant 1.3.4. D'autres idées?
    • Pouvez-vous lier votre site?
    • J'ai décidé de supprimé ma réponse et modifier le vôtre et ajouter le code pour la version 2.x.
    • Changement de border-radius sur le contenu est d'avoir l'effet indésirable de montrer la place #div extérieure de l'arrière-plan opaque derrière elle, je suis en utilisant fancybox 1.3.4 et paramètre #extérieure au lieu de cela fait l'affaire pour moi.
    • Il était l'arrière-plan sur fancybox-peau de classe qui a fait le tour. Fancybox version 2.1.4 .fancybox-peau { background: #1a2855;}
    InformationsquelleAutor elclanrs
  2. 5

    À l'aide de fancybox 2.x, la chose qui a fonctionné pour moi a été:

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

    Ce qui semble définir la couleur de l'image, dont la largeur est fixée par l'intermédiaire du "padding" paramètre de l' $(".fancybox").fancybox(...) la fonction init.

    • merci, cela a fonctionné pour moi en utilisant les dernières fancybox2 construire (comme de 6/14/2013)
    • C'est la bonne route à compter d'aujourd'hui, fancyBox v2.1.5
    InformationsquelleAutor Magnus
  3. 3

    Changer le border-color propriété, et non la couleur d'arrière-plan. C'est ce que j'avais à faire.

    • Pour ceux qui ont voté cela, mon commentaire au sujet de avoir un peu de café a été adressée à moi-même, et en tant que telle pourrait être considéré comme l'autodérision dans un (espérons-le) de manière humoristique. Au moins, c'est la façon dont j'ai prévu de venir à travers. L'humour est présent pas toléré ici?
    • Je suppose que le vote pouvait faire de l'humour aussi 😉
    • hm... dans un univers alternatif, peut-être.
    InformationsquelleAutor earachefl
  4. 0

    Mais si vous voulez un "véritable frontière": Dans votre...

    $('.fancybox').fancybox({

    ...set padding : 0,

    ...et dans ton css:

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

    ...ajouter, par exemple, border:1px solid #f00;

    InformationsquelleAutor plugincontainer