Customizing a Twitter Tweet on Webpage

Question

What I'm trying to accomplish:

When I inspect the element and get the appropriate classes and then apply the styles, nothing seems to happen. Why is this? How can I go about changing the styles of my tweet for my webpage?

.Tweet-header.u-cf{
  display:none !important;
  
}
div#twitter-widget-0 {
    background: orange;
}

<script src="https://platform.twitter.com/widgets.js"></script>
<blockquote class="twitter-tweet" data-lang="en"><p lang="ro" dir="ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut porttitor elit. Nulla mattis sem et ullamcorper pretium. Nunc malesu</p>&mdash; Jason (@jasontestsus) <a href="https://twitter.com/jasontestsus/status/699685458146623489">February 16, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

My Fiddle: https://jsfiddle.net/jzhang172/4ewm1hjd/

Is the fiddle working? I'm not clear on what the exact issue is. — j08691, Feb 16 '16 at 20:27
Possible duplicate of [How to style Twitter widget using my own CSS](http://stackoverflow.com/questions/24663924/how-to-style-twitter-widget-using-my-own-css) — 8eecf0d2, Feb 16 '16 at 20:32
The fiddle is working on my end, is the twitter not working on yours? When I tried to embed it on stack, it didn't display the twitter, but my URL fiddle does. — Snorlax, Feb 16 '16 at 20:36

twernt · Accepted Answer · 2016-02-18T11:44:05.277

You can use the Twitter widget events to detect when the tweet has been loaded, then update the CSS as needed:

$(function() {
  twttr.events.bind('loaded', function(event) {
    var $iframe = $(frames['twitter-widget-0']);
    $('#twitter-widget-0', $iframe.contents()).css({
      'background-color': 'orange'
    });
    $('.Tweet-header.u-cf', $iframe.contents()).css({
      'display': 'none'
    });
  });  
});

The reason your CSS isn't applied to the tweet widget is that the widget is in an iframe and, as far as I know, an iframe will ignore CSS rules in its parent document unless the iframe and the parent document are in the same domain.

Customizing a Twitter Tweet on Webpage

1 Answers1