A Simple Way to Customize Twitter Timeline Display

Probably some of you already knew this. I just found that out, and I wanna share my scrolling down discovery. Scrolling down, because I just found that out when I scrolled down on Twitter Developers Documentation page - about embedded timeline. The client-side parameters are somewhat written on the bottom.

---

These are some of the parameters:
Theme

Using parameter data-theme="..."
The value options are dark and light. If we do not include the theme parameter, the timeline by default will use the light theme.
Example: data-theme="dark" will display dark theme of embedded Twitter timeline.

Link Color

Using parameter data-link-color="..."
The value is using hex color. Some icons on the embedded timeline will also use that color.
Example: data-link-color="#333333" 

Width and Height

Using standard HTML tag parameter width=".." and height="..."
The unit value is in pixels.
Example: width="250" and height="350"

Chrome

This is the most fascinating parameter to myself, because with this I can control the whole transparency of the embedded timeline.
Using parameter data-chrome="..."

---

These are the values:

• noborders - no list border on the timeline
• noheader - no header is displayed
• nofooter - no footer thingy
• noscrollbar - no scrollbar is displayed (but the timeline feed can still be scrolled down/up)
• transparent - set the timeline to have no background color

We can put the values in series.
Example: data-chrome="noheader nofooter transparent"

You can check out other parameters at Twitter Developers Documentation

To create your widget, first of all, go to your widget setting on your Twitter account. Generate the widget from there, then place additional widget parameters.

---

Demo of using chrome parameter
This is the Twitter timeline of Twitter - you can scroll up and down on the widget even though there's no scroll bar on it

If you do not see the timeline, you might have to refresh this page.
Or maybe disable for a moment your (customized) AdBlock.

Tweets by @twitter

---

There's no fancy styling there. I just use the additional widget parameters and place it on center.
This is the HTML of that, you can see the parameters I'm using: This the CSS of .twt_wrap class:

---

Creating a Canvas for the Embedded Timeline
This is using CSS, of course. All you need to do is set some div element(s) wrapping the entire embedded timeline code.

This is a weird example of styling embedded timeline of Twitter. The result looks like this (updated):

---

Tweets by @twitter

---

You can scroll up and down to see more tweets without using any scroll bar. Just hover above the dark oval wannabe thingy - the middle section - before you scroll.

---

CSS HTML
This is the HTML elements stacking of the Twitter embedded timeline. Use your own widget ID. It comes with the widget you generated. JavaScript
This is the JavaScript of Twitter embedded timeline - put it before the closing </body> tag of your site, or just after the HTML part of the embedded code.

---

Go crazy with it! You can use background image or something else to customize the canvas. I suggest before you do further customization besides the external decorations, you should check out the display requirements on Twitter.