How to customize twitter widget style?

Question

I just implemented the lists widget on my site: https://dev.twitter.com/docs/embedded-timelines

I just want to override the background-color from white to transparent. Since it is a embedded widget I cannot edit it directly. Can anyone help me with it?

Answer 1

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

You can change the Chrome of the widget, to hide the header/footer/border or background.

<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

Create a widget from twitter>settings>widgets.

Copy-paste the code provided.

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

For the answer i used the work from http://tweetsdecoder.net/. His snippet apparently doesn't work because of the script.

Cheers!

Edited:There was my nickname there

Answer 3

At the moment this is what twitter rendered in your web page.

Since you know all the id and class attributes you can then control it with css or JavaScript this Link http://tweetsdecoder.net may also be useful on how to customize twitter widgets.

Answer 4

I'm using something like the following (can't really find much reference for this now, but it's still working) (change <YOUR_TWIITER_NAME> with yours):

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

If you need further customisations, try using TwitterPostFetcher by Jason Mayes. It allows for complete styling of timeline tweets - much more than the default style parameters that the stock twitter widgets provide.

Answer 6

To change the background of a.twitter-timeline add data-chrome="transparent" and place the anchor within an element with a CSS background-color