我想自定义新的Twitter的小部件，但有一些问题的CSS似乎并不能覆盖这个新的他们。 我试图寻找解决方案，但无法找到任何匹配。
这里是我的网页 ，在右侧导航，为.timeline类微调的CSS小部件：
.timeline {
margin-bottom:0;
border:0 !important;
border-radius:0 !important;
-webkit-border-radius:0;
-moz-border-radius:0;
}
HTML：
<div class="bg">
<h3 class="twitter">Twitter News</h3>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/" data-widget-id="268336500536647680">Tweets by </a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div>
我已经开始使用！重要宣言，并试图在主#twitter ID覆盖，但既不工程。
任何想法非常赞赏。
**我显然需要以某种方式编辑的iframe，但不知道如何 - 如果任何人有一个更清晰的想法，我怎么能做到这一点与我的代码（而不是一个教程），这将是巨大的。 我还需要改变iframe的宽度..
Answer 1:
我设法用JavaScript来做到这一点（我使用jQuery在我的应用程序！）。 你必须在iframe装载后应用的样式（我没有找到一个有效的“加载”事件，所以我用一个轮询策略）。
// Customize twitter feed
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
setTimeout( function() {
if ( $('[id*=twitter]').length ) {
$('[id*=twitter]').each( function(){
if ( $(this).width() == 220 ) {
$(this).width( 198 ); //override min-width of 220px
}
var ibody = $(this).contents().find( 'body' );
ibody.width( $(this).width() + 20 ); //remove scrollbar by adding width
if ( ibody.find( '.timeline .stream .h-feed li.tweet' ).length ) {
ibody.find( '.timeline' ).css( 'border', 0 );
ibody.find( '.timeline .stream' ).css( 'overflow-x', 'hidden' );
ibody.find( '.timeline .stream' ).css( 'overflow-y', 'scroll' );
ibody.find( '.timeline-header').hide();
ibody.find( '.timeline-footer').hide();
}
else {
$(this).hide();
}
});
}
hideTwitterAttempts++;
if ( hideTwitterAttempts < 3 ) {
hideTwitterBoxElements();
}
}, 1500);
}
// somewhere in your code after html page load
hideTwitterBoxElements();
Answer 2:
这是jQuery的不感兴趣的人。
更新，更好的解决方案，不依赖于投票，因此不会对场合无样式布局的闪光：
twttr.events.bind('rendered',function(){
[].slice.call(document.querySelectorAll('iframe.twitter-timeline')).forEach(function(e,i,a){
var fE = e.contentDocument.getElementsByClassName('timeline-footer');
if(fE.length){
fE[0].style.backgroundColor='transparent';
}
});
});
旧版：
// Customize twitter feed
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
setTimeout( function() {
var list = document.getElementsByTagName('iframe');
if (list.length ) {
Array.prototype.forEach.call(
list,
function(element){
var footerE = element.contentDocument.getElementsByClassName('timeline-footer')[0];
footerE.style.backgroundColor="transparent";
});
}
hideTwitterAttempts++;
if ( hideTwitterAttempts < 3 ) {
hideTwitterBoxElements();
}
}, 1500);
}
hideTwitterBoxElements();
Answer 3:
我改编自@Sebastiaan Ordelman代码，并加入了一些意见（指从旧的API值）。 这是我试图在很短的时间量相匹配的旧的API。 将此代码放置在新的Twitter微件新的复制和粘贴代码之后。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
setTimeout( function() {
if ( $('[id*=twitter]').length ) {
$('[id*=twitter]').each( function(){
var ibody = $(this).contents().find( 'body' );
if ( ibody.find( '.timeline .stream .h-feed li.tweet' ).length ) {
ibody.find( '.customisable-border' ).css( 'border', 0 );
ibody.find( '.timeline' ).css( 'background-color', '#004A7B' ); //theme: shell: background:
ibody.find( 'ol.h-feed' ).css( 'background-color', '#0575A1' ); //theme: tweets: background:
ibody.find( 'ol.h-feed' ).css( 'border-radius', '5px 5px 5px 5px' );
ibody.find( 'li.tweet' ).css( 'border-bottom', '1px dotted #FFFFFF' ); //theme: tweets: color:
ibody.find( 'li.tweet' ).css( 'color', '#FFFFFF' ); //theme: tweets: color:
ibody.find( '.customisable:link' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
ibody.find( '.footer' ).css( 'visibility', 'hidden' ); //hide reply, retweet, favorite images
ibody.find( '.footer' ).css( 'min-height', 0 ); //hide reply, retweet, favorite images
ibody.find( '.footer' ).css( 'height', 0 ); //hide reply, retweet, favorite images
ibody.find( '.avatar' ).css( 'height', 0 ); //hide avatar
ibody.find( '.avatar' ).css( 'width', 0 ); //hide avatar
ibody.find( '.p-nickname' ).css( 'font-size', 0 ); //hide @name of tweet
ibody.find( '.p-nickname' ).css( 'visibility', 'hidden' ); //hide @name of tweet
ibody.find( '.e-entry-content' ).css( 'margin', '-25px 0px 0px 0px' ); //move tweet up (over @name of tweet)
ibody.find( '.dt-updated' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
ibody.find( '.full-name' ).css( 'margin', '0px 0px 0px -35px' ); //move name of tweet to left (over avatar)
ibody.find( 'h1.summary' ).replaceWith( '<h1 class="summary"><a class="customisable-highlight" title="Tweets from fundSchedule" href="https://twitter.com/fundschedule" style="color: #FFFFFF;">fundSchedule</a></h1>' ); //replace Tweets text at top
ibody.find( '.p-name' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
}
else {
$(this).hide();
}
});
}
hideTwitterAttempts++;
if ( hideTwitterAttempts < 3 ) {
hideTwitterBoxElements();
}
}, 1500);
}
// somewhere in your code after html page load
hideTwitterBoxElements();
</script>
改变形象： http://img837.imageshack.us/img837/1139/btjc.png
Answer 4:
这并不直接回答这个问题的CSS方面，但我认为这是值得一提的完整性，一些你想要的东西（如隐藏边框/头），可以使用小部件通过数据 - 属性来完成：
<a class="twitter-timeline" href="https://twitter.com/twitterapi"
data-widget-id="YOUR-WIDGET-ID-HERE"
data-theme="dark"
data-chrome="noheader nofooter noborders noscrollbar transparent"
data-link-color="#cc0000"
width="200"
height="300"
>Tweets by @twitterapi</a>
https://dev.twitter.com/docs/embedded-timelines#customization
也许有一个性能优势的地方可能减少JavaScript的手臂摔跤？
Answer 5:
他们创造的iframe，所以它是另一个文档。
你不能在其他文档样式元素，所以它是不可能的，除非Twitter提供一个钩子嵌入您自己的样式表在他们的iframe中..
Twitter的只允许风格小部件的链接颜色 ，并挑选光/黑暗的主题。
另外，您也可以使用创建自己的小工具Twitter的API ，然后你可以风格它反正你想..
Answer 6:
我不知道是否有可能再回来时，有人问，但现在则检查文档 ：
<a class="twitter-timeline" data-chrome="nofooter" ....">Tweets</a>
Answer 7:
正如上面所说的，你不能在不同来源的iframe更改CSS，这里是一些信息：
如何应用CSS来的iframe？
http://www.jquery4u.com/dom-modification/jquery-change-css-iframe-content/
Answer 8:
它可以更好地使用Twitter的事件触发结构。
按https://dev.twitter.com/web/javascript/loading
<script>window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src= "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));</script>
每https://dev.twitter.com/web/javascript/events您的活动和转播看起来是这样的（记住这个例子使用jQuery的你可以选择一个javascript唯一的方法）
twttr.ready( function(twttr){
twttr.events.bind("rendered", function(tw_event){
var tw_iframe = ev.target;
//the following is custom jquery code to do various
//css overrides based on selectors
var twitterbody = $(tw_iframe).contents().find( 'body' );
twitterbody.find(".avatar").hide();
twitterbody.find("li.tweet").css({padding: "2px"});
});
});
文章来源: iframe CSS Override for New Twitter Widget
