Embedded Timeline - More customization? (Specifically: CSS customization)

[coppersony]

Solution

• The twitter JS calls a function that puts an iframe, so you need to wait until this iframe and their resources are loaded before you can access it
• And remember, you cannot access the elements with your own CSS because it is an iframe!

@Twitter, why did you put such poor customisation? The community here is trying to make the web look cool!

[fatarimka]

So…you can do it simply, and inject your css into iframe.
$(’#twitter-widget-0’).contents().find(‘head’).append(’’);

[TweetsDecoder]

Let me show you how to customize your twitter widgets by click! copy! paste! . without using the #TwitterApi Follow this Link http://tweetsdecoder.com/.

[TweetsDecoder]

Let me show you how to customize your twitter widgets by click! copy! paste! . without using the #TwitterApi Follow this Link http://tweetsdecoder.com/.

[ToloPoland]

Hi all, I just wanted to add a comment. Similarly to few people here, I am a web developer, and I create websites for my clients. If I want to add Twitter timeline to the website (according to Twitter) I’m supposed to ask my clients to register for the developer account, etc. One thing that seems to work for me is this:

Using one of my old twitter accounts I create the API widget and then I add data-screen-name in question. It is important not to tweet using that old account, and only actual client’s tweets will show. For instance settings as such:

And then whatever is saved in $twitter-user PHP variable will control which tweets show on the website. This is not a perfect solution, but it works for me.

+1 for me on additional customizations (font color, thubm toggle, actions toggle)

[ToloPoland]

Also, it would be very nice if there was an option to turn of retweets in the timeline.

[jrobertsEBD]

That’s what I need to know as well…

I have tried several ways of adding different divs and CSS to change the look of the scrollbar but nothing seems to work. I can get my scrollbar to appear in some cases, but the JS doesn’t execute and you have to hover over the widget in order to scroll, whether or not using scrollbar or no scrollbar in the href.

While there seems to be plenty of ways around the background/font etc, I haven’t found a single thing to modifying the scrollbar, except scrollbar/noscrollbar in href.

[jrobertsEBD]

Not being able to change these basic functions is absurd…

[jrobertsEBD]

Injecting additional content is the only way to bend the style of the widget, since majority of customizations have been stripped.

I understand the need for more security, but 1.1 has completely demolished customization of the widget for individual needs.

[p4blo_]

Workaround:

setInterval(function() {
var timeline = $(’#twitter-widget-0’).contents().find(‘body’).find(’.timeline’);
timeline.find(’.u-photo.avatar’).remove();
timeline.find(’.u-url.permalink.customisable-highlight’).remove();
timeline.find(’.header.h-card.p-author’).remove();
timeline.find(’.footer.customisable-border’).remove();
}, 500);

http://cdpn.io/wAprz

[cezjah]

@p4blo_Pablo, thanks very much! Your solution worked really well for me! Much appreciated.

[SunnyGosavi]

data-chrome="nofooter noscrollbar noborders nofooter transparent"
add this in your anchor tag()
this will help you to remove things which u dont need in the tweet feed box…

[mfwhobiz]

Thank you so much

[ulluhead]

I need to display latest 4 tweets “horizontally” i.e. side by side at the bottom of my web page. But I couldn’t figure out the styling required to achieve this? Is it even possible? If yes, could someone please help?

[richiebee]

Hi,

How do I remove the text “Tweets”

simple?

I have tried

.timeline-header { !important
color:#FFFFFF;
}

in my css

[AdactusDev]

you sir are a genius! I was bashing my head against a wall using doc ready event (DOM only), and not doc load event (entire page including images and iframes).

[mln_mln_mln]

How can I remove the display picture of the tweets in embedded timeline. and also can we limit the number of tweets, without being its height expanded to display all the tweets ( with scroll bars)

[vincentisambart]

If you don’t want the photos to be expanded, go to the widget settings page (https://twitter.com/settings/widgets) and uncheck “Auto expand photos” for your widget.
There is no way to limit the number of tweets if you want to keep the scrollbar.

[RiseON1]

I actually thought I could work a way around this and spent the whole weekend trying to figure out ways to beat this. Time well wasted but learnt a lot in the process. It’s unbelievable that twitter would do this at this day and age. They shouldn’t really put a limitation to design, this is how creativity is suppressed, so sad…

[niall]