Add custom styles to your 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="https://twitter.com/YourTwitterHandle" data-chrome="noheader transparent nofooter nofooter noborders">Tweets by YourTwitterHandle</a>
</div>

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
  customizeTweetMedia();
 });
 
 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-avatar.Identity-avatar').remove();
  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() {
   customizeTweetMedia(this);
});
}

Have questions? Comment below!

Last updated by on .

What Are Your Thoughts?

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