如何自定义嵌入式 Twitter Feed CSS
Posted
技术标签:
【中文标题】如何自定义嵌入式 Twitter Feed CSS【英文标题】：How can I customize embedded Twitter Feed CSS 【发布时间】：2018-06-16 01:14:14 【问题描述】：我需要你们的帮助。目前，我正在从头开始构建一个网站，客户希望将他的 twitter 提要添加到网站的页脚。
但问题是我无法自定义默认的 twitter 提要样式。这是截图请看https://i.imgur.com/Gv28Ky1.png
请帮助我通过 CSS 自定义 twitter 提要。
亲切的问候 阿萨德
【问题讨论】：
您真的应该选择***.com/tour 并阅读有关***.com/help/asking 的更多信息。您有多个相同问题的问题：没有 MCVE，没有展示您自己的努力等。请帮助其他人帮助您。最好的问候 【参考方案1】：我是一个相对新手，但我使用以下 javascript 函数并在 <body> 元素中调用它取得了一些成功。因为 Twitter 通过脚本获取其样式，所以它最后呈现，因此您的 css 表单中的任何样式都将被否决。修复方法是使用脚本直接覆盖嵌入的 twitter 样式表。
试试这个：
将以下脚本插入您网站的标题中：
<script>
var widgetCSS = "" +
"#twitter-widget-0width: 100% !important;"+
".timeline-Tweet-textcolor:red; font-size:20px !important;" +
".timeline-Widgetbackground-color: red;" +
".TweetAuthor-namecolor: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();">
...您应该会看到受影响元素的更改。
希望这会有所帮助。
【讨论】：
以上是关于如何自定义嵌入式 Twitter Feed CSS的主要内容，如果未能解决你的问题，请参考以下文章