Styling a Twitter feed - CSS won't target .timeline-Tweet-text

Question

I'm bringing a Twitter feed through to my site using the following code which is described on https://publish.twitter.com/

<a class="twitter-timeline" href="https://twitter.com/ACCOUNT-HERE" data-tweet-limit="3">Tweets by</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

The feed is displayed correctly. However it uses CSS which is provided via Twitter.

When I inspect it using Chrome dev tools I can see the following classes around the Tweets:

<p class="timeline-Tweet-text" lang="en" dir="ltr">

So I thought it would be a simple case of targetting this in CSS, e.g.

.timeline-Tweet-text {
}

However, this doesn't apply any styles to the Tweets. Why not?

I have also referred to Twitters guidance on this here https://dev.twitter.com/web/overview/css but that also doesn't work.

The only reason I want to do this is so the font used within the widget matches the font used by the rest of the body text on my website.

My guess would be that the widget is using a CSS rule with higher specificity - look in dev tools and find the exact rule they're using to set the font, then override it. — Joe Clay, Nov 18 '16 at 10:13
_“When I inspect it using Chrome dev tools”_ – inspect some more, and you will see that this content is loaded inside an iframe element. Your stylesheet can not “reach into” that iframe to format its content. — CBroe, Nov 18 '16 at 10:20
Yeah that's what I wondered too but if I inspect it and then use Copy > Copy Selector, it has a really long string such as `body > div > div.timeline-Body.customisable-border > div.timeline-Viewport > ol > li:nth-child(1) > div > p` but even using that the CSS won't target it. — Andy, Nov 18 '16 at 10:21
Would it be possible to give a working example?...Nevermind. got example working — Gezzasa, Apr 20 '18 at 09:37

score 5 · Answer 1 · answered Apr 24 '18 at 10:24

5

Simply adding a style rule to your top-level page won't work, because they are two different and isolated documents as far as the browser is concerned.

However, with the use of kevinburke's Customize Twitter 1.1 project, you should be able to embed CSS into a timeline. It does this by injecting a link to an external CSS file directly into the contents of the document within that frame.

In Kevin's published example, It makes all the text white, which looks a bit broken, but when I took this example and adjusted it to also turn the background red, we can see it's working as intended and you can therefore make any adjustments you like, provided you have a CSS file for it.

Note that this is only possible because Twitter have configured platform.twitter.com so that it can be embedded in frames. For security reasons, many websites will nowadays send a HTTP response header to prevent framing of the content, to avoid people meddling with their contents.

answered Apr 24 '18 at 10:24

BoffinBrain

6,337
6
33
59

This appears to be pretty close to a solution, though I don't think the project as it is will work, looking at the code. They're using frame.document to access the content, where from my own investigation I was only able to reach the frame's inner body through frame.contentDocument. – Sollace Jul 09 '22 at 10:23
Is this no longer working? The [demo page](https://kevinburke.github.io/customize-twitter-1.1/) appears to be broken - specifically: no Twitter timeline is visible for me, like in the screenshot. – Mentalist Dec 01 '22 at 06:20
@Mentalist You may need to turn off Site Tracking Protection if you're using Firefox (it's in the address bar), or similar for other browsers/extensions that may block third-party content. – BoffinBrain Dec 07 '22 at 23:52

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

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

Customization Options

Embedded timelines are available in light and dark themes for customization. The light theme is for pages that use a white or light colored background and follows the twitter.com aesthetic, while the dark theme is for pages that use a black or dark color background and looks more like Tweetdeck.

As with your twitter.com profile, you may choose a custom link color for your embedded timelines so that the content matches the links of your website and feels integrated into the color palette of your site.

For sites where the theme and link color do not provide enough customization to make the Tweets feel like they’re a part of the page, we offer a set of additional client side customization features. These settings allow you to control the background color, borders, header, and footer of the timeline, and are detailed in the “Client Side Options” section below

You Can Use CSS * Property for Setting the Fonts for all the Pages...

Example:(this might be useful for you)

#twitterFeed * {
font-family: "Lato" !important;
}

Reference Link for Twitter Widget Style :

https://dev.twitter.com/web/overview/css

https://www.solodev.com/blog/web-design/styling-your-websites-twitter-feed.stml

score 1 · Answer 3 · answered Apr 20 '18 at 09:44

Unfortunately (Unless it has been changed recently) you can't manipulate CSS inside of an iframe

https://jsfiddle.net/tm94g9n4/5/

.timeline-Tweet-text {color: red;}

I added the color red to the text but as you can see when you inspect it doesn't even appear as overwritten. It's not referenced at all.

I think you'll need to look in to custom libraries for this. I can't recommend any as I've not done this before.

https://stackoverflow.com/a/6495816/1379450

Hope it helps

EDIT

It seems it is possible (Duplicate question) How to apply CSS to iframe?

score 0 · Answer 4 · edited Jan 13 '20 at 17:07

I have implemented a simple solution in my project recently, you can customize all kinds of styles to have it fit in seamlessly with your website branding.

jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
    //function call to override the base twitter styles
    customizeTweetMedia();
});

var customizeTweetMedia = function() {

    // overrides font styles and removes the profile picture and media from twitter feed
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove();

    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-size', '12px');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-family', "'Proxima Nova', lato, sans-serif");

    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '12px');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-family', "'Proxima Nova', lato, sans-serif");


    // also call the function on dynamic updates in addition to page load
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
        customizeTweetMedia(this);
    });
}

Link to my complete example

This does not work (anymore) as of today the codepen example simply throws an error, and no timeline parts are affected. — Eric Steinborn, Nov 14 '19 at 14:58
@EricSteinborn did you even try adapting the code for your own use. I guess no? you prefer to downvote something that is an annual solution and could help another person. How nice — Nawa Augustine, Jun 09 '20 at 07:13
Your code didn't work, I downvoted it because of that. Thats how Stack Overflow works, don't take it personally. I hope you are staying safe. If it makes you feel better, I found another one of your answers to another question about git, and I upvoted that because it worked. — Eric Steinborn, Jun 09 '20 at 18:49

Styling a Twitter feed - CSS won't target .timeline-Tweet-text

4 Answers4

Customization Options