Add your own custom CSS to modify the Twitter Embeddable Widget
JavaScript Makefile
Switch branches/tags
Nothing to show
Latest commit cad037a Sep 3, 2016 @kevinburke kevinburke Use HTTPS for link

Add custom CSS to the Twitter 1.1 Embed Widget. View a demo


Embed a Twitter Widget

<a class="twitter-timeline"
    data-chrome="noheader noborders transparent nofooter"

Embed the Twitter Javascript, preferably in the footer

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];

Embed the Customize-Twitter JS.

<script src="customize-twitter-1.1.min.js" type="text/javascript"></script>

Finally, initialize the widget. This function will continue to call itself until the Twitter iframe appears, no need for detecting the iframe load on your end.

var options = {
    "url": "/my-styles.css"


Pass these as key/value pairs to the CustomizeTwitterWidget function as you see fit.

  • url: A link to the custom CSS you want to inject into Twitter's iframe.
  • widget_count: In case you have multiple Twitter widgets on a page, use this to ensure the custom CSS gets embedded in all of them. (Default: 1)
  • timeout_length: Specify a custom timeout length, in milliseconds. (Default: 300)

Tested Browsers

This plugin works for the stable versions of the following browsers:

  • Chrome
  • Firefox
  • Opera
  • Safari

As well as:

  • Internet Explorer 10

Other browsers have not been tested yet. If you have feedback, please, send it!