SharePoint 2010 - Cambiare immagini e layout del Search Box
Abbiamo avuto qualche difficoltà nel dover cambiare il layout, le immagini o il css del box di Ricerca in un Sito SharePoint.
Il problema principale è nella modifica delle immagini: ad esempio, del bottone di ricerca, la lente di ingrandimento.
In SharePoint, viene recuperata tramite il posizionamento di una immagine unica (fgpng.png), contenente tutte le icone, utilizzando le proprietà di Top, Left sull'immagine.
Modificare questo png con tutte le icone non è consigliabile, perché cambierebbe su tutti i Siti della farm.
Inoltre, la lente è proprio una immagine, definitia senza classe css, per cui non è possibile intervenire solo con il foglio di stile.
Abbiamo trovato questa soluzione, un piccolo trucco, che ha funzionato egregiamente!
Sovrascriviamo le classi che definiscono l'immagine del bottone di ricerca e definiamo la nuova immagine per il link del bottone:
.ms-sbgo a {
background-image:url("/_layouts/images/myboxsearch/lente.png");
background-position:4px 5px;
background-repeat: no-repeat;
/* ecc ecc */
}
E ora, nascondiamo l'immagine, sempre con il css:
.ms-sbgo > a > img{
visibility: hidden;
height: 24px;
width: 32px;
padding:0;
}
Il problema principale è nella modifica delle immagini: ad esempio, del bottone di ricerca, la lente di ingrandimento.
In SharePoint, viene recuperata tramite il posizionamento di una immagine unica (fgpng.png), contenente tutte le icone, utilizzando le proprietà di Top, Left sull'immagine.
Modificare questo png con tutte le icone non è consigliabile, perché cambierebbe su tutti i Siti della farm.
Inoltre, la lente è proprio una immagine, definitia senza classe css, per cui non è possibile intervenire solo con il foglio di stile.
Abbiamo trovato questa soluzione, un piccolo trucco, che ha funzionato egregiamente!
Sovrascriviamo le classi che definiscono l'immagine del bottone di ricerca e definiamo la nuova immagine per il link del bottone:
.ms-sbgo a {
background-image:url("/_layouts/images/myboxsearch/lente.png");
background-position:4px 5px;
background-repeat: no-repeat;
/* ecc ecc */
}
E ora, nascondiamo l'immagine, sempre con il css:
.ms-sbgo > a > img{
visibility: hidden;
height: 24px;
width: 32px;
padding:0;
}
Il risultato è che vedremo solo la nostra icona sul bottone e non quella di sistema!
Lo stesso trucco si può utilizzare con successo anche per :
- Icone del Calendario (prev, next)
- Separatori delle Breadcrumbs
Comments
Post a Comment