title: iframe CSS Override for New Twitter Widget
body: <p>I'm trying to customise the new Twitter widget, but having some problems with the CSS and can't seem to override theirs on this new one. I've tried searching for solutions but can't find any that match.</p>
  
  <p><a href="http://www.inside-guides.co.uk/brentwood/nightlife/bars/lot-75-cafe-bar-412.html" rel="nofollow noreferrer">Here's my page</a> with the widget in the right-nav and the tweaked CSS for the .timeline class:</p>
  
  <pre><code>.timeline {
  margin-bottom:0;
  border:0 !important;
  border-radius:0 !important;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="bg"&gt;
  &lt;h3 class="twitter"&gt;Twitter News&lt;/h3&gt;
  &lt;div id="twitter"&gt;
  &lt;a class="twitter-timeline" href="https://twitter.com/" data-widget-id="268336500536647680"&gt;Tweets by &lt;/a&gt;
  &lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");&lt;/script&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I've started using !important declarations and tried the main #twitter id to override, but neither works.</p>
  
  <p>Any ideas much appreciated.</p>
  
  <p>**I apparently need to edit the iframe somehow, but not sure how - if anyone has a clearer idea how I can do that with my code (as opposed to a tutorial) that would be great. I also need to change the iframe width..</p>