Compartilhar via

Como criar um tema para o Outlook Web Access

  • Artigo

 

Aplica-se a: Exchange Server 2007 SP3, Exchange Server 2007 SP2, Exchange Server 2007 SP1, Exchange Server 2007

Tópico modificado em: 2007-09-12

Este tópico explica como criar um tema personalizado para o Microsoft Office Outlook Web Access. Um tema é uma coleção de arquivos e folhas de estilos que controlam a aparência do 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 dois temas são Céus de Seattle e Preto Carbono.

Somente o Outlook Web Access Premium oferece suporte para temas personalizados. Não é possível criar temas personalizados para o Outlook Web Access Light.

Novidades no Exchange 2007 SP1

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

O que está incluído em um tema

Um tema é uma coleção de arquivos de mídia e arquivos de folhas de estilos em cascata (arquivos .css). Os arquivos são armazenados no servidor de Acesso para Cliente no diretório de instalação, em \Client Access\OWA\versão\themes. Cada tema é armazenado em um subdiretório de temas.

Os arquivos .css definem cores, gradientes e fontes. Os arquivos de imagem (arquivos .gif) fornecem os ícones e outros elementos gráficos. Se você editar qualquer um dos ícones, não altere seu tamanho. Se você alterar o tamanho de outros elementos gráficos, teste suas alterações para verificar se os elementos ainda caberão juntos corretamente.

O tema padrão (Céus de Seattle) é o tema base e é encontrado em \themes\base. A pasta base contém todos os arquivos necessários para definir um tema. Entre eles estão cores, fontes, ícones e gráficos.

Você pode criar temas adicionais copiando os arquivos selecionados em um novo diretório e modificando os arquivos para atender às necessidades de sua organização. Na interface de usuário do Outlook Web Access, os temas são conhecidos como esquemas de cores. Quando um usuário seleciona um tema personalizado, 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.

Os temas são salvos em cada servidor de Acesso para Cliente. Se você tiver mais de um servidor de Acesso para Cliente e desejar que um tema personalizado fique disponível em todos os servidores, deverá copiar o tema no diretório themes de cada servidor de Acesso para Cliente.

Recomendações

Vários elementos de um tema do Outlook Web Access podem ser alterados. Para evitar criar instabilidade no Outlook Web Access, recomendamos que você comece alterando apenas o cabeçalho, as páginas de logon e logoff e as cores que são usadas para selecionar e realçar.

Se você desejar fazer alterações mais complexas, estude primeiro como os arquivos .css funcionam. Depois que você já tiver uma boa compreensão de folhas de estilo em cascata, altere apenas alguns elementos de cada vez e teste suas alterações para verificar se os resultados são os esperados.

Como prática recomendada, indicamos o uso das seguintes diretrizes:

  • 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.

A figura a seguir ilustra uma solicitação de calendário do Outlook Web Access com duas barras de informações.

Barras de informações do Outlook Web Access

Barra de informações do Outlook Web Access

Antes de começar

Para executar os procedimentos a seguir, você deve fazer logon no servidor que está hospedando o Outlook Web Access e deve usar a conta à qual está delegada a associação no grupo Administradores local.

Criando um tema

O procedimento a seguir fornece as etapas gerais para criação de um tema personalizado para o Outlook Web Access. Procedimentos específicos para alteração de elementos individuais em um tema do Outlook Web Access são incluídos nas seções a seguir.

Para criar um novo tema do Outlook Web Access

  1. No servidor Acesso para Cliente que está hospedando o Outlook Web Access, abra o Windows Explorer e localize o diretório de instalação do servidor Exchange.

  2. Em \Client Access\OWA\<versão>\themes, crie uma nova pasta.

  3. Copie os arquivos premium.css e owafonts.css do tema base para a nova pasta.

  4. Copie os arquivos a serem alterados para criar o tema do tema base para a nova pasta que você criou.

  5. Modifique os arquivos da nova pasta de temas para criar o tema.

  6. Reinicie o IIS (Serviços de Informações da Internet) usando o comando iisreset/noforce.

  7. Teste o novo tema fazendo logon no Outlook Web Access e selecionando o novo tema.

Nomeando um tema personalizado

Você pode nomear um tema personalizado de duas maneiras. A primeira é fornecer à pasta em que você criou o novo tema o nome que deseja que o tema tenha. Por exemplo, para nomear um tema personalizado "Fourth Coffee", nomeie a pasta em que criou o novo tema como Fourth Coffee.

Também é possível nomear um tema personalizado, copiando o arquivo themeinfo.xml do tema base para a pasta em que criou o tema personalizado 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 você deseja que ele tenha.

Para nomear um tema personalizado editando o arquivo themeinfo.xml

  1. Copie o arquivo themeinfo.xml da pasta do tema base para a pasta em que criou o tema personalizado.

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

  3. Encontre o valor de nome para exibição do tema e altere-o para o nome que você deseja que o tema tenha.

    Exemplo: Para nomear seu tema como Fourth Coffee, nome do arquivo deve ser theme displayname = "Fourth Coffee".

  4. Salve as alterações e feche o arquivo themeinfo.xml.

Dica

Se você alterar o nome de um tema, deverá parar e iniciar o IIS para que a alteração entre em vigor. Você pode fazer isso abrindo a janela Prompt de Comando e usando o comando iisreset/noforce.

Criando um cabeçalho personalizado

Você pode personalizar o cabeçalho da página principal do Outlook Web Access. Para alterar o cabeçalho no Outlook Web Access, você precisará dos seguintes arquivos:

  • 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.

Abra os arquivos .gif em uma ferramenta de edição de imagens para ver como eles são usados para criar o cabeçalho no Outlook Web Access.

A figura a seguir ilustra os arquivos originais que são usados para criar o cabeçalho para o tema Céus de Seattle do Outlook Web Access.

Arquivos de cabeçalho do Outlook Web Access

Arquivos de cabeçalho do Outlook Web Access Para criar um cabeçalho personalizado

  1. Copie os arquivos premium.css, owafonts.css, logopt.gif, logopb.gif e nbbkg.gif da pasta de temas base para a pasta de temas personalizados.

  2. Na pasta de temas personalizados, abra o arquivo premium.css com um editor de texto, como o Bloco de Notas.

  3. Para remover "Conectado ao Microsoft Exchange" do cabeçalho, localize o "background:url("logopb.gif") no-repeat;" e adicione display:none; imediatamente depois dele.

  4. Para alterar o logotipo, use uma ferramenta de edição de imagem para abrir e modificar o arquivo logopt.gif.

  5. Se você alterar a cor de segundo plano no logopt.gif, use a ferramenta de edição de imagem para editar o logopb.gif e o nbbkg.gif para ter a mesma cor de segundo plano.

  6. Depois de editar os arquivos, salve as alterações.

  7. Para testar alterações em seu tema personalizado, faça logon no Outlook Web Access, clique em Opções, clique em Configurações Gerais e selecione seu tema personalizado no menu Aparência. Você deve salvar as alterações e clicar em Atualizar Internet Explorer para ver o novo tema.

Alterando cores em um tema

Para alterar as cores em um tema, você deve localizar os valores na folha de estilos premium (premium.css) e determinar os valores RGB HTML das cores que deseja usar. Os valores de cores RGB HTML são definidos por uma cadeia de sete caracteres no formato do símbolo de número (#) seguido por uma cadeia de seis caracteres. Para encontrar os valores RGB HTML de várias cores, consulte Color Table na Biblioteca MSDN (em inglês). Se você precisar de uma cor específica e não conseguir encontrar uma cor correspondente online, poderá usar uma ferramenta de edição de imagens para criar uma amostra da cor e determinar seu valor RGB HTML.

Para alterar a cor de realce do módulo selecionado na barra de navegação

  1. Abra o arquivo premium.css com um editor de texto, como o Bloco de Notas.

  2. No arquivo, localize o seguinte:

    a.nbHiLt
{
       background-color:#FFEFB2;
}

  3. Substitua o valor RGB pelo valor RGB da cor desejada.

  4. Para testar alterações em seu tema personalizado, faça logon no Outlook Web Access, clique em Opções, clique em Configurações Gerais e selecione seu tema personalizado no menu Aparência. Salve as alterações e clique em Atualizar para ver o novo tema. Se você já tiver uma sessão ativa do Outlook Web Access, pressione F5 para atualizar a página de modo que possa ver as alterações.

A figura a seguir ilustra uma seção da barra de navegação do Outlook Web Access com o módulo de Mensagens realçado.

Painel de navegação que exibe o módulo de Mensagens realçado

Módulo realçado Para alterar a seleção principal e secundária de cores da lista

  1. Abra o arquivo premium.css com um editor de texto, como o Bloco de Notas.

  2. Localize o seguinte para alterar a principal seleção de cor:

    tr.sel, tr.srsel, tr.lrsel
{
      background-color: #FFEFB2;

  3. Localize o seguinte para alterar a seleção secundária de cor:

    tr.shdw, tr.srshdw, tr.lrshdw
{
      background-color:#F8F0D2;

  4. Substitua os valores RGB da seleção principal e secundária de cores pelos valores RGB das cores desejadas.

  5. Para testar seu tema personalizado, faça logon no Outlook Web Access, clique em Opções, Configurações Gerais e selecione seu tema personalizado no menu Aparência. Salve as alterações e clique em Atualizar para ver o novo tema. Se você já tiver uma sessão ativa do Outlook Web Access, pressione F5 para atualizar a página para ver as alterações.

A principal seleção de cor é usada para realçar o item selecionado no painel da lista, quando o foco está nesse painel. Se o usuário mover o foco para o painel de visualização ou para o painel de navegação, o item selecionado no painel da lista será realçado com a seleção secundária de cor. A figura a seguir ilustra a diferença entre a seleção principal e secundária de cores em Outlook Web Access.

Seleção principal e secundária de cores no Outlook Web Access

Cores de destaque principal e secundário

Dica

Você pode usar o método que foi usado no procedimento anterior para alterar os valores RGB de outros elementos do tema.

Modificando o plano de fundo da Exibição de Lista

Quando você seleciona Mensagem, Contatos, Tarefas ou Pastas públicas no Painel de Navegação, o Outlook Web Access exibe uma lista de itens nas pastas disponíveis nesses módulos.

Você pode incluir um plano de fundo à exibição de lista. Para isso, modifique as configurações de premium.css.

Para modificar o plano de fundo da exibição de lista no Outlook Web Access

  1. Encontre ou crie uma imagem no formato .gif.

  2. Copie o arquivo de imagem para a pasta de tema personalizado.

  3. Abra o arquivo premium.css com um editor de texto, como o Bloco de Notas.

  4. Encontre o seguinte para alterar a imagem de plano de fundo:

    div#divLstV{width:100%;height:100%;}

  5. Edite a cadeia de caracteres para:

    div#divLstV{background-image: url(image file name);width:100%;height:100%;}

  6. Encontre o seguinte para alterar a transparência do plano de fundo, de modo que a nova imagem seja exibida de maneira correta:

    td#tdIL{background-color: #FFFFFF;height:100%;vertical-align:top;}

  7. Substitua o valor de background-color pelo valor transparent:

    td#tdIL{background-color:transparent;height:100%;vertical-align:top;}

  8. Para testar seu tema personalizado, faça logon no Outlook Web Access, clique em Opções, Configurações Gerais e selecione seu tema personalizado no menu Aparência. Salve as alterações e clique em Atualizar para ver o novo tema. Se você já tiver uma sessão ativa do Outlook Web Access, pressione F5 para atualizar a página e ver as alterações.

Alterando o tema padrão do Outlook Web Access

Você pode alterar o tema padrão do Outlook Web Access para um diretório virtual do tema base para um tema personalizado usando o cmdlet Set-OwaVirtualDirectory. Você pode usar também o cmdlet Set-OwaVirtualDirectory para desabilitar a opção de seleção de temas no Outlook Web Access. Se tiver vários diretórios virtuais do Outlook Web Access, você poderá usar os procedimentos a seguir para definir um tema padrão para cada diretório virtual.

Quando você definir um tema padrão, apenas os usuários que não tenham feito logon anteriormente no Outlook Web Access e selecionado um novo tema serão forçados a usar o tema padrão.

Para forçar todos os usuários a usar o tema padrão, você deve desabilitar a seleção de temas, além de configurar um novo tema padrão.

Para usar o Shell de Gerenciamento do Exchange para configurar o tema padrão do Outlook Web Access

  • Para definir o tema padrão do Outlook Web Access em que o nome do servidor é "FourthCoffee", o nome do diretório virtual é "owa", o nome do site é "Site padrão" e o tema está na pasta chamada "Personalizar", execute o seguinte comando:

    set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom

Para usar o Shell de Gerenciamento do Exchange para desabilitar a seleção de temas no Outlook Web Access

  • Para desabilitar a seleção de temas no Outlook Web Access, em que o nome do servidor é "FourthCoffee", o nome do diretório virtual é "owa" e o nome do site é "Site padrão", execute o seguinte comando:

    set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -themeselectionenabled $false

Você também pode concluir os dois comandos ao mesmo tempo executando o seguinte comando:

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom -themeselectionenabled $false

Personalizando as páginas de logon e logoff

As páginas de logon, seleção de idioma e logoff do Outlook Web Access são sempre criadas com base nos gráficos e no arquivo logon.css da pasta de temas base. Portanto, para usar as páginas personalizadas de logon e logoff, você deve modificar os arquivos da pasta de temas base. Você pode localizar a pasta de temas base no diretório de instalação do Exchange em \Client Access\OWA\versão\themes\base.

As páginas de logon, seleção de idioma e logoff usam o arquivo logon.css para definir estilos e cores de texto. As páginas são criadas combinando várias imagens para as margens superior, inferior e laterais e incluem também repetição de imagens e cantos para expansão. 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

É mais fácil criar um novo visual usando uma cor sólida, pois a mesma coleção de imagens é usada para as três páginas: a página de logon, a página de seleção de idioma que é mostrada no primeiro logon por caixa de correio e a página de logoff. As páginas são redimensionadas horizontal e verticalmente, dependendo do conteúdo da página.

Se você tiver vários servidores de Acesso para Cliente e desejar que todos eles usem as mesmas páginas de logon e logoff, deverá copiar os arquivos de logon e logoff modificados em cada servidor de Acesso para Cliente.

Aviso

Como você deve alterar os arquivos do tema base para criar páginas de logon e logoff personalizadas, faça cópias de backup de todos os arquivos que serão alterados antes de começar a criar suas páginas de logon e logoff personalizadas.

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

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

Opções de texto da página de logon do Outlook Web Access

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 cabem juntos. A outra figura mostra como o arquivo logon.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

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

Página de logoff do Outlook Web Access com opções de texto

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

Depois de abrir a página de logon ou logoff do Outlook Web Access no Internet Explorer, é possível testar as alterações sem precisar redefinir o IIS ou sair do Internet Explorer.

Para testar as alterações nas páginas de logon e logoff

  1. Abra a página de logon ou logoff do Outlook Web Access no Internet Explorer.

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

  3. Na guia Geral, em Histórico de navegação, clique em Excluir.

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

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

  6. 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 para ver as alterações.

Alterando o logotipo

Para personalizar o Outlook Web Access, é possível alterar o logotipo do Outlook Web Access nas páginas de logon e logoff para o logotipo de sua organização.

Para alterar o logotipo no Outlook Web Access

  1. Crie cópias dos arquivos que você deseja alterar e salve-as em um local seguro para que você possa restaurar as páginas originais, caso seja necessário.

  2. Abra o arquivo lgntopl.gif usando uma ferramenta de edição de imagens e modifique-o para criar o logotipo que você deseja usar.

  3. Salve as alterações e clique no botão Atualizar para ver as alterações.

    Dica

    Se você alterou a cor de segundo plano do arquivo lgntopl.gif, é recomendável modificar os arquivos restantes que são usados para criar as páginas de logon e logoff para correspondência.

Alterando os estilos e as cores das fontes

Você pode editar o arquivo logon.css para alterar os estilos das fontes e algumas das cores que são usadas nas páginas. Isso inclui a cor de segundo plano que fica atrás dos controles no centro da página de logon e da página de seleção de idioma. Se você alterou a cor dessas páginas, é recomendável alterar a cor de segundo plano para correspondência.

Para alterar as cores de fundo e das fontes das páginas de logon, de seleção de idioma e de logoff, você deve localizar os valores na folha de estilos de logon (logon.css) e determinar os valores RGB HTML das cores que deseja usar. Os valores de cores RGB HTML são definidos por uma cadeia de sete caracteres no formato do símbolo de número (#) seguido por uma cadeia de seis caracteres. Para encontrar os valores RGB HTML de várias cores, consulte Color Table na Biblioteca MSDN (em inglês). Se você precisar de uma cor específica e não conseguir encontrar uma cor correspondente online, poderá usar uma ferramenta de edição de imagens para criar uma amostra da cor e determinar seu valor RGB HTML.

Para testar as alterações, abra o Internet Explorer e digite a URL do Outlook Web Access. Se estiver testando as alterações no site padrão no servidor de Acesso para Cliente que está hospedando o diretório virtual do Outlook Web Access, você poderá testá-las abrindo o Internet Explorer e digitando a URL https://localhost/owa.

Dica

A página de seleção de idioma é exibida somente na primeira vez em que um usuário faz logon no Outlook Web Access.

A tabela a seguir lista os elementos das páginas de logon e logoff e uma descrição de cada elemento.

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

Elemento a ser alterado Cadeia de caracteres a ser pesquisada Descrição

Cor de segundo plano

Background: #7F90b1

A cor de segundo plano das páginas de logon e logoff. Se você alterar a cor de segundo plano dos arquivos de gráficos, deverá alterar a cor de segundo plano para correspondência.

Texto de aviso

wrng{color:#f8d328}

A cor do texto de aviso que é exibido quando um usuário seleciona Este é um computador particular. Na página de logon existente do Outlook Web Access, esse texto de aviso é exibido em amarelo e sobressai bem no segundo plano azul. Se você alterar a cor de segundo plano da página de logon, talvez você queira alterar a cor do texto de aviso para que ele fique legível.

Cor principal do texto

select, table {color:#ffffff;}

A cor principal do texto é branca. Indica as opções que podem ser selecionadas e os campos de entrada na página de logon do Outlook Web Access. Os exemplos incluem os rótulos dos campos de nome e senha do usuário e o texto ao lado das opções de segurança. Se você tiver escolhido uma cor escura para as páginas de logon, a cor branca ainda funcionará bem nesse texto.

Mostrar explicação

a{color#ffe052;

O link na página de logon que um usuário pode clicar para mostrar ou ocultar a explicação de logons públicos e particulares.

Descrição do Outlook Web Access Light

disBis{color:#c8d3e3;}

Quando um usuário seleciona Usar o Outlook Web Access Light, uma breve explicação sobre o Outlook Web Access Light é exibida.

Conectado ao Microsoft Exchange

;color:#fffff;

As palavras Conectado ao Microsoft Exchange são exibidas no canto inferior esquerdo das páginas de logon e logoff. Alterar esse valor altera a cor do texto dessas palavras.

Linhas divisórias

#A9AAc4

As três páginas que usam o arquivo logon.css têm linhas finas que as dividem em seções. Essas páginas incluem logon, logoff e seleção de idioma. Depois de alterar as cores de segundo plano e das fontes, talvez você queira alterar a cor das linhas para que elas continuem visíveis, mas não mais visíveis do que o texto.

Depois de decidir de quais elementos você deseja alterar a cor e os valores das cores RGB HTML para as quais alterará esses elementos, use o procedimento a seguir para alterar a cor de qualquer elemento que seja definido por um arquivo .css.

Para alterar a cor de um elemento

  1. Abra o arquivo logon.css.

  2. Use a tabela de elementos das páginas de logon e logoff incluída anteriormente neste tópico para localizar a cadeia de caracteres que corresponde ao elemento que você deseja alterar.

  3. Substitua o valor da cor RGB HTML do elemento que você deseja alterar pelo valor da nova cor RGB HTML que você deseja usar para esse elemento.

  4. Salve as alterações e feche o arquivo logon.css.

  5. Teste suas alterações, abrindo o Internet Explorer e digitando a URL da página de logon do Outlook Web Access.

Dica

Se você já tiver aberto a URL de logon do Outlook Web Access, poderá testar as alterações excluindo os arquivos de Internet temporários e atualizando o Internet Explorer. Para fazer isso, clique em Ferramentas e em Opções da Internet. Na guia Geral, em Histórico de navegação, clique em Excluir. Em Arquivos de Internet Temporários, clique em Excluir arquivos e em Sim quando for perguntado se você tem certeza de que deseja excluir todos os arquivos temporários do Internet Explorer. Clique em OK para fechar as Opções da Internet e pressione F5 para atualizar a página de logon.