it-swarm.com.de

Wie kann ich den Widget-Stil von Twitter anpassen?

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ß bis transparent überschreiben. Da es sich um ein eingebettetes Widget handelt, kann ich es nicht direkt bearbeiten. Kann mir jemand dabei helfen?

16
user1974114

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

Sie können das Chrome des Widgets ändern, um die Kopfzeile/Fußzeile/den Rand 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>
38
Barryvdh

Erstellen Sie ein Widget aus 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/ ..__ verwendet. Sein Snippet funktioniert anscheinend wegen des Skripts nicht.

Prost!

Editiert: Dort war mein Spitzname

3
Neurone00

Ich verwende so etwas wie das Folgende (ich kann jetzt wirklich keine Referenz dafür finden, aber es funktioniert immer noch) (<YOUR_TWIITER_NAME> mit Ihrem ändern):

<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>
3
Halil Özgür

Wenn Sie weitere Anpassungen benötigen, verwenden Sie TwitterPostFetcher von Jason Mayes. Es ermöglicht das vollständige Styling von Timeline-Tweets - viel mehr als die Standardstilparameter, die die aktuellen Twitter-Widgets bereitstellen.

1
Matt

Im Moment ist es das, was Twitter auf Ihrer Webseite gerendert hat .Tweets Widgets Decoded

Da Sie alle ID- und Klassenattribute kennen, können Sie sie mit css oder JavaScript steuern. Dieser Link http://tweetsdecoder.net kann auch nützlich sein, um Twitter-Widgets anzupassen.

0
ShapCyber

So ändern Sie den Hintergrund von a.Twitter-timeline add data-chrome="transparent" und platzieren den Anker in einem Element mit einer CSS-Hintergrundfarbe

0
user1214684