如何使用我自己的 CSS 设置 Twitter 小部件的样式答案

【问题标题】：How to style Twitter widget using my own CSS如何使用我自己的 CSS 设置 Twitter 小部件的样式
【发布时间】：2014-08-31 02:00:20
【问题描述】：

我有自己的 Twitter 提要设计，我想使用我自己的设计来设置默认提要的样式。有没有办法做到这一点？

问题是您不能使用 CSS 选择器，因为它仅在加载页面后出现。

请查看这张图片，让您更了解我需要什么

谢谢，

【问题讨论】：

“如何设置 twitter 小部件的样式？”- 使用 CSS。 “有没有办法做到这一点？”- 是的，通过使用 CSS 选择器。
您不能使用 CSS 选择器来设置提要的样式，因为它仅在加载页面后才会出现。
加载页面后是否出现其实并不重要。如果您的 CSS 被编写为适当地定位内容并且内容被加载到您的页面（即，不是在 iframe 中，它是其他人的页面），那么您的样式将在加载时应用。
另外，请记住，如果您以他们不喜欢的方式设置 Twitter 内容的样式，Twitter 有时会删除帐户和/或阻止 API 访问。是的，我知道这听起来很疯狂，但这里是 Twitter 的“显示要求”：dev.twitter.com/terms/display-requirements
How to customize twitter widget style?的可能重复

【解决方案1】：

好吧，您可以通过执行以下操作来自定义您的 twitter 小部件：

默认代码

<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID">Tweets by @Test</a>

要删除页眉页脚，只需添加 data-chrome="nofooter transparent noheader transparent" 它将看起来像这样：

<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID" data-chrome="nofooter transparent noheader transparent">Tweets by @Test</a>

有关链接颜色、边框等更多自定义，请参阅本文。 https://dev.twitter.com/docs/embedded-timelines#customization

我希望这会有所帮助:)

【讨论】：

【解决方案2】：

1# 如前所述（通过使用 API）获得完全可定制的时间线，需要您将时间线作为 json 文件 (https://api.twitter.com/1.1/statuses/home_timeline.json) 获取并在显示中手动循环它们。更多细节在这里https://dev.twitter.com/rest/reference/get/statuses/home_timeline

2# 这与你的设计@shadeed9 尽可能接近。大部分限制都在这里https://dev.twitter.com/overview/terms/display-requirements

3# 这个 JS sn-p 将允许您将自定义 CSS 样式添加到 Twitter 嵌入小部件：https://github.com/kevinburke/customize-twitter-1.1 by Kevin Burke

如果这解决了您的问题，请接受！

【讨论】：

【解决方案3】：

如果 twitter 小部件是指嵌入的时间线，请参阅文档 https://dev.twitter.com/docs/embedded-timelines 的“客户端选项”部分，了解您可以设置的选项。

如果您想使用 CSS 完全自定义输出，那么您需要使用 API 编写自己的解决方案来输出可设置样式的内容。

【讨论】：