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

madesign54 · 2013-07-19T17:15:35.000Z

it should work, whats your code like?

madesign54 · 2013-07-19T17:20:17.000Z


element.style {
border: none;
max-width: 100%;
min-width: 180px;
}

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; }

BrendaTalbot · 2013-07-19T17:21:39.000Z

I added width=“100%” in html and the iframe stuff in css, just as you suggested. Have you found this to work with sub-180 values for the css width?

madesign54 · 2013-07-19T17:47:45.000Z

yes:: quick answer…
element.style { border: none; max-width: 100%; min-width: 100px; }
iframe#twitter-widget-1.twitter-timeline.twitter-timeline-rendered { width: 100px; padding: 15px 0 0 10px; margin: 0px; font: normal normal normal 9px/10px “Helvetica Neue”,Arial,sans-serif; }

BrendaTalbot · 2013-07-19T17:55:24.000Z

Thanks, I’m just an intermediate-level coder so I have to ask: Does that all go in the css file? Is “element.style” shown as a placeholder or is that meant verbatim?

madesign54 · 2013-07-19T18:17:46.000Z

Oops… the element style is the magic hidden bit that we are all trying to crack - the min-width forces the dive to a min, but I have found that you can force the min width via css, so the 2nd block of code is the one you need to adjust in your css file.

good luck

TomKennedy77 · 2013-07-22T02:27:14.000Z

Yeah this is a really dumb move on twitter’s behalf. And one of the great reasons twitter was cool and why people dont use facebook feeds. Really dumb twitter!

TomKennedy77 · 2013-07-22T02:35:06.000Z

Id like to see more customization that what has been provided, this new API looks at best out of place on my clients site. Id like to be able to target using css, for a customized feed that fits the look of the site.
One of the reasons so many were using twitter feeds.

WeLoveFlyers · 2013-07-23T21:34:20.000Z

Twitter might belong to you, but my words belong to me. And I just want a way of displaying MY words the way I want to display them! The widget allows far too little customisation. At the moment it presents an ugly distraction from the rest of my new site design that I am working on. The text is too big in comparison with the text around it, I can’t change the colour of the text, and the avatars are too big. In fact, as I am only displaying my own tweets, the avatar is redundant, I already have my logo in the all places where I want it on the website … I don’t need it then repeated next to every single tweet and in a completely uneditable size!

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.