设置Twitter提要样式 - CSS不会以.timeline-Tweet-text为目标

Question

我正在使用以下代码将Twitter Feed引入我的网站，该代码在https://publish.twitter.com/

中有所描述

<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 {
}

但是，这不适用于推文的任何样式。为什么不呢？

我也在这里提到了Twitters的指导https://dev.twitter.com/web/overview/css，但这也行不通。

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

Answer 1

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

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

在Kevin发表的example中，它使所有文本都显示为白色，看起来有点破碎，但是当我采用这个例子并将其调整为也将背景变为红色时，我们可以看到它＆＃ 39;按预期工作，你可以做任何你喜欢的调整，前提是你有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