web-dev-qa-db-fra.com

iframe Remplacement CSS pour le nouveau widget Twitter

J'essaie de personnaliser le nouveau widget Twitter, mais j'ai quelques problèmes avec le CSS et ne semble pas pouvoir remplacer le leur par rapport au nouveau. J'ai essayé de chercher des solutions, mais je ne trouve aucune correspondance.

Voici ma page avec le widget dans le menu de droite et le CSS modifié pour la classe .timeline:

.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>

J'ai commencé à utiliser! Déclarations importantes et j'ai essayé de remplacer l'identifiant principal #Twitter, mais aucun ne fonctionne.

Toutes les idées sont très appréciées.

** J'ai apparemment besoin de modifier l'iframe d'une manière ou d'une autre, mais je ne sais pas comment - si quelqu'un a une idée plus claire de la façon dont je peux le faire avec mon code (par opposition à un tutoriel), ce serait formidable. J'ai aussi besoin de changer la largeur de l'iframe ..

javascripthtmlcssiframe
13
321

J'ai réussi à le faire avec javascript (j'utilise jQuery dans mon application!). Vous devez appliquer les styles après le chargement de l'iframe (je n'ai pas trouvé d'événement "chargé" valide, j'utilise donc une stratégie de sondage).

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

Ceci est sans jQuery pour toute personne intéressée.

MISE À JOUR avec une solution bien meilleure qui ne repose pas sur la scrutation et n'a donc parfois pas de mise en page sans style

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';
    }
  });
});

ancienne version:

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

J'ai adapté le code de @Sebastiaan Ordelman et ajouté quelques commentaires (faisant référence aux valeurs de l'ancienne API). Ce fut ma tentative de faire correspondre l'ancienne API dans un court laps de temps. Placez ce code après votre nouvelle copie et collez le code du nouveau 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 of change: http://img837.imageshack.us/img837/1139/btjc.png

6
KPK

Cela ne répond pas directement à l'aspect CSS de la question, mais je pense qu'il est utile de noter que certaines de ce que vous voulez (par exemple, masquer les bordures/en-tête) peuvent être réalisées à l'aide des attributs de données transmis dans le widget:

<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

Peut-être qu’il ya un avantage en termes de performances à réduire autant que possible le bras de fer javascript?

5
ptim

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

Vous ne pouvez pas styler des éléments dans un autre document. Par conséquent, il est impossible que Twitter fournisse un point d'ancrage pour intégrer votre propre feuille de style à leur iframe.

Twitter permet uniquement de styler la couleur du lien du widget et de choisir un thème clair/sombre. 

Vous pouvez également créer votre propre widget à l'aide de l'API Twitter . Vous pouvez ensuite le personnaliser comme vous le souhaitez.

3
Gabriele Petrioli

Je ne sais pas si c'était possible à l'époque où la question a été posée, mais maintenant, vérifiez la docs :

<a class="Twitter-timeline" data-chrome="nofooter" ....">Tweets</a>
1
tokland

Il peut être préférable d’utiliser une structure de twitters.

selon 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>

et par https://dev.Twitter.com/web/javascript/events votre événement et votre raccordement ressemblent à ceci (gardez à l'esprit que cet exemple utilise jquery, vous pouvez opter pour une approche javascript uniquement)

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"});
    });
});
0
gateblues

Comme indiqué ci-dessus, vous ne pouvez pas modifier le code CSS dans un autre iframe Origin, voici quelques informations:

Comment appliquer le CSS à l'iframe?

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

0
SimonW