样式化 Twitter 提要 - CSS 不会针对 .timeline-Tweet-text

Question

我正在使用https://publish.twitter.com/ 中描述的以下代码将 Twitter 提要带到我的网站

<a class="twitter-timeline" href="https://twitter.com/ACCOUNT-HERE" data-tweet-limit="3">Tweets by</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Feed 显示正确。但是它使用通过 Twitter 提供的 CSS。

当我使用 Chrome 开发工具检查它时，我可以在推文周围看到以下类：

<p class="timeline-Tweet-text" lang="en" dir="ltr">

所以我认为这将是一个在 CSS 中定位它的简单案例，例如

.timeline-Tweet-text {
}

但是，这不会对推文应用任何样式。为什么不呢？

我还在这里https://dev.twitter.com/web/overview/css 参考了 Twitter 的指导，但这也不起作用。

我想这样做的唯一原因是小部件中使用的字体与我网站上其余 body 文本使用的字体相匹配。

Answer 1

简单地向您的顶级页面添加样式规则是行不通的，因为就浏览器而言，它们是两个不同且独立的文档。

但是，使用 kevinburke 的 Customize Twitter 1.1 project，您应该能够将 CSS 嵌入到时间轴中。它通过将外部 CSS 文件的链接直接注入到该框架内的文档内容中来实现这一点。

在 Kevin 发布的 example 中，它使所有文本变白，看起来有点破，但是当我拿这个例子并将它调整为也将背景变为红色时，我们可以看到它按预期工作，因此您可以进行任何你喜欢的调整，只要你有一个 CSS 文件。

请注意，这只是可能的，因为 Twitter 已配置 platform.twitter.com 以便它可以嵌入到框架中。出于安全原因，现在许多网站都会发送 HTTP 响应标头以防止内容框架化，从而避免人们干预其内容。

Answer 2

来自https://dev.twitter.com/docs/embedded-timelines

自定义选项

嵌入式时间线可用于自定义的浅色和深色主题。浅色主题适用于使用白色或浅色背景并遵循 twitter.com 美学的页面，而深色主题适用于使用黑色或深色背景且看起来更像 Tweetdeck 的页面。

与您的 twitter.com 个人资料一样，您可以为嵌入的时间线选择自定义链接颜色，以便内容与您网站的链接相匹配，并融入您网站的调色板中。

对于主题和链接颜色未提供足够自定义以使推文感觉它们是页面的一部分的网站，我们提供了一组额外的客户端自定义功能。这些设置允许您控制时间线的背景颜色、边框、页眉和页脚，详细信息请参见下面的“客户端选项”部分

您可以使用 CSS * 属性来设置所有页面的字体...

示例：（这可能对您有用）

#twitterFeed * {
font-family: "Lato" !important;
}

Twitter 小部件样式的参考链接：

https://dev.twitter.com/web/overview/css

https://www.solodev.com/blog/web-design/styling-your-websites-twitter-feed.stml

Answer 3

不幸的是（除非它最近已更改）您无法在 iframe 中操作 CSS

https://jsfiddle.net/tm94g9n4/5/

.timeline-Tweet-text {color: red;}

我在文本中添加了红色，但正如您在检查时看到的那样，它甚至没有显示为被覆盖。它根本没有被引用。

我认为您需要为此查看自定义库。我不能推荐任何，因为我以前没有这样做过。

https://stackoverflow.com/a/6495816/1379450

希望对你有帮助

编辑

似乎有可能（重复问题） How to apply CSS to iframe?

Answer 4

我最近在我的项目中实现了一个简单的解决方案，您可以自定义各种样式，使其与您的网站品牌无缝匹配。

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