Utilizzo del motore di gestione dei temi di SharePoint

Utilizzo del motore di gestione dei temi di SharePoint

Salve, sono di nuovo Kolby. Man mano che si avvicina l'uscita di SharePoint 2010, sono sempre più entusiasta del nostro prodotto e di alcune delle nuove funzionalità che abbiamo inserito. Sono soprattutto ansioso di farvi conoscere le funzionalità di gestione dei temi che il team SharePoint ha aggiunto a questa versione. La scorsa settimana ho imparato a impostare un file CSS per l'applicazione di temi a una pagina master in SharePoint Designer 2010 e ho pensato "Lo devono sapere tutti".

Quali sono le funzionalità di gestione dei temi disponibili?  

Il motore di gestione dei temi agisce sui file CSS ed è in grado di eseguire le operazioni seguenti (il nome del token è in corsivo):

• Sostituire i colori, ad esempio di sfondo o del tipo di carattere - ReplaceColor
• Sostituire i tipi di carattere - ReplaceFont
• Ricolorare le immagini utilizzando uno dei tre metodi disponibili, ovvero tinta, miscela e riempimento - RecolorImage

Mediante l'interfaccia utente del browser è possibile selezionare un tema del sito predefinito oppure con SharePoint Server creare un nuovo tema selezionando dodici colori e due tipi di carattere. Questi valori vengono archiviati in un file THMX, uno standard utilizzato anche da Microsoft Office. È inoltre possibile creare un tema in Microsoft PowerPoint e salvarlo come file THMX da utilizzare in SharePoint. I file THMX vengono archiviati nella Raccolta temi del sito radice ed è possibile aggiungere temi tramite SharePoint Designer o tramite la raccolta temi di Impostazioni sito nel browser. I dodici colori del tema sono rappresentati dai token seguenti:

• Dark1, Dark2
• Light1, Light2
• Accent1, Accent2, Accent3, Accent4, Accent5, Accent6
• Hyperlink
• Followed Hyperlink

Il motore di gestione dei temi funziona con questi colori e produce cinque ulteriori permutazioni di ognuno, ovvero Lightest, Lighter, Medium, Darker e Darkest. Per fare riferimento a una permutazione nel file CSS, utilizzare il formato Colore-Permutazione, ad esempio "Light2-Darkest".

Sintassi 

Il motore di gestione dei temi funziona leggendo i commenti presenti nel file CSS. Per uno stile con tema, definire una scelta predefinita e inserire un token di gestione dei temi direttamente prima dello stile. Si supponga ad esempio di avere un elemento background-color a cui si desidera venga applicato il tema Light2-Darkest. La definizione nel file CSS sarà simile alla seguente:

/* [ReplaceColor(themeColor:"Light2-Darkest")] */ background-color:#707070;

Nel tema predefinito lo sfondo risulterà come #707070, ma se viene applicato un tema, il colore di sfondo verrà sostituito da Light2-Darkest. Per alcuni esempi sull'utilizzo degli altri token, vedere la fine di questo articolo o esaminare il file CSS predefinito per v4.master (corev4.css), che costituisce un utile riferimento.

Impostazione del file 

Per impostare una pagina master con funzionalità di gestione dei temi, è necessario eseguire due operazioni:

1. Inserire il file CSS in un percorso in cui risulterà visibile al motore.
2. Registrare il file CSS correttamente nella pagina master.

Percorso 

Il motore di gestione dei temi agirà sui file CSS solo se questi si trovano nel percorso corretto. Per le nostre personalizzazioni, verrà utilizzata la cartella RootSite/Style Library/~language/Themable. Tale cartella sarà disponibile per i siti di SharePoint Server con la funzionalità Pubblicazione SharePoint Server attivata. Se si sta lavorando in un sito radice senza questa struttura, sarà necessaria solo una cartella denominata "Style Library" nel sito radice con una sottocartella denominata "Themable". Qualsiasi contenuto presente nella cartella Themable verrà rilevato dal motore di gestione dei temi, incluso il contenuto delle sottocartelle. Ricreare questa struttura di cartelle in SharePoint Designer o tramite il browser. La cartella della lingua (language) è facoltativa, ma diventa necessaria se si desiderano file CSS diversi per lingue diverse. Nel caso dell'inglese, denominare la cartella en-us.

Non è necessario che le immagini si trovino in un percorso specifico, tuttavia il percorso consigliato è la cartella RootSite/Style Library/Images.

Ecco un paio di suggerimenti per ricolorare le immagini. Se si ricolora un'immagine visualizzata in più posizioni, l'ultima ricolorazione eseguita sull'immagine verrà utilizzata in tutte le posizioni con tema. Desideravo ad esempio mostrare i diversi metodi di ricolorazione sulla stessa immagine (tinta, miscela e riempimento), ma dappertutto è risultato il riempimento. Ho dovuto salvare singole copie dell'immagine e applicarvi temi diversi. (Nota: come ultima procedura alternativa, è possibile utilizzare un attributo detach per indicare al motore di creare una nuova immagine al momento della ricolorazione, ma questo metodo deve essere applicato raramente perché comporta un calo delle prestazioni a seguito del download di diverse copie dell'immagine durante il rendering. Non mi soffermerò perciò oltre sull'argomento). Nel caso di cluster di immagini, ovvero un singolo file contenente più di un'immagine, è possibile ricolorare parti dell'immagine utilizzando il parametro includeRectangle. Per un esempio, esaminare corev4.css.

Registrazione 

Per applicare i file CSS con tema alla pagina master, è necessario registrare il file CSS invece di collegarlo semplicemente. In questo modo, con l'applicazione di un tema, la pagina master punterà al file CSS con tema. Nel tag head della pagina master inserire il parametro seguente:

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/ Themable /myStyleSheet.css %>" After="corev4.css" runat="server"/>

Il parametro After garantisce che il file CSS con tema venga applicato alla pagina dopo corev4.css. Il token <% $SPUrl non verrà tuttavia risolto in SharePoint Foundation, dove sarà necessario indicare il percorso utilizzando un URL specificato a livello di codice (hard-coded). Ciò sarà sfortunatamente limitante se si desidera utilizzare file CSS diversi per lingue diverse, dal momento che non vi sarà un token ~language.

Demo 

A questo punto, il file CSS con possibilità di applicazione del tema è stato impostato. Creare una pagina master e provare a eseguire la procedura. Per avere una migliore comprensione del pallet di colore che si otterrà alla fine con questi temi, in v4.master ho creato una tabella di grandi dimensioni in cui sono riportate tutte le permutazioni di colore. Ho inoltre incluso un'immagine di esempio e ho tentato di ricolorarla. La tabella è riportata qui di seguito con la combinazione di colori predefinita. Ho utilizzato il bianco come impostazioni predefinite per gli stili background-color.

Passare quindi al browser e selezionare un nuovo tema del sito, ad esempio Convention with Papyrus e Segoe Script come tipi di carattere. Viene così visualizzata una tabella molto più colorata (vedere di seguito). Ho applicato un tema ai testi dei collegamenti ipertestuali e alle etichette delle immagini. Per la ricolorazione ho utilizzato Dark2-Lightest . È possibile notare la perfetta corrispondenza dei colori tra la cella Dark2-Lightest e il logo ricolorato con il metodo di riempimento.

Codice di esempio 

Di seguito è riportata come esempio una parte del file CSS per la seconda immagine del logo per cui ho applicato il tipo di carattere, il relativo colore e il colore dell'immagine come tema:

/* [ReplaceFont(themeFont: "MinorFont")] */ font-family:Verdana;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:black;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/spdicon1.png") no-repeat;

La qualità della ricolorazione dell'immagine è veramente sorprendente. Se utilizzato correttamente e con senso estetico, il motore di gestione dei temi di SharePoint può essere uno strumento prezioso per chi è interessato sia all'aspetto che alla funzionalità dei documenti.

Grazie per avere letto questo post. Spero che anche voi possiate come me scoprire quanto sia utile e straordinario il nuovo motore di gestione dei temi di SharePoint.

Questo è un post di blog localizzato. L'articolo originale è disponibile in Working with the SharePoint Theming Engine.