如何覆盖嵌入推文的样式表

Posted 2023-03-28

【中文标题】如何覆盖嵌入推文的样式表

【英文标题】：How to overwrite style sheets for embedded Tweets

【发布时间】：2018-02-22 00:21:02

【问题描述】：

我正在尝试覆盖CSS for embedded Tweets。比如我刚刚尝试更改font-size，但它不起作用。

jsfiddle

css

twitterwidget, blockquote, .Tweet, blockquote.Tweet, .twitter-tweet, twitterwidget.twitter-tweet, p, blockquote p, blockquote.Tweet p, twitterwidget.twitter-tweet p
  font-size: 26px !important;

【问题讨论】：

你可以用纯 CSS 来做到这一点，因为内容来自 iframe

抱歉，5 分钟后无法编辑评论。我的意思是你 CAN NOT 为带有纯 CSS 的 iframe 中的内容应用样式。

@JavaEvgen 我明白了。这是否意味着他们的文档有误？为什么他们说有可能，如果不是？

【参考方案1】：

从您链接到的文档中，您似乎可以更改后备演示文稿的样式，但不能更改完整样式的常规版本。常规版本使用 iframe 显示，如果我没记错的话，您无法从父页面应用样式。这可能是设计使然——Twitter 不希望您弄乱嵌入内容的品牌。

编辑：例如，如果您在链接的文档页面上禁用 javascript，则推文确实会使用后备标记呈现，并且应用您的样式。

【讨论】：

什么是后备演示？

当你嵌入一条推文时，它是使用块引用和一些 JavaScript 的链接来完成的，它用 iframe 替换块引用，使推文看起来像 Twitter 想要的那样。如果说使用 JavaScript 替换失败，则保留原始块引用，这就是您可以更改样式的内容。

感谢您的回复。如果我禁用 JavaScript，我可以覆盖 css，但这不是解决方案，我不明白为什么他们没有在文档中提到这一点。

【参考方案2】：

万一其他人在搜索 我最近在我的项目中实现了一个简单的解决方案，您可以自定义各种样式以使其与您的网站品牌无缝契合。希望对您有所帮助。

 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('.timeline-Tweet-text').css('font-size', '12px');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-family', "'Proxima Nova', lato, sans-serif");

    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '12px');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-family', "'Proxima Nova', lato, sans-serif");


    //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);
    );

Link to my complete example