Di recente Flattr ha cambiato il design dei suoi pulsantini, e chi - come il sottoscritto - ha passato notti di lacrime e sangue ad allinearsi tutti gli elementi del layout in modo che il risultato non sembrasse un manifesto futurista, si è ritrovato magicamente con il tutto (per l'ennesima volta) sputtanato.

Per fortuna esiste un modo per cambiare le dimensioni dei pulsantini di Flattr: basta un po' di codice CSS.

Il trucco è possibile grazie al fatto che le dimensioni dei pulsantini Flattr si adattano a quelle dell'<iframe> che li contiene. Se quindi vogliamo un pulsante di 50x50 pixel, basta inserire un codice del genere:

<style = "text/css">
  iframe.FlattrButton {
    width: 50px !important;
    height: 50px !important;
  }
</style>
e così tutti i pulsantini Flattr presenti sulla pagina avranno una dimensione 50x50.

Se volete cambiare le dimensioni di un singolo pulsante, invece che di tutti, dovrete dapprima racchiudere il codice del pulsante stesso in un tag <div> o <span> con una classe definita a piacere:
<div class="pulsantedilato">
  Codice pulsante Flattr
</div>
dopodiché specificare sempre uno stile CSS, però riferito a quella particolare classe:
<style = "text/css">
  .pulsantedilato iframe.FlattrButton {
    width: 50px !important;
    height: 50px !important;
  }
</style>
Et voilà, fatto, tutto grazie alla putenza dei selettori CSS (se volete capirne di più un buon punto da cui partire è questo).

Purtroppo questo trucco non funziona con gli altri pulsantini social (non con Twitter, Facebook e Google +1 almeno), perché il loro codice se ne frega delle dimensioni dell'iframe contenitore - ma non escludo che usando un po' di kung-fu CSS non si possa comunque cambiare anche il loro aspetto.

Bene amicici, direi che è tutto, ci si becca al prossimo sputtanamento generalizzato dei layout e ricordate, il CSS è vostro amico e non c'è anfratto di html dove non arrivi la keyword !important.