Can I add custom styles to my embedded Twitter timeline?

Biz Cook

Want to customize your twitter timeline to the branding of your website?
Need to delete the media from showing in the embedded feed?
With this simple function, you can customize all kinds of styles to have it fit in seamlessly with your website.

The HTML for the Twitter Feed:

<div class="twitter-block">
<a class="twitter-timeline" data-width="270" data-height="300" data-link-color="#000" data-theme="light" href="" data-chrome="noheader transparent nofooter nofooter noborders">Tweets by YourTwitterHandle</a>

The javascript/jquery for the Twitter Feed:

jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
  //function call to override the base twitter styles
 var customizeTweetMedia = function() {
  //overrides font styles and removes the profile picture and media from twitter feed
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '16px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-family', 'Raleway');
  //also call the function on dynamic updates in addition to page load
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {

Have questions? Comment below!

Last updated by on .

2 thoughts on "Can I add custom styles to my embedded Twitter timeline?"

  1. john says:

    Is there a way to do this according to media queries? I am having difficulty with the length on the large(desktop) and the width on the small(phone).

  2. Andy says:

    That’s awesome, my question is do we place that function after or before the HTML twitter feed code or in the CSS? Also I only need to change the dimensions of my widget, so would I only the first part of that JavaScript that relates to “styles” only?

What Are Your Thoughts?

Your email address will not be published. Required fields are marked *