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.
3 Answers
Answers 1
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.
Answers 2
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?
Answers 3
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
0 comments:
Post a Comment