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

aabellowins · 2013-07-23T21:49:51.000Z

There are other ways to do this. However this is simple.

aabellowins · 2013-07-23T21:48:30.000Z

Hey, I found out a way to make the api your bit**…Download a plugin called twitter widget pro. From there just customize the css to wathever you need. Make sure you remove anything you want from the widget settings.

DrScottWatkins · 2013-07-30T06:52:00.000Z

Hi @benward and @battyblogger, did you resolve this? I’m still seeing images with compressed aspect ratios in an embedded feed I manage, see photos at:

http://www.csiro.au/Organisation-Structure/Flagships/Future-Manufacturing-Flagship/Flexible-Electronics.aspx

madesign54 · 2013-08-06T08:47:34.000Z

UPDATE::

I have just set up another twitter account for a client, I grabbed the widgetID, boy does this make it difficult, I am sure that twitter doesn’t want anyone to use their feeds!!!

anyway, just found that my CSS trick to create any width and height fails!!!
Ummm…

Then noticed the problem, twitter as well as widgetIDs are also creating iframe ID’s so CHECK this out, as it seems that the ::

all of a sudden has a iframe ID of -0 -1 -2 -3 depending upon how you set it up!!!
here’s a solution to avoid twitters attempt at foiling us from setting our own height and widths::

In css just write extra iframe ID as -0 -1 -2 etc::

iframe#twitter-widget-0.twitter-timeline.twitter-timeline-rendered, iframe#twitter-widget-1.twitter-timeline.twitter-timeline-rendered { width: 550px; padding: 15px 0 0 10px; margin: 0px; font: normal normal normal 9px/10px “Helvetica Neue”,Arial,sans-serif; }

Hope this solves this probelms for all members

derpyme · 2013-08-07T09:33:00.000Z

Dear Twitter, stop breaking the HTML5 standard by forcing us to have the widget width and height specified in the A-tag as plain width/height attributes.

This makes validators and developers very sad, try data-width/data-height instead, mmkay?

@ref http://www.w3.org/TR/html-markup/a.html

coppersony · 2013-08-21T10:02:37.000Z

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 · 2013-08-23T15:24:43.000Z

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

TweetsDecoder · 2013-09-05T11:02:36.000Z

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 · 2013-09-05T11:02:54.000Z

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 · 2013-09-05T20:15:00.000Z

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 · 2013-09-05T20:18:16.000Z

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

jrobertsEBD · 2013-09-09T18:03:32.000Z

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 · 2013-09-09T18:04:37.000Z

Not being able to change these basic functions is absurd…

jrobertsEBD · 2013-09-09T18:06:44.000Z

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_ · 2013-09-12T18:59:54.000Z

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 · 2013-09-23T17:52:44.000Z

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

SunnyGosavi · 2013-10-09T07:52:17.000Z

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 · 2013-10-09T20:45:07.000Z

Thank you so much

ulluhead · 2013-10-09T20:56:04.000Z

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 · 2013-11-04T16:15:54.000Z

Hi,

How do I remove the text “Tweets”

simple?

I have tried

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

in my css