Styling the new twitter widget (embedded timeline)

Question

A few days/weeks ago, some of my sites' twitter widgets stopped pulling through data properly. Turns out Version 2 twitter widget is deprecated, and the new embedded timeline widget is the only way to go, apparently.

https://dev.twitter.com/blog/planning-for-api-v1-retirement

Except this new widget creates an iframe, which prevents any custom styling of the widget from within my own stylesheets - such as setting the font family, font size, colours, etc.

Is there a workaround? From what I'm reading, you can't apply / inject styles into an iframe, and I can't find any API-way of doing it.

I'd also like to limit the widget to just the 3 most recent tweets; not sure if that's possible anymore, and to remove the vertical scroll bar (probably related to limiting the tweets).

Answer 1

The only solution I found with Twitter's Enhanced Timeline is to use javascript to modify the css after the iframe has loaded.

Needed to use window.setTimeout for it. As jamesnotjim mentioned, make sure you put this in the script block below the body tag.

window.setTimeout(function(){
    $(".twitter-timeline").contents().find(".e-entry-title").css("font-family","sans-serif");
    $(".twitter-timeline").contents().find(".tweet").css("font-family","sans-serif");
  }, 1000);

Answer 2

In the Microsoft MVC world there are helpers in the Microsoft.Web.Helpers library, specifically using:

@Twitter.Profile(...

The above is just a wrapper around the V2 widget, but indicates there is a high usage of that particular widget.

I've looked into your question for a while now (in fact when the deprecation message started appearing) and I have come to the following conclusions:

1. The widget will not be deprecated due to its wide use
2. If it is deprecated a far richer timeline widget will be available
3. Failing this it will be the case of using the API and writing our own widgets, which will be a step back for Twitter