How to customize the twitter iframe scroll bar(in embedded tweets widget) as per my design. Please let me know how i will do the change of default design ?
Asked
Active
Viewed 2,393 times
1
-
Do you mean the embedded tweets widget? – kubilay Sep 02 '14 at 07:04
-
yes which is build in my twitter profile. – Mrinmoy Majee Sep 02 '14 at 07:06
1 Answers
1
As mentioned in this question, if you want to change the style of the contents of an iframe, the most common way is to use Javascript to append CSS code into the rendered iframe's head tag.
However, there is a timing issue when you try to do that. Since Javascript runs your code when the DOM is ready, if the Twitter widget takes too long to fetch tweets, your style won't be applied to the iframe.
To fix this, there's a small function that helps you to run your JS code after an element is inserted to the DOM. It was all mentioned in this answer.
So, here's the formula:
$("iframe#twitter-widget-0").contents().find('head').append('<style>' + 'YOUR CSS RULES' + '</style>');
You should set the styles of the scrollbars by using this piece of code, here's an example about styling scrollbars.
To make things clear, I've created a fiddle: http://jsfiddle.net/kublaios/c3j109md/
-
so many thanks to you Mr. Kubilay. Its really working good. thanks again. – Mrinmoy Majee Sep 02 '14 at 09:26