Twitter Embedded Timeline CSS Override

twitter-feed.html

<div class="twitter-feed">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
              <!-- Twitter Embed Code -->
                <a class="twitter-timeline" href="https://twitter.com/UPMCPhysicianEd" 
                data-chrome="noheader nofooter noborders transparent noscrollbar" 
                data-tweet-limit="1" dnt="true">Tweets by UPMC Physician Education</a>
                <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
               <!-- / Twitter Embed Code -->
            </div>
        </div>
    </div>
</div>

twitter-override.js

// Twitter Overrides -----------------------------------------------------------------------------
$('.twitter-feed').delegate('#twitter-widget-0', 'DOMSubtreeModified propertychange', function () {
    customizeTweetMedia();
});

var customizeTweetMedia = function () {
    // CSS Overrides
    $('.twitter-feed').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');
    $('.twitter-feed').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
    $('.twitter-feed').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove();
    $('.twitter-feed').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '16px');
    $('.twitter-feed').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-family', 'Raleway');    
    $('.twitter-feed').find('.twitter-timeline').contents().find('p.timeline-tweet-text').css('font-family', 'Libre Baskerville');
    $('.twitter-feed').find('.twitter-timeline').contents().find('p.timeline-tweet-text').css('font-size', '16px');
    $('.twitter-feed').find('.twitter-timeline').contents().find('p.timeline-tweet-text').css('line-height', '1.6');
    $('.twitter-feed').find('.twitter-timeline').contents().find('ul.timeline-tweet-actions').css('display', 'none');

    // Call the function on dynamic updates in addition to page load
    $('.twitter-feed').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function () {
        customizeTweetMedia(this);
    });
}

Brilliant - thank you for this.. a simply presented way to customise CSS in the new Twitter embedded stream that for some strange reason doesn't provide an easy way to customise CSS.

This is brilliant. My only question. Is there a way to make the entire thing fit inside something 180px wide? Height's not a issue. Thank you.

I could use some help with this GIT ...

I placed the script in the HEAD and also tried just before BODY close in Wordpress ... the overrides are not taking. Can you help me to understand this one a bit better?

Thanks heaps ...
Woody House
Online Graphics

Hi thanks for this code, It is working fine but I get this warning "Use of Mutation Events is deprecated. Use MutationObserver instead." and also the browser stops and shows a pop up to stop or wait for the script to finish.

Help is appreciated.
Thank you please

Awesome!