Twitter embedded timeline widget

Question

I went ahead and downloaded http://platform.twitter.com/widgets.js

And the http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

Two files the embedded timeline widget uses.

All I'm trying to do is customize the css of the widget, and since twitter only gives you a few design options like link color and a dark/light theme, I thought it would be easier to download the files and modify them myself.

Only problem is, I'm having some difficulty trying to point the css file location inside the widgets.js to the copy on my webapp

A line inside widget.js, locating the css file on twitters servers, its tied up with some variables that combine a prefixed platform.twitter.com/ value or something

provide("tfw/assets",...{"default":"embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css",

I don't how much editing has to be done to widget.js but my guess its only a couple lines?

If anybody proficient in javascript wouldn't mind taking a look and telling me "Not worth the effort", or "It's simple, just change __ to __", let me know.

widgets.js is the first hyperlink above

Answer 1

(See my edit below for a better solution) This seemed to work for me and doesn't take much time to implement:

In widgets.js, find

function Z(a,b,c)

Change this in function Z:

d.href=twttr.widgets.config.assetUrl()+"/"+b

to something like this:

d.href=b

The assetUrl just gets the base URL of the file (eg. a CSS file), which is at a domain Twitter owns. b will be the paths you specify throughout the JS (such as embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css ). Upload all the CSS (like timeline.xyz.default.css) to where you want it, then you can customize those files and keep them on your own server. You can't modify the CSS by simply adding rules to a CSS file on your server, since the Twitter feed is in an iframe from a different domain. Modifying CSS in iframes with this type of source (ie. not from your own domain) is not allowed, to prevent hijacking-type problems, but if the iframe refers to a CSS on your own server then you can modify things.

There may be some other things you might want to check out to make sure you have all the required files. You should also get sprite.png which is referred to in the Twitter CSS file. I was able to customize the CSS this way and it worked fine.

Edit:

I had problems with the above solution in IE7/6 and Chrome in Jelly Bean so found a better solution that lets you inject your own custom CSS file into the iframe while sticking with all of Twitter's CSS at their own domain. From a fresh widgets.js I went and added the following:

;d=c.createElement("link"),
d.id="custom-css-1",
d.rel="stylesheet",
d.type="text/css",
d.href="http://mydomain.com/css/timeline.custom.css";
c.getElementsByTagName("head")[0].appendChild(d);

immediately after

c.getElementsByTagName("head")[0].appendChild(d)

on the line in widgets.js starting with

provide("tfw/widget/timeline"

(again in function Z) This seems to work much better, and all you need is a copy of widgets.js at http://platform.twitter.com/widgets.js.

Answer 2

It looks like if I download wigdet.js and custom.css then widget does not pick up data-chrome="transparent"

I downloaded http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

renamed it timeline.custom.css

Changed in wigdet.js link to my css

function b(e,t,n){
            var r;
            n=n||document;
            if(n.getElementById(e))return;
            r=n.createElement("link"),
            r.id=e,r.rel="stylesheet",
            r.type="text/css",
            r.href= "../css/timeline.custom.css",
            n.getElementsByTagName("head")[0].appendChild(r)
        }

Is link to css correct? Or twitter uses the newest version of css? http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css

How to make widget to pickup the data-chrome="transparent"

I used widget script

<a class="twitter-timeline"    
data-dnt="true"  
href="https://twitter.com/search?q=%23My_hush"                          
data-tweet-limit="1"
data-theme="dark" 
data-screen-name="some_name"                        
data-chrome="noscrollbar noheader transparent noborders nofooter"                        
      data-widget-id="My_id">
      Tweets about "#My_hush"</a>