Styling your Twitter Widget The Crazy Way

Twitter provides a convenient widget to display tweets on your website. Unfortunately, the widget generates an iframe which is placed into the page. These frames are difficult to style, since all the browsers render any content in an iframe as if it were a separate page. Any styles you write for the classes embedded in the frame will not be applied to those classes.

However, due to the relatively lax security settings Twitter applies to it’s frame, we can use JavaScript to parse the DOM and set the styles directly in the elements. It’s not the prettiest solution by any means, but it is effective.

<script type="text/javascript">
    // This script will style the widget.
    jQuery(document).ready(function () {
        window.setTimeout(function () { // Wrapping it in the setTimeout gives the iframe time to load.
            jQuery(".twitter-timeline").contents().find(".tweet").css({
                "position": "relative",
                "width": "23%",
                "min-height": "150px",
                "display": "inline-block",
                "vertical-align": "top",
                "color": "#787878",
                "font-size": "1rem",
                "font-family": "'Source Sans Pro', sans-serif",
                "border-right": "1px solid #d9d6d4",
                "padding": "0 10px 0 10px",
                "margin": "25px 0"
            });
        }, 1500);
    });
</script>

Written on September 19th, 2014 by Dan Walker

Want to read more?

If you’ve enjoyed what you’ve seen so far, you might like some of my other posts. Visit the archive to see all of my past writings.

Blog Archive »
 

About the Author

Dan Walker is a programmer from Grand Rapids, MI. He works at Gordon Food Service.

More About Dan »

Get in touch