Posts

Showing posts with the label css

SharePoint 2010 - Cambiare immagini e layout del Search Box

Image
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");    ...

LyteBox sulle immagini inserite in Blogger

Image
Ovviamente non l'ho scoperto io né tantomeno me lo sono inventato. Copio e incollo un riassunto delle istruzioni per l'effetto tipo Lightbox per le immagini inserite in questo Blog! Andare su Layout > Modifica HTML e, dopo aver salvato il modello completo, cercate la riga </head>, quindi, immediatamente sopra incollateci il seguente codice (ovviamente potete scaricare i file necessari e metterli dove volete): <!-- EFFETTO LYTEBOX INIZIO --> <link href='https://sites.google.com/site/ideepercomputeredinternet/script-1/lytebox-stile-2.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/lytebox-script.js' type='text/javascript'/> <!-- EFFETTO LYTEBOX FINE --> Salvate il modello e la personalizzazione è completata. Per attivarla bisogna operare sul codice delle foto inserite. Si possono ottenere effetti su u...

GGInstant - Un Progetto di ricerche istantanee

Image
Applicazione del post Instant Search sul tuo Sito con evoluzione interessante! Ho aggiunto, infatti, la istantanea ricerca della parola cercata tra le mappe e le news di Google! Visita il sito GGinstant

Filtrare le righe di una tabella con JQuery

Un cliente mi ha chiesto di inserire sul sito la possibilità di filtrare i dati di una tabella. Come spesso accade, l'applicativo da modificare non è stato sviluppato dal sottoscritto, né da suoi colleghi, per cui il modo più rapido, senza sorgenti o ricompilazioni, è agire lato client. In questo, mi è venuto in aiuto JQuery. Strano, vero? Alla fine è il mio miglior consulente per attività di questo tipo. Scopiazziando, ovviamente, da un paio di siti, completo i loro articoli con lo script corretto da utilizzare: semplice, rapido e sopratutto "fa scena", per la rapidità e il behaviour decisamente web 2.0. 1) La tabella da filtrare deve avere il codice class="filterable" (se usate datagrid .NET, CssClass="filterable"). 2) Aggiungere in testa alla tabella, il codice seguente: è la casella di testo che farà il filtro sulle righe. Filter: 3) Ora aggiungere il codice seguente: $(document).ready(function(){ //add index colum...

Instant Search sul tuo Sito

Image
Seguendo il concetto e il successo di Google Instant, altri siti hanno implementato la loro ricerca immediata come YouTubeInstant , Bing Instant e Facebook Instant . Grazie a Google AJAX Search API combinate con un Motore di ricerca personalizzato , creare una Ricerca Instant per il tuo sito. In questo articolo vediamo come! Nota 1 : questa è la traduzione del post How to Create an Instant Search for your Web Site Nota 2 : il progetto demo del post originale l'ho modificato per farlo funzionare con IE8! Per vedere una demo di Instant Searcg in azione, andate al mio progetto demo e inserite chiavi di ricerca. 1. Vai alla ricerca personalizzata di Google e accedi al tuo account Google. Crea un nuovo motore di ricerca personalizzato e aggiungi il sito (o i siti ) che si desidera includere nei risultati del motore di ricerca istantanea che si sta per creare. Non c'è bisogno di personalizzare il motore di ricerca o modificare gli elementi CSS. Dovrete soltanto l'I...