web-dev-qa-db-fra.com

Comment personnaliser le style de widget Twitter?

Je viens d'implémenter le widget Listes sur mon site: https://dev.Twitter.com/docs/embedded-timelines

Je veux juste remplacer la couleur de fond du blanc au transparent. Puisqu'il s'agit d'un widget intégré, je ne peux pas le modifier directement. Est-ce que quelqu'un peut m'aider?

csstwitter
16
user1974114

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

Vous pouvez modifier le chrome du widget pour masquer l'en-tête/pied de page/bordure ou l'arrière-plan.

<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

Créez un widget à partir de Twitter> paramètres> widgets.

Copiez-collez le code fourni.

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

Pour la réponse, j'ai utilisé le travail de http://tweetsdecoder.net/ . Son extrait ne fonctionne apparemment pas à cause du script.

À votre santé!

Edité: il y avait mon surnom

3
Neurone00

J'utilise quelque chose comme ce qui suit (je ne trouve pas vraiment beaucoup de références pour cela maintenant, mais ça fonctionne toujours) (changez <YOUR_TWIITER_NAME> avec le vôtre):

<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

Si vous avez besoin de personnalisations supplémentaires, essayez d’utiliser TwitterPostFetcher de Jason Mayes. Il permet un style complet des tweets de la timeline - bien plus que les paramètres de style par défaut fournis par les widgets Twitter.

1
Matt

Pour le moment, c’est ce que Twitter a rendu sur votre page Web .Tweets Widgets Decoded

Puisque vous connaissez tous les attributs id et class, vous pouvez alors le contrôler avec css ou JavaScript Ce lien http://tweetsdecoder.net peut également être utile pour personnaliser les widgets Twitter.

0
ShapCyber

Pour changer l'arrière-plan de a.Twitter-timeline add data-chrome="transparent" et placer l'ancre dans un élément avec une couleur d'arrière-plan CSS

0
user1214684