fancybox2-rails：覆盖样式

Question

我想使用fancybox2-rails覆盖默认样式。特别是，我想在幻灯片放映之外设置导航，如下所示：

http://jsfiddle.net/Xh3B2/

不幸的是，这并不适用于我尝试的任何传统方式，例如在我的视图中手动覆盖css：

$(function(){
    // override fancybox default styling
    console.log("overriding styling");
    $('.fancybox').css("margin", "20px 60px 20px 60px");
    $('.fancybox-prev').css("left", "-60px");
    $('.fancybox-next').css("right", "-60px");
}

在我的浏览器中，我可以看到样式是在文件jquery.fancybox.css中定义的，但我无法访问此文件。我该如何改变造型？

Answer 1

为了解决这个问题，我创建了文件

fancybox_and_overrides.css.scss

并将其放在我的样式表文件夹中。

然后我编辑了内容，如下所示：

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

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

.fancybox-nav{
    width: 60px !important;
}

它有效！