How to style Twitter widget using my own CSS

Question

I have my own design for a Twitter feed and I want to style the default feed using my own design. Is there a way to do that?

The issue is that you can't use the CSS selectors because it appears only after the loading the page.

Please check this pic to give you more idea about what I need

Thanks,

"How to style a twitter widget?"- By using `CSS`. "Is there a way to do that?"- Yes, by making use of CSS selectors. — Satwik Nadkarny, Jul 09 '14 at 21:17
You can't use the CSS selectors to style the feed because it appears only after loading the page. — shadeed9, Jul 09 '14 at 21:20
It actually doesn't matter if it appears after loading the page. If your CSS is authored to target the content appropriately and the content is loaded onto your page (ie, not in an iframe, which is someone else's page), your styles will apply whenever it loads. — RwwL, Jul 10 '14 at 01:49
Also, bear in mind that Twitter does occasionally delete account and/or block API access if you style Twitter content in a way they don't like. Yeah, I know that sounds crazy, but here are Twitter's "display requirements": https://dev.twitter.com/terms/display-requirements — RwwL, Jul 10 '14 at 01:52
Possible duplicate of [How to customize twitter widget style?](http://stackoverflow.com/questions/14303710/how-to-customize-twitter-widget-style) — Francisco Corrales Morales, Jul 08 '16 at 06:57
Working for me: https://stackoverflow.com/a/74012606/7186739 — Billu, Oct 10 '22 at 20:04

score 2 · Answer 1 · answered Jul 30 '14 at 22:39

Well, You can customize Your twitter widget by doing something like this:

Default Code

<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID">Tweets by @Test</a>

To remove Header footer, Just add data-chrome="nofooter transparent noheader transparent" and it will look something like this:

<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID" data-chrome="nofooter transparent noheader transparent">Tweets by @Test</a>

For more customization like link color, Borders etc refer to this article. https://dev.twitter.com/docs/embedded-timelines#customization

I hope this helps :)

You only need one transparent – Ben Taliadoros Apr 07 '16 at 15:35 — Ben Taliadoros, Apr 07 '16 at 15:35

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1# Getting a fully customisable timeline like suggested earlier (by using the API), would require that you fetch the timeline as a json file (https://api.twitter.com/1.1/statuses/home_timeline.json) and manually loop them in your display. More details here https://dev.twitter.com/rest/reference/get/statuses/home_timeline

2# This is as close as I could come with your design @shadeed9. Most of the restrictions are here https://dev.twitter.com/overview/terms/display-requirements final_result_tweetdesign

3# This JS snippet will let you add custom CSS styles to the Twitter embed widget: https://github.com/kevinburke/customize-twitter-1.1 by Kevin Burke

If this solves your question, kindly accept it!

score 0 · Answer 3 · answered Jul 09 '14 at 22:25

0

If by twitter widget you mean the embedded timelines, then see the "client side options" section of the docs https://dev.twitter.com/docs/embedded-timelines for options that you can set.

If you want totally customised output using CSS, then you'll need to write your own solution using the API to spit out content that can be styled.

answered Jul 09 '14 at 22:25

mattbakercake

Yes, I want totally customized output. Could you please explain more about using the API? What I should do? – shadeed9 Jul 10 '14 at 00:00
The issue with the API is it does not give you the full text of most tweets unfortunately. Otherwise, it's a great option. – Rich Davis Nov 25 '18 at 20:14

3 Answers3