The transparent and border-color options are slightly unintuitive I’m afraid. When adding transparent our thinking was increasingly toward providing ways to remove styling, such that you could apply styles in any way you like to the container on your page, rather than providing, say, a function to specify a background image, or gradient, or combination thereof. We didn’t want to reinvent CSS inside our widget data- attributes.
The transparent option has a side-affect which is to remove the outer padding of the widget, and so we remove the outer border as well. The idea being that you can then control the padding and border by styling your container. In this case border-color continues to style the borders and separators inside of the widget. It’s a stretch of the concept of “background”, especially compared to CSS, and it’s unintuitive; sorry about that.
We’ll hopefully clean a lot of this up in the near future, and we try to ensure we don’t introduce new options with bundled side-affects.
You should add outer borders on the container element. If you want to ensure those styles only take effect if the timeline widget has been rendered, you can add an event listener to toggle a classname on render.
Assuming:
<div>
<a class="twitter-timeline" id="styled-timeline" […]>…</a>
</div>
You can listen for it rendering like so:
twttr.events.bind("rendered", function (widget) {
if ("styled-timeline" == widget.id) {
widget.parent.className = "widget-rendered";
}
});
And style .widget-rendered in your own CSS.
.widget-rendered {
border: 1px solid #c00;
border-radius: 10px;
padding: 6px;
}
Hope that helps,
Ben
