Customizing the Look of Outlook Web Access

Tópico modificado em: 2007-09-06

Por Darcy Jayne

Uma maneira de impressionar seus usuários e o gerenciamento é personalizar o Microsoft Office Outlook Web Access usando o logotipo e as cores da sua organização. Personalizar o Outlook Web Access é uma ótima maneira de ajudar a criar uma identidade para a sua organização em uma ferramenta da qual vários usuários dependem.

Neste artigo, mostraremos como personalizar as páginas de logon, de seleção de idiomas e de logoff e como criar um tema usando um cabeçalho personalizado. Se você desejar criar um tema do Outlook Web Access que tenha alterações mais complexas para a sua organização, comece estudando como funcionam os arquivos de folhas de estilos em cascata (.css). Depois que você já tiver uma boa compreensão dos arquivos .css, altere apenas alguns elementos de cada vez e teste suas alterações para verificar se os resultados são os esperados.

O que há em um Tema

Um tema, que é conhecido como um esquema de cores nas Opções do Outlook Web Access, define a cor de segundo plano, as fontes, as cores de realce, os ícones e o cabeçalho que são usados pelo Outlook Web Access. Por padrão, dois temas são instalados quando você instala a função de servidor Acesso para Cliente em um computador que esteja executando o Microsoft Exchange Server 2007. Os temas padrão são Céu de Seattle e Carbono Preto.

Cada tema é uma coleção de arquivos de mídia e arquivos de folhas de estilos em cascata (.css) que são armazenados no servidor Acesso para Cliente no diretório de instalação em \Client Access\OWA\version\themes. Cada tema é armazenado em seu próprio subdiretório \themes.

O tema padrão, Céu de Seattle, é o tema base e é encontrado em \themes\base. A pasta base contém todos os arquivos necessários para definir um tema. Esses arquivos incluem arquivos .css, gráficos e um arquivo .xml que define o nome do tema. Os temas adicionais são criados copiando os arquivos selecionados em um novo diretório e modificando esses arquivos conforme necessário. Quando um tema personalizado é usado, os elementos no diretório do tema personalizado são usados primeiro e quaisquer elementos necessários que não tenham sido personalizados são determinados a partir do tema base. Por exemplo, se você criar um novo tema copiando apenas os gráficos do cabeçalho para um novo tema e modificando-os, quando um usuário selecionar esse tema, os gráficos do cabeçalho virão do novo tema e o restante das propriedades do tema virão do tema base.

Novidades no Exchange 2007 SP1

O Outlook Web Access incluiu dois temas adicionais no Exchange Server 2007 Service Pack 1 (SP1). Os dois novos temas são Xbox e Zune.

Antes de Começar

É uma prática recomendada que você use as seguintes diretrizes sempre que alterar ou criar um tema do Outlook Web Access:

• Faça sempre cópias de backup dos arquivos originais antes de começar a editá-los, especialmente quando estiver editando arquivos no diretório \themes\base.

• Não exclua a pasta \Client Access\OWA\versão\themes\base nem nenhum dos arquivos contidos nela.

• Não altere as barras de informações que aparecem no topo das mensagens para alertar os usuários sobre conteúdo possivelmente prejudicial, ataques de phishing, vírus e conteúdo bloqueado ou ausente.

Criando um tema

Para iniciar, você criará uma pasta para um novo tema e, em seguida, copiará um subconjunto dos arquivos a partir do tema base na nova pasta.

1. Efetue logon no servidor Acesso para Cliente que está hospedando o Outlook Web Access usando uma conta à qual foi delegada a participação no grupo Administradores locais.

2. Abra o Windows Explorer e, em seguida, encontre o diretório de instalação do servidor Exchange.

3. Em \Client Access\OWA\<version>\themes, crie uma nova pasta e nomeie-a, por exemplo, Fourth Coffee.

4. Copie os seguintes arquivos a partir do tema base para a nova pasta:

   • premium.css

   • owafonts.css

   • logopt.gif

   • logopb.gif

   • nbbkg.gif

Nomeando o Novo Tema

Você pode nomear um tema personalizado de duas maneiras. A primeira é fornecer à pasta na qual você criou o novo tema o nome que deseja atribuir a ele. Por exemplo, como nomeamos a nova pasta Fourth Coffee, o novo tema é automaticamente nomeado Fourth Coffee.

Também é possível nomear um tema personalizado, copiando o arquivo themeinfo.xml do tema base para a nova pasta e editando o arquivo. Você pode editar o arquivo themeinfo.xml usando um editor de texto, como o Bloco de Notas, para alterar o nome para exibição do tema para o nome do tema que deseja atribuir a ele. O arquivo themeinfo.xml substituirá o nome da pasta como o nome do seu tema.

Para nomear o seu novo tema usando o arquivo themeinfo.xml, faça o seguinte:

1. Copie o arquivo themeinfo.xml da pasta do tema base para a pasta denominada Fourth Coffee.

2. Abra a cópia do arquivo themeinfo.xml que está na pasta do tema personalizado.

3. Encontre o valor theme displayname e altere-o para Fourth Coffee Theme.

   O arquivo deve ser theme displayname = "Fourth Coffee Theme"

4. Salve e feche themeinfo.xml.

Criando um cabeçalho personalizado

Agora que você copiou sobre os arquivos e nomeou o seu tema, tente personalizar o cabeçalho. Para alterar o cabeçalho no Outlook Web Access, serão necessários os seguintes arquivos, que você já copiou para a pasta para seu novo tema:

• premium.css

• owafonts.css

• logopt.gif

• logopb.gif

• nbbkg.gif

Os arquivos premium.css e owafonts.css definem as fontes e as cores que são usadas pelo Outlook Web Access. Os arquivos logopt.gif, logopb.gif e nbbkg.gif são os arquivos de imagem usados para criar o cabeçalho na parte superior da página do Outlook Web Access.

1. Comece usando uma ferramenta de edição de imagem para abrir e modificar logopt.gif.

2. Como exemplo, você alterará a cor de segundo plano de logopt.gif para roxo com um valor RGB HTML de #DCBEC8. Edite logopb.gif e nbbkg.gif para que tenham a mesma cor de segundo plano.

Um valor de cor RGB HTML é definido por uma cadeia de sete caracteres no formato do símbolo de número (#) seguido por uma cadeia de seis caracteres.

Para testar o seu tema personalizado, efetue logon no Outlook Web Access Premium (não selecione a opção Usar o Outlook Web Access Light), clique em Opções, clique em Configurações Gerais e, em seguida, selecione o tema customizado do menu Aparência. Salve as alterações e clique em Atualizar para ver o novo tema.

As seguintes figuras ilustram os arquivos originais que são usados para criar o cabeçalho para o tema Céu de Seattle Outlook Web Access e o novo cabeçalho criado modificando esses arquivos.

Arquivos de cabeçalho do Outlook Web Access

Cabeçalho personalizado do Outlook Web Access

Alterando o tema padrão do Outlook Web Access

Agora que você criou um novo tema e personalizou o cabeçalho, tente defini-lo como o tema padrão para Outlook Web Access. Para alterar o tema padrão do Outlook Web Access a partir do tema base para o seu tema personalizado, você usará o cmdlet Set-OwaVirtualDirectory. Para os exemplos a seguir, você usará "FourthCoffeeCAS" para o servidor, "owa" para o diretório virtual, "Default Web Site" para o site e "Fourth Coffee" para o nome de pasta.

• Para definir o tema padrão para Outlook Web Access para Fourth Coffee, execute o seguinte comando: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "fourth coffee"

Se algum usuário já tiver efetuado logon no Outlook Web Access e selecionado um tema, ele não será forçado para o novo tema. Para garantir que todos os usuários estejam usando o novo tema, você terá que desabilitar a seleção de temas. Você usará o cmdlet Set-OwaVirtualDirectory para fazer isso também.

• Para desabilitar a seleção de temas no Outlook Web Access, execute o seguinte comando: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -themeselectionenabled $false

Você pode concluir os dois comandos ao mesmo tempo executando o seguinte comando: set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "Fourth Coffee" -themeselectionenabled $false

Personalizando as páginas de logon e logoff

Um tema personalizado é uma ótima maneira de fornecer uma aparência personalizada para o Outlook Web Access depois que os usuários tiverem efetuado logon, mas uma página logon personalizada será percebida imediatamente. O Outlook Web Access usa somente as páginas de logon de tema base, de seleção de idiomas e de logoff. Portanto, você deve modificar os arquivos na pasta de tema base para criar as páginas personalizadas.

Os estilos de texto, as cores e as cores de segundo plano das páginas de logon, de seleção de idiomas e de logoff são definidas pelo arquivo logon.css. As páginas são criadas combinando um conjunto de imagens que são armazenadas como arquivos .gif. Os seguintes arquivos criam a página de logon:

• logon.css

• lgnbotl.gif

• lgnbotm.gif

• lgnbotr.gif

• lgnexlogo.gif

• lgnleft.gif

• lgnright.gif

• lgntopl.gif

• lgntopm.gif

• lgntopr.gif

Você vai criar uma nova aparência modificando esses arquivos para criar um conjunto de logon personalizado e páginas de logoff para Fourth Coffee. Para simplificar, você usará uma cor sólida para o segundo plano em todas as imagens.

Primeiramente, crie uma nova pasta na pasta de tema base e nomeie-a "backup". Copie todos os arquivos usados para criar as páginas de logon e logoff para a nova pasta para que você tenha as cópias de backup caso queira voltar para as páginas originais de logon e de logoff. A pasta do tema base está no diretório de instalação Exchange em \Client Access\OWA\version\themes\base.

As figuras a seguir ilustram a página de logon padrão do Outlook Web Access como ela será exibida, se o usuário clicar em mostrar explicação e selecionar Este é um computador particular e Usar o Outlook Web Access Light. Uma figura mostra como os arquivos de gráficos que criam a página cabem juntos. A outra figura mostra como o arquivo logon.css determina as cores de segundo plano e o texto na página de logon.

Página de logon do Outlook Web Access que exibe arquivos de gráficos personalizados

Página de logon padrão do Outlook Web Access que exibe opções de texto

As figuras a seguir ilustram a página de logoff padrão do Outlook Web Access. Uma figura mostra como os arquivos de gráficos que criam a página se encaixam. A outra mostra como o arquivo logoff.css determina as cores de segundo plano e o texto na página de logoff.

Página de logoff do Outlook Web Access que exibe arquivos de gráficos personalizados

Página de logoff padrão do Outlook Web Access que exibe opções de texto

Testando alterações nas páginas de logon e logoff

Você pode testar as suas alterações conforme as cria abrindo a página de logon do Outlook Web Access no Internet Explorer e usando as seguintes etapas, salvando após cada alteração.

1. Abra a página de logon ou logoff do Outlook Web Access no Internet Explorer. Se você estiver testando as alterações no site Padrão no servidor Acesso para Cliente que está hospedando o diretório virtual Outlook Web Access, poderá testá-las abrindo o Internet Explorer e entrando na URL https://localhost/owa.

2. Na barra de ferramentas, clique em Ferramentas e em Opções da Internet.

3. Na guia Geral, em Arquivos de Internet Temporários, clique em Excluir Arquivos e, em seguida, clique em Sim quando for perguntado se você tem certeza de que deseja excluir todos os arquivos temporários do Internet Explorer.

4. Clique em OK para fechar Opções da Internet.

5. Clique em Atualizar para ver as alterações.

Repita essas etapas para ver as alterações sempre que fizer uma alteração nos arquivos de página de logon ou logoff. Se você estiver fazendo várias alterações, poderá deixar a página de logon ou logoff aberta e repetir as Etapas de 2 a 6 para ver as alterações.

Personalizando os Arquivos de Imagem

Agora que foi feito backup com segurança dos seus arquivos originais para um diretório separado e que você sabe como rever as suas alterações conforme avança, é possível modificar os arquivos .gif que são os blocos de construção de gráficos das páginas de logon, de seleção de idiomas e de logoff.

Para isso, abra o lgntopl.gif usando uma ferramenta de edição de imagem e modifique-a para o seu novo projeto, mostrado na seguinte figura:

Logotipo da Fourth Coffee

Como alteramos anteriormente a cor de segundo plano do lgntopl.gif para roxo com um valor RGB HTML de #DCBEC8, você abrirá cada arquivo .gif restante e alterará sua cor de segundo plano para que seja correspondente.

Finalizando os Toques

Agora que você editou os arquivos .gif, também terá que editar o arquivo logon.css para que o segundo plano fique perfeito. Sua nova cor de segundo plano pode não funcionar muito bem com o texto original e as cores da linha de divisão. Além de definir a cor de segundo plano para que corresponda ao seu novo logotipo, você alterará a cor do texto principal e a cor da linha de divisão para que funcione melhor com as suas novas páginas.

Todas essas três cores (as cores de segundo plano, de texto principal e da linha de divisão) são definidas pelos valores RGB HTML em logon.css. Para alterá-las para as suas novas cores, você deve encontrá-las em logon.css e alterar seus valores de cor HTML RGB para os valores que desejar.

Para alterar as cores, abra logon.css em um editor de texto, como o Bloco de Notas. Pesquise a cadeia para cada elemento de cor a ser alterado, substitua o valor RGB HTML pelo novo valor com base nas informações na seguinte tabela e, em seguida, salve e feche o logon.css.

Elementos das páginas de logon e de logoff juntamente com suas descrições

Quando tiver terminado, as novas páginas de logon e de logoff serão parecidas com as seguintes figuras.

Página de logon da Fourth Coffee

Página de logoff da Fourth Coffee

Para obter mais informações

Para obter mais informações sobre como criar temas personalizados do Outlook Web Access, consulteComo criar um tema para o Outlook Web Access.

Darcy Jayne - Redator Técnico, Microsoft Exchange Server