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

SystemsReady · 2012-10-03T04:29:11.000Z

I noticed that the script I was using to fetch my account’s tweets that I was using on my site no longer worked, so I looked into the Embedded Timeline…my biggest problem with it is the relative lack of customization. In the old one, I could make it look pretty much EXACTLY how I wanted it, but that’s not the case here. At least, not with what I’ve tried so far.

I noticed that the script for it outputs HTML with div classes. I tried to change how they look via my CSS stylesheet, but it didn’t work…then I realized that since it spawns its own frame, it’s not affected by the CSS rules in my stylesheet. If I could just get it to point to my own stylesheet, the problem would be pretty much solved…

Is there any way for me to customize the tweets in the Embedded Timeline to my liking? The white boxes of the Light theme and the dark boxes of the Dark theme both don’t look that good on my site…

IllufoxDesign · 2012-10-11T20:05:15.000Z

Yeah, I’m having pretty much the same problem here. I was expecting to find a lot of articles about this on the internet, as I can imagine that there are a lot of frustrated website owners who have lost their twitter feeds on their sites, but to my surprise, the internet is pretty quiet about this. I too tried to unsuccessfully manipulate the widget with CSS.

My previous feed was matching the look and feel of my website. The white or dark box looks pretty ugly on my site. It would be nice if at least they had a transparent version that adjust to any website background. Also, having a header with logo for each tweet seems pretty redundant. If people post their own tweets on their website, visitors already know who they tweets are from.

What also bothers me, is the tweet button on the bottom. I wished there was a way to remove that as well.

All my headers are consistent on my website, the twitter header doesn’t match and is redundant.

Pretty much it would be nice to turn off certain features and only show what’s necessary.

We can only hope that more people are complaining about this, so there will be a better widget in the near future!

rbthsnk · 2012-10-12T04:44:51.000Z

Oh man, thought it was only me. I guess the old code stopped working.

kenaley · 2012-10-15T18:37:00.000Z

Kinda crazy to rip the rug out from those of us who were happy with our customized timelines. Sigh.

BybrookWeb · 2012-10-16T13:54:33.000Z

Agreed - I can’t believe we’re in this situation. As it stands people will just remove the twitter feed from their websites because it’s impossible to integrate the Twitter widget properly due to it’s limited styling (and size) options. I’ve already had to remove it from two of my clients sites.

Come on Twitter, do the sensible thing and reactivate the old method…

kjarmond · 2012-12-20T22:13:18.000Z

Twitter has done exactly what Facebook did that forced me to stop including their widget in client sites. Too concerned with their own branding rather than their users needs. It really doesn’t matter how nicely designed they make an uncustomizable widget because it will still be an eyesore on most sites without real customization.

I was looking to integrate a Twitter widget into a site I’m building. However that is now out the window since the new widget would be a blight on the site’s look and feel, taking away more from the site than it provides. What was going to be a nice interactive feature will now just be an image linking to my client’s Twitter profile and that just plain sucks. However I won’t sacrifice an entire site’s design on the altar of Twitter’s overzealous branding.

cindyn · 2012-12-27T23:10:19.000Z

Yay, kindred spirits!

How UGLY is the widget? I want to display the most recent tweet - 1 TWEET! - on a client’s site, styled nicely to match their design… and now I can’t. I don’t want ugly borders, ugly buttons, or ugly tweet boxes cluttering up the site… I had a json version working on another site and have had to pull that down.

I would have assumed that Twitter would have wanted as many people to interact with their product as possible in as many places as possible, but obviously not. Wonder if they realise that people are just going to remove references from their site, so their reach diminishes? If it was me, I’d be looking at getting as many touchpoints as possible out there…

GRR!

KDbeaty · 2012-12-28T04:43:36.000Z

I have the same issue as everyone else above. Surely they did not leave us all to hang with these 2 default styles.

CjopCjop · 2012-12-29T13:26:00.000Z

SOLUTION: I may have found a solution to our problem, that of being at the mercy of Twitter’s unaesthetic timeline widget… JQuery plugins.

We have a lot more control over the visual of the plugin via CSS and it’s just good 'ol fashioned javascript with pep. To get some of us started, here’s a link to | 25 Useful jQuery Plugins to Integrate Twitter into Websites with ease | http://www.tripwiremagazine.com/2010/08/25-useful-jquery-plugins-to-integrate-twitter-into-websites-with-ease.html

Hope this helps, at least with a better search query moving forward.

desimc · 2013-02-07T00:34:56.000Z

This is using the old api. This won’t work come March 2013.

desimc · 2013-02-07T00:36:14.000Z

Thank you. I think I’m going to drop it off two of my clients websites. I have spent 2 days of my free time trying to figure out a way around this.

I think the radio silence here and around the web are telling.

briankompanee · 2013-02-08T19:16:09.000Z

This is presenting a big problem for me as well. I have a client that is a HUGE Social media company that is a partner with Twitter. I used Twitter’s bootstrap to build their site. And I can’t even just remove the background color from the new widget. “Dark” or “Light” does not fit every application. I now have removed the twitter feed from my clients site. Makes me look bad.

Hello Admins…is there any plan to allow a little bit more color customization? At least with CSS? Can we at least just remove the background color so it will blend with our sites better?

Any response here would be great.

mrwalters · 2013-02-20T14:18:09.000Z

This is terrible… an #epicfail, if you will. I typically refuse to include facebook on client web sites for this very reason. This crappy widget sticks out like a sore thumb on every site I’ve tried it on. I imagine it would look good on Twitter.com since it’s their stylesheet only. I hate to tell you, Twitter is a service, not a brand. Twitter’s value lies in helping to establish my client’s brand not Twitter’s. I second @bybrookweb, "Come on Twitter, do the sensible thing and reactivate the old method… " or fix this train wreck!

cohtest · 2013-03-02T00:49:48.000Z

How could they miss this basic need? Unbelievable.

jamestuesdays · 2013-03-07T03:50:08.000Z

Although, after many attempts of styling the widget myself, you CAN change some basic structural components, like width, line-height, padding, etc. Frustrating as hell still!

Has anyone found a solution for more styling options?

bradoyler · 2013-03-15T20:12:43.000Z

WTF. I can’t even change the font-size of the header. Boooo!

flagMG · 2013-03-22T18:28:00.000Z

All: Just to make sure you’re aware of it, the js console on my page (which used the now-deprecated old widget style) led me to https://dev.twitter.com/docs/embedded-timelines

There are a number of additional parameters you can add to the new <a> tag which give you finer control over the new widgets- transparent background, for one.

I was able to make new widgets using the new style that looked exactly like the old widgets on my site, by specifying data-chrome=“noheader nofooter” and wrapping the widget in a div which I populated with my own content, styled to match the page and the old widget.

In case you want to see what I’m talking about, here are the codes I am now using (be sure and replace the data-widget-id with your own widget, and view it from an authorized domain:



@handle/my-list
List Description



Tweets from @handle/my-list

Join the conversation



  </div></code>

flagMG · 2013-03-22T19:08:00.000Z

On my previous post, I should have also noted that if you set the widget to have a transparent background, you can change the apparent background of the tweets by putting it inside it’s own div with whatever background-color you want, set on it.

Edit: Awkward that this posted before my “previous post” that I mentioned. Until it passes moderation, here’s the short version: check out https://dev.twitter.com/blog/planning-for-api-v1-retirement - you can tell the widget to leave off the header/footer and make your own that look exactly like the old ones (or however you want).

flagMG · 2013-03-25T13:25:26.000Z

I guess my previous replies aren’t going to get approved, so I’ll try without a link.

Check out the twitter documentation for additional attributes you can apply to the anchor tab provided by the widget generator. You can do things like set the background to transparent and not show the header/footer on the gadget. On my site, I’ve managed to recreate the entire look of the old widget by wrapping a widget that I’ve stripped down in that way, in a div with my own content and css stylings set to match the old gadget (which I liked). Basically, create your own header and footer above/below the widget.

If you want the tweets to have a different background, set the widget’s background to transparent and wrap the widget itself in another div, with the background-color set to whatever you want the tweet background colors to be.

I’m not sure if it was the link to the twitter post about the attributes, or if it was my sample code that isn’t letting my previous posts display, so I’ll omit them both in this reply. Hopefully you can follow what I’m saying…

mikelalala · 2013-03-26T09:02:58.000Z

Is there any way to limit the number of tweets?