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:
Using parameterLink Color
The value options are
light. If we do not include the theme parameter, the timeline by default will use the
data-theme="dark"will display dark theme of embedded Twitter timeline.
Using parameterWidth and Height
The value is using hex color. Some icons on the embedded timeline will also use that color.
Using standard HTML tag parameterChrome
The unit value is in pixels.
This is the most fascinating parameter to myself, because with this I can control the whole transparency of the embedded timeline.You can check out other parameters at Twitter Developers Documentation
These are the values:
We can put the values in series.
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
data-chrome="noheader nofooter transparent"
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.
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
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):
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.
</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.