iframe CSS Override pour le nouveau widget Twitter

J'ai réussi à le faire avec javascript (j'utilise jQuery dans ma demande!). Vous devez appliquer les styles après l'iframe de la charge (je n'ai pas trouver de "chargé" de l'événement, j'ai donc utiliser une stratégie d'interrogation).

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

J'ai adapté le code de @Sebastiaan Ordelman et ajouté quelques commentaires (en se référant aux valeurs de la vieille API). C'était ma tentative de faire correspondre l'ancienne API dans un court laps de temps. Placez ce code une fois que votre nouveau copier et coller le code de la nouvelle widget 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>

Image du changement: http://img837.imageshack.us/img837/1139/btjc.png

Ils créer un iframe, donc c'est un autre document.

Vous ne pouvez pas les éléments de style dans un autre document, de sorte qu'il n'est pas possible, à moins que twitter offre un crochet pour intégrer votre propre feuille de style dans leur iframe..

Twitter ne permet que de style le lien de la couleur du widget et de choisir une lumière/obscurité thème.

Alternativement, vous pouvez créer votre propre widget à l'aide de la l'API twitter et puis vous pouvez définir le style de toute façon que vous voulez..

Comme dit ci-dessus, vous ne pouvez pas modifier le CSS dans une origine différente de l'iframe, voici quelques infos:

Comment appliquer le style CSS à iframe?

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