14

新しい 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>

私は !important 宣言の使用を開始し、メインの #twitter ID を上書きしようとしましたが、どちらも機能しません。

どんなアイデアでも大歓迎です。

**どうやらiframeを編集する必要があるようですが、その方法がわかりません-チュートリアルとは対照的に、自分のコードでそれを行う方法を誰かがより明確に考えているなら、それは素晴らしいことです. iframe の幅も変更する必要があります。

4

8 に答える 8

27

私は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();
于 2012-11-26T13:03:34.137 に答える
7

興味のある人にとっては、これには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();
于 2013-04-05T16:44:06.013 に答える
6

@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

于 2013-07-16T05:26:28.390 に答える
5

これは質問の CSS の側面に直接答えるものではありませんが、完全を期すために、ウィジェットに渡された data- 属性を使用して、必要なものの一部 (境界線/ヘッダーを非表示にするなど) を実行できることに注意する価値があると思います。

<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 アーム レスリングを最小限に抑えることで、パフォーマンス上の利点が得られるのではないでしょうか。

于 2013-11-20T10:36:52.140 に答える
3

彼らはiframeを作成するので、それは別のドキュメントです。

別のドキュメントの要素のスタイルを設定することはできないため、Twitterが独自のスタイルシートをiframeに埋め込むためのフックを提供しない限り、スタイルを設定することはできません。

Twitterでは、ウィジェットのリンクカラーのスタイルを設定し、明るい/暗いテーマを選択することしかできません。

または、 Twitter APIを使用して独自のウィジェットを作成し、それを好きなようにスタイル設定することもできます。

于 2012-11-13T13:49:09.423 に答える
1

質問がされたときにそれが可能だったかどうかはわかりませんが、今では可能です。ドキュメントを確認してください：

<a class="twitter-timeline" data-chrome="nofooter" ....">Tweets</a>
于 2013-05-15T11:18:44.250 に答える
1

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"});
    });
});
于 2014-12-08T19:00:03.543 に答える
0

上記のように、別のオリジン iframe で CSS を変更することはできません。以下にいくつかの情報を示します。

CSSをiframeに適用する方法は?

http://www.jquery4u.com/dom-modification/jquery-change-css-iframe-content/

于 2012-11-13T14:03:02.853 に答える