0

How do I override the css of a fancybox?

I'm building a website that uses fancybox on two different pages, and I want to override the fancybox css on one of these pages so the arrows are pushed outside of the box. IE I would like to impart these properties on the fancybox:

.fancybox-prev {
    left: -80px !important;
}

.fancybox-next {
    right: -80px;
}

I can't figure out how to accomplish this and solutions to other relevant stackoverflow problems don't work. I'm sure there's a simple way to do it.

Can anybody help me out?

user1492316
  • 1
  • 1
  • 1

3 Answers3

1
$('.fancybox-prev').attr('style', 'left: -80px !important');

$('.fancybox-next').attr('style', 'right: -80px');
Sparky
  • 98,165
  • 25
  • 199
  • 285
ShaggyInjun
  • 2,880
  • 2
  • 31
  • 52
0

You have to remember about hirarchy of the CSS. Inline CSS are the most important ones, external CSS will be read second. When it comes to the latter, they are read from the top of your CSS file. So writing the style, which you want to use to override a previous one, below, should do the work just fine.

Secondly, you can always use jQuery to do that. ShaggyInjun gave a good example. You should be able to do that by using $(selector).css();.

DamianS1987
  • 302
  • 1
  • 3
  • 13
0

if using fancybox v1.3.4 check: http://fancybox.net/faq No.8 .... it also might be useful to check this.

if using fancybox v2.x check : https://stackoverflow.com/a/8672001/1055987

Basically, you have to set a CSS inline declaration AFTER you have loaded the fancybox css file in order to override those properties.

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306