Or center embedded tweets with just CSS

After my earlier post on “Centering embedded tweets in WordPress” I’d gotten a reply from Ipstenu and Otto on Twitter.

Customizing how tweets are displayed is not a new problem. 😉

This got me taking a second look at the CSS of an embedded tweet. With Firebug you can inspect just about any items properties and I found the rule quickly.

I’m still picking up CSS knowledge all the time and I always forget about !important.

That tag lets you override rules even when it the normal CSS should get precedence. Which is why when I tried this in CSS previously it didn’t work for me, the rule I added was missing that tag. Continue reading “Or center embedded tweets with just CSS”

Centering embedded tweets in WordPress

Update: While the below solution is fun and works, it’s a little heavy handed code-wise. It’s easier to modify the presentation of the tweet using CSS which I explain in the next post.

A better solution is probably documented somewhere, but this worked for me and more importantly I had fun.

I was reading a blog post and noticed that the embedded tweets there were centered neatly and were not the same width as my own embedded tweets. The ones that I had inserted were left justified and had a 550px width.

I’d never liked the styling of my tweets, but all I was doing was pasting the tweet URL into the editor. I wasn’t pasting in the code from Twitter, WordPress was retrieving it for me via oEmbed.

I looked at the source of that page and noticed that the other blog post had added an additional CSS class to the tweet called tw-align-center and the hard-coded width=”550″ was removed.

That’s not surprising because when you visit Twitter’s page on embedding tweets, you can see the options for alignment. But how to do it in WordPress?

Continue reading “Centering embedded tweets in WordPress”