Twitter Profile
salta alla navigazione

WordPress: personalizzare le icone del plugin Sociable 14 settembre 2009

Inviato da LukePet in : Chicche, Informatica, Internet, Prodotti, Software, Sviluppo, Tutorial, Web , trackback

E’ già da un pò che mi sono adoperato per fare un piccolo restyling alle icone di condivisione per i post di questo blog…ed il risultato è ormai da tempo ben visibile in coda ad ogni post. Giusto per essere più chiari, ecco di cosa sto parlando:

NewSociable

L’immagine soprastante mostra il riquadro utilizzato per la condivisione dei post sui principali servizi di comunicazione web. Dal punto di vista funzionale tutto è gestito dal plugin Sociable, che permette di selezionare da un elenco di servizi disponibili quelli per i quali si vuole predisporre il collegamento rapido per la condivisione.

Nulla da eccepire quindi, Sociable il suo lavoro lo svolge egregiamente…ma dal punto di vista grafico così com’era non mi convinceva; di default le icone mi sembravano troppo piccole e poco “interessanti”. Tutto ciò mi ha spinto a dare una ritoccata all’aspetto grafico, ottenendo il risultato mostrato nell’immagine precedente…non c’è voluto molto, qualche nuova icona ed un ritocco al foglio di stile ed il gioco è fatto.

Ora per la gioia di tutti gli smanettatori grafici espongo con chiarezza i passi da seguire per ottenere il mio stesso risultato:

1) Prima di tutto, chiaramente, installate il plugin Sociable (http://wordpress.org/extend/plugins/sociable). Fatto?

2) Dal pannello di configurazione del plugin selezionate i servizi per cui volete rendere disponibile la condivisione. Fatto?

3) A questo punto dovete ricercare il pacchetto di icone che più vi piace, da associare ai servizi che avete selezionato precedentemente (io, per esempio, le ho trovate sul sito http://www.iconspedia.com). Fatto?

Se per caso vi interessassero le stesse mie icone potete scaricare il pacchetto direttamente da qui: newsociable.

NB: è fondamentale che rinominiate le nuove icone con gli stessi nomi delle icone di default del plugin Sociable.

4) Ora, via FTP, caricate le nuove icone in una directory a scelta del vostro spazio web; tornate nel pannello di configurazione di Sociable e nel settaggio “Image directory” inserite l’url che punta alla directory appena uploadata. Fatto?

5) Bene, adesso abbiamo le nuove icone…non resta che modificare il foglio di stile. Dal pannello di configurazione di Sociable nel settaggio “Use CSS” disabilitate l’opzione “Use the sociable stylesheet” (andremo a ridefinire le nuove classi direttamente nel foglio di stile del tema in uso); aprite il file style.css del tema che state usando ed aggiungete le seguenti istruzioni:

.sociable {
	padding:5px;
	background-color:#EFEFFF;
	border:2px solid #DDDDFF;
	height:80px;
	margin:auto;
	width:624px;
}
 
.sociable_tagline {
	padding-bottom:10px;
	color:#666;
	font-size: 11px;
}
 
.sociable {
	margin-top: 26px !important;
}
 
.sociable img {
	width:42px; /* questo perchè le icone da me utilizzate sono larghe 42px */
}
 
.sociable ul {
	display:inline;
	margin:0 !important;
	padding:0 !important;
}
 
.sociable ul li {
	background:transparent none repeat scroll 0 0;
	display:inline !important;
	list-style-type:none;
	margin:0 0 0 4px;
	padding:1px;
}
 
.sociable-hovers {
	opacity:0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}
 
.sociable-hovers:hover {
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
}

NB: chiaramente questo stile è adattato al mio tema…è scontato che nel caso in cui lo sfruttaste in altre situazioni siano necessari dei ritocchi.

Come ultimo passo non resta che salvare il foglio di stile con le nuove modifiche inserite e gustarvi la nuova veste grafica delle icone Sociable. Fatto?

Ottimo, il lavoro è completato! Ok…ora condividete pure :)