我已经阅读了关于Twitter小部件的CSS覆盖的一些其他线程。我试过添加
!important
但它没有生效。我想做的就是隐藏小部件的中间部分。当我使用萤火虫时,div消失了。目前我正在使用,
#twitter-widget-0 .timeline .stream {
display: none !important;
}
请有人可以用javascript或jQuery来帮助我。任何帮助都会很棒!
答案 0 :(得分:4)
新的Twitter小部件的工作原理是在文档中插入<iframe>
。因此,由于Same Origin Policy,您无法在父文档中使用CSS修改样式。
您可以对其进行的唯一更改是Twitter通过data-*
属性公开的设置。例如
data-chrome="noheader nofooter" data-link-color="#cc0000"
没有隐藏正文的选项,只能隐藏页眉或页脚。
旧的Twitter小部件的工作方式不同,它将元素直接插入当前文档而不是iframe,因此旧的小部件允许您覆盖样式。
如果Twitter小部件不够灵活,无法满足您的需求,那么您始终可以使用Twitter API获取推文,并基本上生成您自己的小部件。这样做的缺点是你必须管理API调用以获取推文并实现缓存等。
答案 1 :(得分:1)
有可能,我正在使用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);
答案 2 :(得分:0)
您可以尝试使用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);
这样您就可以将css样式放入iframe中。