Can I add custom styles to my embedded Twitter timeline?

April 10, 2017

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!

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive