1

I've read a few other threads on CSS overrides for the Twitter widget. I've tried adding 

!important

but it hasn't taken affect. All I want to do is hide the middle section of the widget. When I used firebug the div disappears. Currently I am using,

#twitter-widget-0 .timeline .stream {
display: none !important;
}

Please could someone help me with either some javascript or jQuery. Any help would be amazing!

Ankit Jaiswal
  • 22,859
  • 5
  • 41
  • 64
Stuart Nelson
  • 307
  • 2
  • 13
  • how are you using the widget? is this a third party widget loaded with js from another server? If so, you can't edit their `CSS` – Novocaine Jun 20 '13 at 09:27
  • 1
    also, sometimes the widgets are loaded in an iFrame. If that's the case it won't be possible for you to override the CSS. – mohkhan Jun 20 '13 at 09:28
  • possible duplicate of [How to override styles in Iframe?](http://stackoverflow.com/questions/6526187/how-to-override-styles-in-iframe) – Pete Jun 20 '13 at 09:52

3 Answers3

4

The new Twitter widget works by inserting an <iframe> into your document. Because of this, you can't modify the style with CSS in the parent document due to Same Origin Policy.

The only changes you can make to it are the settings that Twitter expose through data-* attributes. For example

data-chrome="noheader nofooter" data-link-color="#cc0000"

There is no option to hide the body, you can only hide the header or footer.

Documentation

The old Twitter widget worked differently, it inserted elements directly into the current document instead of an iframe, and so the old one allowed you to override styles.

If the Twitter widget isn't flexible enough for what you want then you can always use the Twitter API to obtain the tweets and essentially produce your own widget. The downside to this is you will have to manage the API calls to get the tweets and implement caching etc.

MrCode
  • 63,975
  • 10
  • 90
  • 112
  • This solved my issue because I can just remove the data that I dont want Twitter to set in the first place and then I can manipulate the rest on my end. Thanks for the link to the documentation. – Michael Tunnell Aug 29 '14 at 17:59
1

It is possible, I'm using jQuery:

    (function ($) {

  window.setTimeout(function(){
    $(".twitter-timeline").contents().find(".e-entry-title").attr("style", "font-family: 'Gill Sans W02 Book' !important; font-size: 14px;");
  }, 1000);

})(jQuery);
Maarten Hartman
  • 1,611
  • 6
  • 26
  • 45
0

You can attempt to manipulate it using javascript.

var frm = frames['iframeId'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

This way you are placing a css style into your iframe.

JREN
  • 3,572
  • 3
  • 27
  • 45
  • Hi guys. Sorry i haven't replied sooner. Thank you for all the responses! @JREN Where would i put this script on the page? http://www.thescribblingape.com/contact – Stuart Nelson Jun 25 '13 at 16:54
  • After your frame so that your frame loads first and then you inject it into your frame. – JREN Jun 26 '13 at 07:03