Molte volte usiamo dei plugin per Twitter e abbiamo la necessità di formattare con i CSS l'output prodotto da tali plugin. Nell'esempio che vedremo useremo il plugin di jQuery Tweetable per inserire gli ultimi cinque tweet di Twitter nella pagina. Ai CSS spetterà il compito della formattazione del contenuto generato da tale plugin. Vediamo i dettagli dell'implementazione.
Iniziamo dalla marcatura:
<div id="tweets">
<h3>Tweet</h3>
<div id="tweets-content"></div>
</div>
L'elemento con ID tweets-content conterrà una lista non ordinata generata dal seguente codice jQuery:
$(function() {
$('#tweets-content').tweetable({
username: 'gabromanato',
time: true,
limit: 5
});
});
La prima cosa che vogliamo fare è usare un web font sull'intestazione dei nostri tweet. Scegliamo un web font di Google e lo inseriamo nella pagina:
<head>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' />
</head>
Quindi passiamo ad assegnare gli stili ai nostri tweet:
#tweets {
width: 300px;
padding: 140px 1em 1em 1em;
background: #fff url(twitter.png) no-repeat 50% 10px;
border-radius: 12px;
color: #000;
margin: 0 auto;
}
#tweets h3 {
margin: 0;
padding: 10px 0;
text-align: center;
font: 2em 'Permanent Marker', sans-serif;
color: #4a8cf7;
}
#tweets-content {
width: 90%;
margin: 0 auto;
}
#tweets-content ul {
margin: 0;
padding: 0;
list-style: none;
}
#tweets-content ul li {
margin-bottom: 0.5em;
line-height: 1.3;
padding-left: 11px;
background: url(arrow.gif) no-repeat 0 4px;
}
#tweets-content ul li a {
color: #d34545;
}
#tweets-content ul li small {
display: block;
font-style: italic;
}
Come si può notare, si tratta semplicemente della formattazione di una lista non ordinata in cui la data dei nostri tweet è contenuta all'interno di un elemento small. Il padding superiore di 140 pixel dato al contenitore principale ha l'unico scopo di permettere l'inserimento del logo di Twitter come immagine di sfondo.
Potete visionare l'esempio finale in questa pagina.