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

[StopSine]

Hi @BenWard,

I’m actually really enjoying this new upgrade. I like the way that profiles are displayed nicely with the extra options (retweet, reply, favorite tweets). I’ve had to change some of the way my client’s pages are styled, but it’s really only been a width change here, a height change there. For the most part, most of my clients are happy now that their face is showing up on their feed.

I do have one issue though. I need there to be an option regarding media linked in a tweet. Currently, if my client tweets a picture, that picture is showing up in my embedded feed and breaking styles I’ve setup for my single-tweet feed. There needs to be some sort of way to prevent the

element. I’m really having some issues with clients not wanting it to show on their website. I at the very least need a way of resizing it. I should not have to tell my clients not to tweet pictures, because it breaks their home page, and I’m sure you guys don’t want me to tell my clients that we’re not putting twitter on their website! For now, I have to CSS hack it, but I would love an extra option so I don’t have to do this ugly, ugly thing to my websites.

I really appreciate your responses, and I look forward to the upgrades to this tool!

Thanks,
@Stopsine

[benward]

Hi Mathew,

I’m very glad you’re getting on OK with the widget! You can prevent the media-forward behaviour easily through the actual widget settings page on http://twitter.com/settings/widgets, just uncheck ‘Auto-expand photos’ and all images will be collapsed behind the ‘Expand’/permalink link.

Ben

[3DDev]

THIS WORKS! I just tested it on my site and It works. Thanks Artificial Ideas your a real life saver!

You should go post this in all the other forums if you haven’t because there are a lot of developers looking for this

[AlenaAppian]

Ben - I have posted before about using the Timeline widget and not wanting to display retweets - can you provide any help with this issue? We either don’t want to show any of the avatars or just not show any retweets. Thanks!

[ArrogantGamer]

This is an unacceptable change, twitter. CSS is a web standard, it is the way websites are displayed. By circumventing CSS completely, and implementing your own strange strategy, you are going the way of IE and Microsoft. If you don’t want users to customize your content on their sites, then don’t provide an API.

Welcome to the age of Twitter Quirks Mode.

[sTheStig]

[sTheStig]

CSS CSS CSS CSS CSS!!!

[SyntonicSound]

Please let us be able to adjust the width of the widget to less than 180px. I’ve had a widget on a site in a 150px wide space that doesn’t accommodate the new widget. Hmmmm, maybe I should just redesign the WHOLE site just to incorporate your changes.

Thanks Twitter, now I’m off to spend hours of (my own) time trying to implementing a hack to keep my clients happy.

[AnonymousSeeker]

data-chrome=“noscrollbar” that should work

[MadfatterInc]

I think the only way to remove the scrollbar is to limit the number of tweets using data-tweet-limit=“5” (or whatever number you want).

[banibanani]

data-tweet-limit=“1”

[UpcomingMedia]

TwitterDevs… #wtf!?

Its like the social media Apocalypse all of a sudden. Thankfully we have UserVoice to handle the avalanche of incoming client support requests of raging damnation that their tweets weren’t showing.

Had to upgrade a slew of clients’ websites just for them to display tweets, which isn’t that big of a deal normally… until it was realized you now required API credentials. With 100’s of accounts, this was not a cool move, at all. I’m so happy Red Bull comes in large cans.

I really hope you guys realize the horror you’ve caused, as YOU may understand the reasons for your deployment schedule but, our clients and everyday developers who rely on your services only see the final results you release, and man was it a shock when it doesn’t work. Like being pushed into a freezing cold pool, clothes, phone, wallet and all… and right now you hold my towel going… “hmm, don’t know when you get this”.

I’m fully willing to drop your platform until you actually deliver something close to finished, or we’ll just push Facebook that much harder.

Please please please, give us CSS customization that doesn’t require injection into an iframe …

Sorry ,

Upcoming Media

[ManotickDir]

I noticed the failure of the old widgets by accident right after the change. Visitors generally don’t bother to tell you if something is broken, so I’ll bet there are many dead widgets out there. I can live with the style, but the static feed and poor sizing is clunky. i.e. change the width and scroll bars appear/disappear instead of setting an option.

I put two widgets on the same page - took forever to get it working. Next job is to get them side by side and still working.

I was most annoyed (to put it politely) that Twitter knows which accounts got their code and could have informed people before the widgets went dead. I tweeted/posted from my personal accounts as soon as I realized the problem…

Why have I never seen a reply from anyone associated with Twitter reply to any of this? Or is this just a place to blow off steam?

[StopSine]

$(“iframe”).attr(“width”,“180”);

hack solved

[StopSine]

Thanks @benward!

There’s a lot of butthurts on here who would rather complain than ask for help.

While I am doing some nasty hackery to make this work, I can totally make it work in every situation I’ve run into - especially with this media hidden that you’ve shown me.

Looking forward to future changes!
@StopSine

[madesign54]

I’ve just spent a few hours trying to crack things
here is a SOLUTION that works

step: 1:
In the < ahref section set the width to width="100%"
as follows::

XXXX6401’ width=‘100%’ height=‘450’ data-theme=‘light’ data-link-color=’#356b99’ da

step 2:
this is the best bit, its so easy - but NO THANKS to Twitter - I have just wasted 2 hrs of my time!!!

in CSS::

iframe#twitter-widget-1.twitter-timeline.twitter-timeline-rendered
{
width: 550px;
padding: 15px 0 0 10px; /*your own preferences here */
margin: 0px;
}


OK what are we doing:
As everything is set in an iframe, we are FORCING the content to stretch to the size of the iframe using width=“100%”

This brilliantly OVER RIDES the forced Class set by twitter…

I am NOW looking at HOW to set the FONT sizes, but as Twitter has set a random 128bit coded css name - its seems to be IMPOSSIBLE to over ride this,

will let you know IF I find a solution.

[madesign54]

Agree
is anyone tweeting this, or have I missed the opportunity to COMPLAIN BITTERLY

[madesign54]

the css has a weird 128bit coding as an ID, which STOPS you from over riding any embedded css

this i the culprit!!!

html, timeline.97ea650dd etc etc

this wisks you off to some embeddedness which I cannot make head or tail of - will do, but will take time.

[madesign54]

Both share the same conclusion about the width="100%"
but set the CSS as above instructions and you can then set the iFrame to any size you want

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

I haven’t had any success with the jQuery, as cannot get my head around all the coding.
Will do eventually - but perhaps you would be so kind to post up the jQuery you managed to get to work.
Thanks in advance

[madesign54]

Just had another look at this, but cannot get it to work:
may be something to do with uta-8 code, and strict coding with jscript??

also using absolute URL for the jscript, whereas with the Jscript is it a relative or absolute link??

sorry been trying to hack the css etc now for 3 hrs so perhaps code blindness has set in