Timeline widget: transparent background AND border color at the same time?


#1

When I set data-chrome=“transparent” to have a background colour, the outer border disappears, and so when I also use data-border-color="#cccccc" the border still doesn’t seem to appear?

How can I make the widget have a transparent background but also have borders both within the widget and as an outer border too?

Many thanks,
Andrew


#2

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


#3

Thanks for your reply @benward - where should I add that event listener? I’m assuming thats jquery so would I just make that a new file in the js folder or would I have to use a child theme for that? I haven’t used jquery on this before so what should I do for this?

Thanks for your help!

Andrew


#4