16

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?

6 Answers 6

41

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>
6
  • Thanks for the info! It seems they just added that in their docs :)
    – user1974114
    Mar 21, 2013 at 19:25
  • add "noscrollbar" to remove the scrollbar as well.
    – Hendyanto
    Nov 28, 2013 at 10:20
  • Scroll down to the 'Client Side Options' section. Dec 10, 2013 at 22:49
  • 9
    do you know how to hide the images (avatars) ? and change the styles of the other elements ? Mar 21, 2014 at 21:48
  • Does this work for single embedded tweets? I can't seem to get data-chrome attribute properties to work.
    – Rich Davis
    Nov 25, 2018 at 19:32
5

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

2
  • +1 Very Useful when trying to customize the twitter widget according to fit the website style.
    – shabeer90
    Mar 20, 2014 at 11:54
  • @Neurone00 Please Make Sure You Update Your Widget Id.
    – ShapCyber
    Apr 12, 2015 at 17:12
3

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>
5
  • Thanks for the reply. But It didn't work too. Maybe the website where you have used can help me :)
    – user1974114
    Jan 13, 2013 at 13:38
  • OP: You're not changing the background color, therefore this is not exactly an "answer".
    – SeinopSys
    Jan 13, 2013 at 13:38
  • @ManojKumar, edited. I've just provided it as a boilerplate, so you can make your own customization, since I don't know the colors you need or parts that need to be transparent. Jan 13, 2013 at 13:42
  • I think he just wants the tweets part to be transparent, not sure though.
    – SeinopSys
    Jan 13, 2013 at 13:43
  • 1
    this is actually deprecated now and wont work since the twitter api v1 is no longer supported :/
    – Tony
    Mar 13, 2014 at 16:35
1

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.

0

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

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.

0

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