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

标签 html css twitter

我正在使用以下代码将 Twitter 提要带到我的站点,代码在 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>

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

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

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

所以我认为在 CSS 中定位这个是一个简单的例子,例如

.timeline-Tweet-text {
}

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

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

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

最佳答案

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

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

在凯文的发表example , 它使所有文本变白,看起来有点破损,但是当我拿这个例子并将其调整为也将背景变为红色时,我们可以看到它按预期工作,因此您可以根据需要进行任何调整,只要您有一个 CSS 文件。

Screenshot of twitter feed with red background

请注意,这是唯一可能的,因为 Twitter 已配置 platform.twitter.com 以便它可以嵌入框架中。出于安全原因,如今许多网站都会发送 HTTP 响应 header 以防止内容被框化,从而避免人们干扰其内容。

关于html - 样式化 Twitter 提要 - CSS 不会针对 .timeline-Tweet-text,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40674291/

相关文章:

CSS - 需要帮助在流体宽度 div 中水平居中内容

javascript - 将用户/计算机分数添加到推文

javascript - 如何通过 Backbone 动态加载脚本?

html - 对齐 float div 旁边的元素并填充剩余空间

Javascript/jQuery 不会隐藏 HTML 元素

javascript - 无法使用 Twitter API 获得 promise 值

twitter - 使用 Google Apps 脚本将推文发布到我的供稿

javascript - 日期时间表单如何发送纪元格式而不是格式化日期?

html - 将背景扩展到 100% 的 bootstrap 3 .row

javascript - 此 javascript 是否有任何原因无法更改我的 IFrame 上的 "src"属性?