如何自定义嵌入式 Twitter Feed CSS答案

【问题标题】：How can I customize embedded Twitter Feed CSS如何自定义嵌入式 Twitter Feed CSS
【发布时间】：2018-06-16 01:14:14
【问题描述】：

我需要你们的帮助。目前，我正在从头开始构建一个网站，客户希望将他的 twitter 提要添加到网站的页脚。

但问题是我无法自定义默认的 twitter 提要样式。这是截图请看https://i.imgur.com/Gv28Ky1.png

请帮助我通过 CSS 自定义 twitter 提要。

亲切的问候阿萨德

【问题讨论】：

您真的应该选择stackoverflow.com/tour 并阅读有关stackoverflow.com/help/asking 的更多信息。您有多个相同问题的问题：没有 MCVE，没有展示您自己的努力等。请帮助其他人帮助您。最好的问候

标签： html css twitter

【解决方案1】：

我是一个相对新手，但我使用以下 javascript 函数并在 <body> 元素中调用它取得了一些成功。因为 Twitter 通过脚本获取其样式，所以它最后呈现，因此您的 css 表单中的任何样式都将被否决。修复方法是使用脚本直接覆盖嵌入的 twitter 样式表。

试试这个：

将以下脚本插入您网站的标题中：

<script>
  var widgetCSS = "" +
    "#twitter-widget-0{width: 100% !important;}"+
    ".timeline-Tweet-text{color:red; font-size:20px !important;}" +
    ".timeline-Widget{background-color: red;" +
    ".TweetAuthor-name{color:white !important;}";

  function customTwitter(){
    var w = document.getElementById("twitter-widget-0").contentDocument;

    var s = document.createElement("style");
    s.innerHTML = widgetCSS;
    s.type = "text/css";
    w.head.appendChild(s);
  }
</script>

将 var widgetCSS 的值更改为您希望 CSS 的样子。我使用 chrome 上的检查功能来识别需要更改的类。
最后，调用函数paint();在 html 的正文中，如下所示：
```
<body onload="customTwitter();">
```

...您应该会看到受影响元素的更改。

希望这会有所帮助。

【讨论】：