Customizing the Look of Outlook Web Access

Ultima modifica dell'argomento: 2007-09-06

Di Darcy Jayne

Un modo per catturare l'attenzione di utenti e amministratori è quello di personalizzare Microsoft Office Outlook Web Access utilizzando logo e colori della propria organizzazione. La personalizzazione di Outlook Web Access è un buon modo per fare dell'identità della propria organizzazione uno strumento sul quale molti utenti si basano.

In questo articolo verrà mostrato come personalizzare le pagine di accesso, selezione della lingua e di disconnessione e come creare un tema utilizzando un'intestazione personalizzata. Se si desidera creare un tema di Outlook Web Access con modifiche più complesse per la propria organizzazione, è necessario iniziare a studiare il funzionamento dei fogli di stile CSS (file CSS). Dopo aver compreso a fondo i file CSS, modificare solo pochi elementi alla volta e verificare le modifiche per assicurarsi che il risultato sia quello previsto.

Caratteristiche del tema

Il tema, che nelle Opzioni di Outlook Web Access è noto come schema di colori, definisce i colori dello sfondo, i tipi di carattere, i colori di evidenziazione, le icone e le intestazioni utilizzati da Outlook Web Access. Per impostazione predefinita, vengono installati due temi quando si installa il ruolo del server Accesso client in un computer sul cui è in esecuzione Microsoft Exchange Server 2007. I temi predefiniti sono Cielo di Seattle e Nerofumo.

Ogni tema è una raccolta di file multimediali e fogli di stile CSS archiviati sul server Accesso client nella directory di installazione in \Client Access\OWA\version\themes. Ogni tema viene memorizzato nella relativa sottodirectory \themes.

Il tema predefinito, Cielo di Seattle, è il tema base e si trova in \themes\base. La cartella base contiene tutti i file necessari per definire un tema. Si tratta dei file CSS, grafica e di un file XML che definisce il nome del tema. È possibile creare temi aggiuntivi copiando i file selezionati in una nuova directory e modificandoli in base alle esigenze. Quando viene selezionato un tema personalizzato, vengono utilizzati per primi gli elementi della directory del tema personalizzato e tutti gli altri elementi che non sono stati personalizzati vengono ricavati dal tema base. Se si crea, ad esempio, un nuovo tema copiando solo la grafica di intestazione in un nuovo tema e poi modificandola, quando un utente seleziona il tema in questione, la grafica di intestazione verrà ricavata dal nuovo tema e il resto delle proprietà dal tema base.

Novità in Exchange 2007 SP1

Con Outlook Web Access sono stati aggiunti altri due temi in Exchange Server 2007 Service Pack 1 (SP1). I due nuovi temi sono Xbox e Zune.

Nozioni preliminari

Si consiglia di utilizzare le linee guida seguenti ogni volta che si modifica o si crea un tema di Outlook Web Access:

• Eseguire sempre una copia di backup dei file originali prima di modificarli, specialmente se si modificano file nella directory \themes\base.

• Non eliminare la cartella \Accesso client\OWA\version\themes\base né alcuno dei file in essa contenuti.

• Non modificare le barre informazioni visualizzate nella parte superiore dei messaggi per avvisare gli utenti di potenziali rischi rappresentati da contenuto dannoso, bloccato o mancante, attacchi di phishing e virus.

Creazione di un tema

Per iniziare, creare una cartella per il nuovo tema, quindi copiare nella nuova cartella un sottoinsieme di file dal tema base.

1. Connettersi al server Accesso client che ospita Outlook Web Access utilizzando un account che disponga della delega di appartenenza al gruppo Administrators locale.

2. Aprire Esplora risorse di Windows, quindi individuare la directory di installazione del server Exchange.

3. In \Accesso client\OWA\<versione>\themes creare una nuova cartella e attribuirle un nome, ad esempio, Fourth Coffee.

4. Copiare dal tema base i seguenti file nelle nuova cartella:

   • premium.css

   • owafonts.css

   • logopt.gif

   • logopb.gif

   • nbbkg.gif

Denominazione del nuovo tema

È possibile nominare un tema personalizzato in due modi. Il primo metodo consiste nel nominare la cartella nella quale è stato creato il nuovo tema con il nome che si desidera attribuire al tema stesso. Ad esempio, poiché la nuova cartella è stata denominata Fourth Coffee, il nuovo tema viene automaticamente denominato Fourth Coffee.

È possibile inoltre nominare un tema personalizzato copiando il file themeinfo.xml dal tema base nella nuova cartella e quindi modificare il file. È possibile modificare il file themeinfo.xml mediante un editor di testo come Blocco note al fine di sostituire il nome visualizzato del tema con il nome che si desidera attribuire al tema stesso. Il file themeinfo.xml sostituirà il nome della cartella come nome del tema.

Per denominare il nuovo tema utilizzando il file themeinfo.xml, procedere come segue:

1. Copiare il file themeinfo.xml dalla cartella del tema base alla cartella denominata Fourth Coffee.

2. Aprire la copia del file themeinfo.xml che si trova nella cartella del tema personalizzato.

3. Individuare il valore theme displayname, quindi modificarlo in Fourth Coffee Theme.

   Il file dovrebbe apparire con il nome theme displayname = "Fourth Coffee Theme"

4. Salvare e chiudere il file themeinfo.xml

Creazione di un'intestazione personalizzata

Dopo aver copiato i file e denominato il tema, è possibile provare a personalizzare l'intestazione. Per modificare l'intestazione in Outlook Web Access, sono necessari i file seguenti, già copiati nella cartella del nuovo tema:

• premium.css

• owafonts.css

• logopt.gif

• logopb.gif

• nbbkg.gif

Premium.css e owafonts.css definiscono i tipi di carattere e i colori utilizzati da Outlook Web Access. Logopt.gif, logopb.gif, e nbbkg.gif sono i file immagine utilizzati per creare l'intestazione nella parte superiore della pagina di Outlook Web Access.

1. Iniziare utilizzando uno strumento di modifica delle immagini e modificare l'immagine logopt.gif.

2. Ad esempio, cambiare il colore di sfondo di logopt.gif in color malva, con il valore HTML RGB pari a #DCBEC8. Modificare logopb.gif e nbbkg.gif in modo che abbiano lo stesso colore di sfondo.

Il valore di colore HTML RGB è definito da una stringa di sette caratteri, ossia cancelletto (#) seguito da una stringa di sei caratteri.

Per provare il tema personalizzato, connettersi a Outlook Web Access Premium (non selezionare l'opzione Utilizza Outlook Web Access Light), fare clic su Opzioni, quindi su Impostazioni generali e selezionare il tema personalizzato dal menu Aspetto. È necessario salvare le proprie modifiche e scegliere Aggiorna per visualizzare il nuovo tema.

Nelle figure seguenti vengono mostrati i file originali utilizzati per creare l'intestazione del tema Cielo di Seattle di Outlook Web Access e la nuova intestazione creata modificando tali file.

File di intestazione di Outlook Web Access

Intestazione personalizzata di Outlook Web Access

Modifica del tema predefinito di Outlook Web Access

Dopo aver creato un nuovo tema e personalizzato l'intestazione, provare a impostarlo come tema predefinito di Outlook Web Access. Per cambiare il tema predefinito di Outlook Web Access dal tema base al tema personalizzato, è necessario utilizzare il cmdlet Set-OwaVirtualDirectory. Negli esempi seguenti, verranno utilizzati "FourthCoffeeCAS" per il server, "owa" per la directory virtuale, "Default Web Site" per il sito Web e "Fourth Coffee" per il nome della cartella.

• Per impostare il tema predefinito per Outlook Web Access su Fourth Coffee, eseguire il comando riportato di seguito: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "fourth coffee"

Se sono presenti utenti già connessi a Outlook Web Access e che hanno selezionato un tema, non verranno forzati a visualizzare il nuovo tema. Per assicurasi che tutti gli utenti utilizzino il nuovo tema, è necessario disabilitare la selezione dei temi. A questo scopo, è anche possibile utilizzare il cmdlet Set-OwaVirtualDirectory.

• Per disabilitare la selezione dei temi in Outlook Web Access, eseguire il comando riportato di seguito: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -themeselectionenabled $false

È possibile eseguire entrambi i comandi contemporaneamente mediante il seguente comando: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "Fourth Coffee" -themeselectionenabled $false

Personalizzazione delle pagine di accesso e disconnessione

Il tema personalizzato è un ottimo modo per personalizzare l'aspetto di Outlook Web Access dopo che gli utenti si sono connessi, ma una pagina di accesso personalizzato verrà notata anche prima. Outlook Web Access utilizza solo le pagine di accesso, di selezione della lingua e di disconnessione del tema base. Pertanto, per creare pagine personalizzate è necessario modificare i file della cartella del tema base.

Gli stili di testo, i colori e i colori di sfondo delle pagine di accesso, di selezione della lingua e di disconnessione sono definiti dal file logon.css. Le pagine sono create con la combinazione di una serie di immagini memorizzate in formato GIF. I file seguenti creano la pagina di accesso:

• logon.css

• lgnbotl.gif

• lgnbotm.gif

• lgnbotr.gif

• lgnexlogo.gif

• lgnleft.gif

• lgnright.gif

• lgntopl.gif

• lgntopm.gif

• lgntopr.gif

Ora si creerà un nuovo aspetto modificando questi file al fine di creare una serie di pagine di accesso e di disconnessione personalizzate per il tema Fourth Coffee. Per semplificare la procedura, si utilizzerà un colore uniforme per lo sfondo di tutte le immagini.

Prima di tutto, creare una nuova cartella nella cartella del tema base e denominarla "backup". Copiare tutti i file utilizzati per la creazione delle pagine di accesso e di disconnessione nella nuova cartella, in modo da disporre di una copia di backup nel caso si desideri tornare alle pagine di accesso e di disconnessione originali. La cartella del tema base si trova nella directory di installazione di Exchange, in \Accesso client\OWA\version\themes\base.

Le figure seguenti mostrano la pagina di accesso predefinita di Outlook Web Access così come appare quando l'utente sceglie mostra spiegazione e seleziona Computer privato e Utilizza Outlook Web Access Light. Una figura mostra in che modo si combinano i file di grafica che creano la pagina. L'altra figura mostra in che modo il file logon.css determina i colori dello sfondo e il testo della pagina di accesso.

I file di grafica personalizzati che visualizzano la pagina di accesso di Outlook Web Access

Le opzioni di testo che visualizzano la pagina di accesso di Outlook Web Access predefinita

Le seguenti figure mostrano la pagina di disconnessione di Outlook Web Access predefinita. In una figura viene mostrato come si combinano insieme i file di grafica che creano la pagina. Nell'altra viene mostrato come il file logoff.css determina i colori dello sfondo e il testo della pagina di disconnessione.

I file di grafica personalizzati che visualizzano la pagina di disconnessione di Outlook Web Access

Le opzioni di testo che visualizzano la pagina di disconnessione di Outlook Web Access predefinita

Verifica delle modifiche apportate alle pagine di accesso e di disconnessione

È possibile provare le modifiche mentre si effettuano aprendo la pagina di accesso di Outlook Web Access in Internet Explorer e utilizzando i passaggi seguenti, eseguendo un salvataggio dopo ogni modifica.

1. Aprire la pagina di accesso e la pagina di disconnessione di Outlook Web Access in Internet Explorer. Se si stanno verificando le modifiche al sito Web predefinito sul server Accesso client che ospita la directory virtuale Outlook Web Access, è possibile effettuare la verifica aprendo Internet Explorer e inserendo l'URL https://localhost/owa.

2. Nel barra degli strumenti fare clic su Strumenti, quindi su Opzioni Internet.

3. Nella scheda Generale in File temporanei Internet scegliere Elimina file, quindi fare clic su Sì per procedere con l'eliminazione di tutti i file temporanei di Internet Explorer.

4. Fare clic su OK per chiudere la finestra Opzioni Internet.

5. Fare clic su Aggiorna per visualizzare le proprie modifiche.

Ogni volta che si apporta una modifica ai file della pagina di accesso o di disconnessione, ripetere questi passaggi per visualizzare le modifiche. Se si apportano più modifiche, è possibile lasciare aperta la pagina di accesso o di disconnessione e ripetere i passaggi da 2 a 6 per visualizzare le modifiche.

Personalizzazione dei file di immagine

Ora che è stato eseguito un backup dei file originali in una directory separata e che si conosce come rivedere le modifiche mentre si eseguono, è possibile modificare i file GIF che costituiscono i blocchi per la costruzione della grafica delle pagine di accesso, di selezione della lingua e di disconnessione.

A questo scopo, aprire il file lgntopl.gif utilizzando uno strumento di modifica delle immagini e modificarlo in base al proprio progetto come mostrato nella figura seguente:

Logo Fourth Coffee

Poiché in precedenza è stato cambiato il colore di sfondo di lgntopl.gif in color malva con un valore HTML RGB pari a #DCBEC8, sarà necessario aprire tutti i file GIF rimanenti per cambiare il colore di sfondo nello stesso modo.

Tocchi finali

Ora che sono stati modificati i file GIF, è necessario modificare anche il file logon.css in modo che lo sfondo risulti uniforme. Il nuovo colore di sfondo potrebbe non andare molto bene con il testo originale e i colori delle linee di divisione. Oltre a impostare il colore di sfondo in modo che corrisponda al nuovo logo, sarà necessario cambiare il colore del testo primario e il colore delle linee di divisione per meglio combinarli con le nuove pagine.

Tutti e tre i colori, quello dello sfondo, quello del testo primario e quello delle linee di divisione, sono definiti da valori HTML RGB nel file logon.css. Per cambiarli nei nuovi colori, è necessario individuarli nel file logon.css e modificare il valore HTML RGB dei colori con i valori desiderati.

Per cambiare tali colori, aprire il file logon.css in un editor di testo, come Blocco note. Ricercare la stringa corrispondente a ogni elemento di colore da modificare, sostituire il valore HTML RGB con il nuovo valore, in base alle informazioni contenute nella tabella seguente, quindi salvare il file logon.css e chiuderlo.

Elementi della pagina di accesso e di disconnessione e relative descrizioni

Al termine, le nuove pagine di accesso e di disconnessione saranno simili alle figure seguenti.

Pagina di accesso di Fourth Coffee

Pagina di disconnessione di Fourth Coffee

Ulteriori informazioni

Per ulteriori informazioni su come creare temi personalizzati di Outlook Web Access, vedereCome creare un tema per Outlook Web Access.

Darcy Jayne - Technical Writer, Microsoft Exchange Server