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?

score 41 · Accepted Answer · answered Mar 21 '13 at 09:43

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>

answered Mar 21 '13 at 09:43

Barryvdh

6,419
2
26
23

Thanks for the info! It seems they just added that in their docs :) – Mar 21 '13 at 19:25
add "noscrollbar" to remove the scrollbar as well. – Hendyanto Nov 28 '13 at 10:20
Scroll down to the 'Client Side Options' section. – André van Toly Dec 10 '13 at 22:49
9

do you know how to hide the images (avatars) ? and change the styles of the other elements ? – Francisco Corrales Morales Mar 21 '14 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 '18 at 19:32
https://stackoverflow.com/a/74012606/7186739 – Billu Oct 10 '22 at 20:05

score 5 · Answer 2 · edited Oct 13 '14 at 22:53

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

+1 Very Useful when trying to customize the twitter widget according to fit the website style. — shabeer90, Mar 20 '14 at 11:54

Halil Özgür · Answer 3 · 2013-01-13T13:40:49.230

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>

edited Jan 13 '13 at 13:40

answered Jan 13 '13 at 13:19

Halil Özgür

15,731
6
49
56

Thanks for the reply. But It didn't work too. Maybe the website where you have used can help me :) – Jan 13 '13 at 13:38
OP: You're not changing the background color, therefore this is not exactly an "answer". – SeinopSys Jan 13 '13 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. – Halil Özgür Jan 13 '13 at 13:42
I think he just wants the tweets part to be transparent, not sure though. – SeinopSys Jan 13 '13 at 13:43
1

this is actually deprecated now and wont work since the twitter api v1 is no longer supported :/ – Tony Mar 13 '14 at 16:35

score 1 · Answer 4 · answered Jul 23 '15 at 02:59

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.

answered Jul 23 '15 at 02:59

Matt

1,140
2
10
17

ShapCyber · Answer 5 · 2014-10-13T22:17:37.980

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.

edited Oct 13 '14 at 22:17

answered Sep 05 '13 at 11:20

ShapCyber

3,382
2
21
27

score 0 · Answer 6 · edited Dec 17 '17 at 03:08

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

edited Dec 17 '17 at 03:08

Marcello B.

4,177
11
45
65

answered Dec 16 '17 at 18:48

BugLogic

117
5

How to customize twitter widget style?

6 Answers6

Linked