After my earlier post on “Centering embedded tweets in WordPress” I’d gotten a reply from Ipstenu and Otto on Twitter.
@jan_dembowski You can override it with CSS and !important. I did on a bbPress.
— ipstenu ((Mika 実佳)) (@Ipstenu) July 4, 2012
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.