title: JQuery FancyBox overlay color
body: <p>I have tried to get a Fancybox iFrame to load automatically and to give the overlay a different color.
  So far so good on the autoload.</p>
  
  <p>Got it working.
  The color I couldn't get to change.</p>
  
  <p>Now I tried several examples many listed here. But I guess I am doing something wrong.</p>
  
  <p>In my head code I am loading : </p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  $(document).ready(function(){  
      $('.fancybox').fancybox();
  
      // Change title type, overlay closing speed
      $(".fancybox-effects-a").fancybox({
          helpers: {
              'overlayColor'             :        '#ec2d2d',
  
              title : {
                  type : 'outside'
              },
              overlay : {
                  speedOut : 30,
                  css: {
                      'background-color': '#ec2d2d'
                  },
              },
              overlayColor: {
                  css: '#ec2d2d',             
              }
          }
      });
  
  
  
      $("#hidden_link").fancybox().trigger('click');
  
  });  
  &lt;/script&gt;
  </code></pre>
  
  <p>And my HTML is like this :</p>
  
  <pre><code>&lt;a class="fancybox fancybox.iframe" id="hidden_link" href="iframe.html" title="HOI"&gt;Iframe&lt;/a&gt;
  </code></pre>
  
  <p>It opens onload. But I cannot get the overlay to turn red.</p>
  
  <p>What am I missing here?
  I have tried as you see several options. But none used the right way.</p>
  
  <p>TIAD</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>When I try to add this code:</p>
  
  <pre><code>            $(".fancybox").fancybox({
              beforeShow : function() {
                  $('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
              }
  </code></pre>
  
  <p>I seem to make a mess of the Syntax. Because it doesn't respond to this script. But I am clueless of how to do this correctly.</p>
  
  <p>This is what I got now:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(document).ready(function(){       
          $(".fancybox").fancybox({
              beforeShow : function() {
                  $('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
              },
              helpers: {
                  title : {
                      type : 'outside'
                  },
                  overlay : {
                      speedOut : 30,
                      css: {
                          'background-color': '#ec2d2d'
                      },
                  },
                  overlayColor: {
                      css: '#ec2d2d',             
                  }
              }
          });
  
          $("#hidden_link").fancybox().trigger('click');
      }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>Also adding the CSS code makes no difference:</p>
  
  <pre><code>        #fancybox-overlay{
          background-color:#ec2d2d !important;
      }
  </code></pre>
  
  <p>Could it be that there is another JS file loaded that overwrites all of my settings??</p>
  
  <p>These are the libraries loaded:</p>
  
  <pre><code>    &lt;script type="text/javascript" src="../lib/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" /&gt;
  &lt;script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" /&gt;
  &lt;script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"&gt;&lt;/script&gt;
  </code></pre>