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.

Using that tag lets me put what I want into my theme’s style.css.

div.twt-border {
        width: 400px !important;
        margin-right: auto !important;
        margin-left: auto !important;
}

That let’s me set the width of the tweet to 400px and center it nicely within the post.

That’s a more attractive solution than filtering oembed_results and it’s much more dynamic. I can adjust the CSS at anytime without worrying about any cached embeds.

Playing with filters is still fun, but if you want to make adjustments to how your embedded tweets are displayed then this is a much easier and safer solution.

One thought on “Or center embedded tweets with just CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>