iframe CSS覆盖新的Twitter Widget [英] iframe CSS Override for New Twitter Widget

问题描述

我想自定义新的Twitter小部件，但有一些CSS的问题，似乎不能覆盖他们的这一新的。我尝试搜索解决方案，但找不到任何匹配。

I'm trying to customise the new Twitter widget, but having some problems with the CSS and can't seem to override theirs on this new one. I've tried searching for solutions but can't find any that match.

，右侧导航中的小部件和.timeline类的微调CSS： / p>

Here's my page with the widget in the right-nav and the tweaked CSS for the .timeline class:

.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覆盖， 。

I've started using !important declarations and tried the main #twitter id to override, but neither works.

任何想法都非常感激。

**我显然需要以某种方式编辑iframe，如何有人有一个更清楚的想法如何我的代码（相对于一个教程），这将是巨大的。我还需要更改iframe宽度。

**I apparently need to edit the iframe somehow, but not sure how - if anyone has a clearer idea how I can do that with my code (as opposed to a tutorial) that would be great. I also need to change the iframe width..

推荐答案

我设法使用javascript（我在我的应用程序中使用jQuery！ ）。您必须在iframe加载后应用样式（我没有找到有效的已加载事件，因此我使用轮询策略）。

I managed to do this with javascript (I use jQuery in my application!). You have to apply the styles after the iframe load (I did not find a valid "loaded" event, so I use a polling strategy).

// 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();

这篇关于iframe CSS覆盖新的Twitter Widget的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！