CSS: personalizzare il layout degli embedded tweet di Twitter

I tweet di Twitter possono essere inseriti nelle nostre pagine in modo embedded tramite opportune snippet prese da Twitter. Vediamo come personalizzare il rendering di questi elementi con i CSS.

Il seguente codice riporta una delle snippet prese da Twitter:

<blockquote class="twitter-tweet">
	<p>Currently testing: jQuery and CSS animations: fly-in - <a href="http://t.co/8sFm5wFM" title="http://jsfiddle.net/gabrieleromanato/km3TE/">jsfiddle.net/gabrieleromana…</a> for web apps</p>&amp;mdash; Gabriele Romanato (@gabromanato) <a href="https://twitter.com/gabromanato/status/275673554408837120" data-datetime="2012-12-03T18:51:11+00:00">December 3, 2012</a>
</blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Usando la direttiva CSS !important e conoscendo la struttura DOM generata da JavaScript possiamo personalizzare gli stili di questo widget:

div.twitter-tweet-rendered p.entry-title {
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    padding: 5px !important;
    background: #eee !important;
    max-width: 300px !important;
}

div.twitter-tweet-rendered p.entry-title a.link {
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
}

div.twitter-tweet-rendered div.twt-border {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

div.twitter-tweet-rendered iframe.twt-follow-button { display: none !important; }

div.twitter-tweet-rendered div.footer ul.twt-actions {display: none !important;}

div.twitter-tweet-rendered div.footer a.view-details {
    display:block !important;
    width: 120px !important;
    margin: 5px 0 !important;
    padding: 7px 0 !important;
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 13px !important;
    text-align: center !important;
    box-shadow: -1px -1px 2px #555 !important;
}
    
div.twitter-tweet-rendered div.footer a.view-details span {
    font: 14px Georgia, serif !important;
    color: #fff !important;
}​