wake-up-neo.com

iframe CSS-Überschreibung für das neue Twitter-Widget

Ich versuche, das neue Twitter-Widget anzupassen, habe jedoch einige Probleme mit dem CSS und kann diese scheinbar nicht überschreiben. Ich habe versucht, nach Lösungen zu suchen, kann aber keine Übereinstimmung finden.

Hier ist meine Seite mit dem Widget im rechten Navi und dem angepassten CSS für die Timeline-Klasse:

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

Ich habe angefangen, wichtige Deklarationen zu verwenden, und habe versucht, die Haupt-ID von #Twitter zu überschreiben, aber es funktioniert auch nicht.

Alle Ideen sehr geschätzt.

** Ich muss den iframe anscheinend irgendwie bearbeiten, aber nicht sicher wie - wenn jemand eine klarere Idee hat, wie ich das mit meinem Code machen kann (im Gegensatz zu einem Tutorial), wäre das großartig. Ich muss auch die Breite des Iframes ändern.

13
321

Ich habe es mit Javascript geschafft (ich verwende jQuery in meiner Anwendung!). Sie müssen die Stile nach dem Laden des Iframes anwenden (ich habe kein gültiges "geladenes" Ereignis gefunden, daher verwende ich eine Abrufstrategie).

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

Dies ist ohne jQuery für alle Interessierten.

AKTUALISIERT mit einer viel besseren Lösung, die nicht auf Abfragen angewiesen ist und daher gelegentlich kein unstyled Layout hat:

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

alte 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

Ich habe den Code von @Sebastiaan Ordelman angepasst und einige Kommentare hinzugefügt (in Bezug auf Werte aus der alten API). Dies war mein Versuch, die alte API in kurzer Zeit anzugleichen. Platzieren Sie diesen Code nach Ihrer neuen Kopie und fügen Sie Code aus dem neuen Twitter-Widget ein.

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

Bild der Änderung: http://img837.imageshack.us/img837/1139/btjc.png

6
KPK

Dies beantwortet zwar nicht direkt den CSS-Aspekt der Frage, aber ich denke, es ist zur Vollständigkeit anzumerken, dass einige der gewünschten Elemente (z. B. Rahmen ausblenden/Header) mit den im Widget übergebenen Datenattributen ausgeführt werden können:

<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

Möglicherweise gibt es einen Leistungsvorteil, wenn möglich, das Armdrücken auf Javascript zu minimieren?

5
ptim

Sie erstellen einen iframe, es handelt sich also um ein anderes Dokument.

Sie können keine Elemente in einem anderen Dokument formatieren. Dies ist nur möglich, wenn Twitter einen Haken zum Einbetten Ihres eigenen Stylesheets in den iframe enthält.

Twitter erlaubt nur das Gestalten von der Linkfarbe des Widgets und das Auswählen eines hellen/dunklen Themas. 


Alternativ können Sie Ihr eigenes Widget mit der Twitter-API erstellen und Sie können es nach Belieben gestalten.

3

Ich weiß nicht, ob es damals möglich war, als die Frage gestellt wurde, aber jetzt überprüfen Sie die docs :

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

Es ist möglicherweise besser, eine Twitters-Eventing-Struktur zu verwenden.

gemäß 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>

und per https://dev.Twitter.com/web/javascript/events Ihre Veranstaltung und Ihr Anschluss würden in etwa so aussehen (Denken Sie daran, dass dieses Beispiel Jquery verwendet, für das Sie nur einen Javascript verwenden können.)

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

Wie oben erwähnt, können Sie CSS nicht in einem anderen Origin-Iframe ändern. Hier einige Informationen:

Wie wende ich CSS auf iframe an?

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

0
SimonW