CSS覆盖twitter feed小部件

CSS Override for twitter feed widget

本文关键字：小部 feed twitter 覆盖 CSS      更新时间：2023-09-26

我读过一些关于Twitter小部件的CSS覆盖的其他线程。我试过添加

!important

但它没有起作用。我要做的就是隐藏小部件的中间部分。当我使用firebug时，div就消失了。目前我使用的是

#twitter-widget-0 .timeline .stream {
display: none !important;
}

请有人帮助我无论是一些javascript或jQuery。任何帮助将是惊人的!

这个新的Twitter小部件通过在文档中插入一个<iframe>来工作。因此，由于同源策略，你不能用父文档中的CSS修改样式。

您可以对其进行的唯一更改是Twitter通过data-*属性公开的设置。例如

data-chrome="noheader nofooter" data-link-color="#cc0000"

没有隐藏正文的选项，你只能隐藏页眉或页脚。

文档

旧的Twitter小部件工作方式不同，它直接将元素插入当前文档而不是iframe，因此旧的小部件允许您重写样式。

如果Twitter小部件不够灵活，那么您总是可以使用Twitter API来获取tweet并基本上生成您自己的小部件。这样做的缺点是你将不得不管理API调用来获取tweet和实现缓存等。

这是可能的，我使用jQuery:

    (function ($) {
  window.setTimeout(function(){
    $(".twitter-timeline").contents().find(".e-entry-title").attr("style", "font-family: 'Gill Sans W02 Book' !important; font-size: 14px;");
  }, 1000);
})(jQuery);

您可以尝试使用javascript来操作它。

var frm = frames['iframeId'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

这样你就可以在你的iframe中放置一个css样式。

相关文章：