Wie twitter widget style anpassen?

Question

Ich habe gerade das Listen-Widget auf meiner Website implementiert: https://dev.twitter.com/docs/embedded-timelines

Ich möchte nur die Hintergrundfarbe von weiß zu transparent überschreiben. Da es sich um ein eingebettetes Widget handelt, kann ich es nicht direkt bearbeiten. Kann mir jemand dabei helfen?

Answer 1

https://dev.twitter.com/docs/embedded-timelines

können Sie Ändern Sie den Chrome des Widgets, um die Kopfzeile/Fußzeile/den Rahmen oder den Hintergrund auszublenden.

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="<YOUR ID>" data-theme="dark" data-link-color="#000" data-chrome="noheader nofooter noborders transparent" data-related="twitterapi,twitter" data-aria-polite="assertive" width="300" height="300" lang="EN">Tweets by @twitterapi</a> 

Answer 2

Soweit ich weiß, können Sie dies nicht in reinem CSS tun. Ich würde vorschlagen, jQuery mit (die - je nach Standort - Sie bereits verwenden):

$("iframe").contents().find(".timeline").css("background",'rgba(0,0,0,0)'); 

ersetzen "iframe" mit der ID des Widgets auf Ihrer Website, wenn Sie dies für alle iframes angewendet werden nicht wollen, .

Answer 3

ich mit so etwas wie die folgenden (kann nicht wirklich viel Referenz für diese jetzt finden, aber es funktioniert immer noch) (Änderung <YOUR_TWIITER_NAME> mit Ihnen):

<script type="text/javascript" src="//widgets.twimg.com/j/2/widget.js"></script> 
<script type='text/javascript'> 
new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 4, 
    interval: 6000, 
    width: 300, 
    height: 288, 
    theme: { 
    shell: { 
     background: 'transparent', 
     color: '#2c458f' 
    }, 
    tweets: { 
     background: 'transparent', 
     color: '#525252', 
     links: '#ad1111' 
    } 
    }, 
    features: { 
    scrollbar: false, 
    loop: false, 
    live: false, 
    hashtags: true, 
    timestamp: true, 
    avatars: true, 
    behavior: 'all' 
    } 
}).render().setUser('<YOUR_TWIITER_NAME>').start(); 
</script> 

Answer 4

Im Moment ist dies das, was Twitter auf Ihrer Webseite darstellt.

Da Sie kennen alle die ID und Klassenattribute Sie können es dann steuern mit CSS oder JavaScript diesen Link http://tweetsdecoder.net auch nützlich sein können, wie Twitter-Widgets anpassen.

Answer 5

Erstellen Sie ein Widget von Twitter> Einstellungen> Widgets.

Kopieren Sie den bereitgestellten Code.

<a 
class="twitter-timeline" 
href="https://twitter.com/YourNickname" 
data-widget-id="xxxxxxxxxxxxxxxxxxx" <!--you will haveyour own number http://stackoverflow.com/questions/16375116/what-is-data-widget-id-in-twitter-api-how-i-can-get-the-data-widget-id--> 
data-chrome="noheader nofooter noborders noscrollbar transparent" <!--tweak these for the looks--> 
data-tweet-limit="5" 
data-link-color="#FFFFFF" 
data-border-color="#FFFFFF" 
lang="EN" data-theme="light" <!--light or dark--> 
height="447" 
width="255" 
data-screen-name="yourName" 
data-show-replies="false" 
data-aria-polite="assertive"> 

Tweets by @YourName 

</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

Für die Antwort habe ich die Arbeit von http://tweetsdecoder.net/. Sein Schnipsel funktioniert anscheinend nicht wegen des Skripts.

Prost!

Editiert: Es war mein Spitzname dort

Answer 6

Wenn Sie weitere Anpassungen benötigen, versuchen Sie es mit TwitterPostFetcher von Jason Mayes. Es ermöglicht das vollständige Styling von Timeline-Tweets - viel mehr als die Standard-Style-Parameter, die die Aktien-Twitter-Widgets bieten.

Answer 7

Um den Hintergrund von a.twitter-timeline add data-chrome="transparent" zu ändern und den Anker innerhalb eines Elements mit einer CSS background-color