Change the appearance of the widget "User Ribbon"

Twitter timeline widget is a tool with which you can embed Twitter feed on your website. Unfortunately, the standard set of settings allows you to change a limited number of display options and does not allow the use of arbitrary css-styles to the widget elements. This article describes how to circumvent this limitation and style the ribbon so that it fits into your design.

Adding a widget

In order to add a twitter feed to the site, you need to insert the widget code. It, in turn, can be obtained from the following link https://twitter.com/settings/widgets . On this page, you can also perform the initial setup (set the parameters for displaying tweets, specify the height, select a theme) and copy the widget code. The code consists of two elements: an anchor with attributes (widget settings) and a javascript code that loads the twitter library.
')

<a class="twitter-timeline" href="https://twitter.com/zewa4ka" data-widget-id="362933628772163584">  @zewa4ka</a> 

 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

But this is not all that we are offered to customize the widget. You can get acquainted with additional parameters at https://dev.twitter.com/docs/embedded-timelines#customization . But in any case, to solve the problem of changing the style of widget elements in standard ways will not work.

Apply styles

At first glance, the solution to the problem lies on the surface — you need to see which html markup is generated by the widget and simply redefine the styles. But here we are in for a slight disappointment, the ribbon elements are in the iframe and therefore the styles from our page do not reach them. So you need to go the other way and insert a block with styles inside the frame.

The content of the frame is loaded after our page is already loaded and before you do something with it, you need to check for its readiness.

 $(function () { var $cont = $(".twitter-container"), prd = setInterval(function () { if ($cont.find("> iframe").contents().find(".twitter-timeline").length > 0) { clearInterval(prd) //      } }, 100); }); 

Next, we will place a block with styles on our page and hang it with the identifier “twitterStyle”:

 #twitterStyled .tweet { padding: 10px 10px 5px 10px; margin:10px; border-radius: 10px; background-color: #9bcfe2; } #twitterStyled .tweet:nth-child(odd) { margin-right:50px; } #twitterStyled .tweet:nth-child(even) { margin-left:50px; } #twitterStyled .profile > img { display: none; } #twitterStyled .tweet .tweet-actions { visibility: hidden; } #twitterStyled .tweet:hover .tweet-actions { visibility: visible; } #twitterStyled .stream { background-color: #7AC0DA; color:#fff; } #twitterStyled .header { border-bottom: 1px dashed #fff; margin-bottom:10px; padding-bottom:5px; } #twitterStyled .p-name { color: #207290; } #twitterStyled .p-nickname, #twitterStyled .dt-updated { color: #2b8fb4; } 

Perform the following frame manipulations: hang id = "# twitterStyled" attribute on his body (not to worry about style priorities) and add a block with styles inside.

 $body.attr("id", "twitterStyled") .append($("#twitterStyle")); 

And it's all?

Of course not! By accessing the iframe elements, we can do whatever we want with them. You can delete unwanted blocks, add animation, swap elements. The internal structure of the widget can always be viewed using the developer tools of your favorite browser. And then everything is limited only by your imagination.

An example can be found here: http://jsfiddle.net/SCbsW/