Compartilhar via

Criar um tema para o Outlook Web App

  • Artigo

 

Aplica-se a: Exchange Server 2010 SP2, Exchange Server 2010 SP3

Tópico modificado em: 2016-11-28

Este tópico explica como criar um tema personalizado para o MicrosoftOfficeOutlook Web App. Um tema é uma coleção de arquivos de mídia e arquivos de folhas de estilos em cascata (arquivos .css) que controlam a aparência do Outlook Web App. 

Por padrão, vários temas são instalados quando você instala a função de servidor Acesso para Cliente em um computador que esteja executando o MicrosoftExchange Server 2010.

  • Arquivos .css — definem cores, gradientes e fontes.

  • Arquivos de imagem (.png) — fornecem os ícones e outros elementos gráficos. Se você editar qualquer um dos ícones, não altere seu tamanho. Se alterar o tamanho de qualquer elemento gráfico, teste suas alterações para verificar se os elementos ainda caberão juntos corretamente.

Esses arquivos são armazenados no servidor de Acesso para Cliente no diretório de instalação, em \Client Access\OWA\<version>\themes. Cada tema é armazenado em um subdiretório de temas. Você pode criar temas adicionais copiando um tema existente e modificando a cópia.

Dica

A versão light do Outlook Web App não tem suporte a temas. 

Recomendações

Vários elementos de um tema do Outlook Web App podem ser alterados. Para evitar a criação de instabilidade no Outlook Web App, recomendamos que você altere apenas os arquivos diretamente relacionados ao seu tema personalizado.

Como prática recomendada, siga estas diretrizes:

  • Faça sempre cópias de backup dos arquivos originais antes de editá-los.

  • Antes de aplicar atualizações e hotfixes a um servidor de Acesso para Cliente que tenha temas personalizados, faça cópias de backup desses temas.

  • Faça apenas uma ou duas alterações por vez, e teste-as antes de fazer outras.

  • Não mude os arquivos em \Client Access\OWA\<versão>\themes\resources. Fontes e outras configurações definidas por esses arquivos são usadas por todos os temas no Outlook Web App. Os arquivos não podem ser alterados sem que todos os temas sejam afetados.

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

Procurando outras tarefas de gerenciamento relacionadas à personalização da aparência do Outlook Web App? Veja Personalizar as Páginas de Entrada e Saída do Outlook Web App.

O Que Você Deseja Fazer?

  • Criar um novo tema do Outlook Web App

  • Dar um nome ao tema personalizado

  • Criar um ícone personalizado para seu tema

  • Criar um cabeçalho personalizado

  • Usar as ferramentas para desenvolvedores do Internet Explorer para determinar cores

  • Alterar cores em um tema

  • Alterar ícones e logotipos em um tema

  • Definir o tema padrão do Outlook Web App

Criar um novo tema do Outlook Web App

Para executar este procedimento, você precisa de permissões. Para ver de que permissões você precisa, consulte o A entrada "Editor gráfico" no tópico Permissões de Acesso para Cliente.

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

  2. Em \Client Access\OWA\<versão>\themes, encontre um tema que use um esquema de cores parecido com o que você deseja e faça uma cópia dele.

  3. Dê à cópia que você acabou de criar um nome curto semelhante ao nome que deseja dar ao tema.

  4. Crie cópias de backup dos seguintes arquivos em sua nova pasta de tema, além de outros que você tenha que alterar para criar seu tema. Essas cópias irão preservar suas configurações originais caso seja necessário desfazer as alterações:

    • premium.css

    • csssprites.png

    • csssprites2.png

    • headerbgmain.png

    • headerbgright.png

  5. Siga as instruções nas próximas seções para modificar os arquivos da nova pasta de temas para criar seu tema.

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

  7. Teste o novo tema entrando no Outlook Web App e selecionando o novo tema.

Dar um nome ao tema personalizado

Para executar este procedimento, você precisa de permissões. Para ver de que permissões você precisa, consulte o A entrada "Editor gráfico" no tópico Permissões de Acesso para Cliente.

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

  2. Encontre o valor de displayname do tema e altere-o para o nome que você deseja que o tema tenha.

    Exemplo: Para nomear seu tema como Fourth Coffee, o arquivo deve conter: theme displayname = "Fourth Coffee".

  3. Altere o valor de sortorder para pôr o tema onde quiser no seletor de temas do Outlook Web App.

    Exemplo: Para definir o tema para aparecer primeiro, o arquivo deve conter sortorder = 1.

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

  5. Inicie e interrompa o IIS no servidor de Acesso para Cliente abrindo uma janela do Prompt de Comando e usando o comando iisreset/noforce.

  6. Para testar suas alterações, entre no Outlook Web App, clique em Opções e procure por seu novo tema no seletor de temas. Caso não veja seu tema listado, use as Opções da Internet no MicrosoftInternet Explorer para excluir arquivos temporários. Em seguida, atualize o navegador e tente exibir o seletor de temas novamente.

Criar um ícone personalizado para seu tema

Para executar este procedimento, você precisa de permissões. Para ver de que permissões você precisa, consulte o A entrada "Editor gráfico" no tópico Permissões de Acesso para Cliente.

Para criar um ícone personalizado para seu tema, edite o arquivo themepreview.png. Este arquivo é o ícone de seu tema no seletor de temas do Outlook Web App.

  1. Abra themepreview.png em uma ferramenta para a edição de imagens e faça as alterações desejadas. Não modifique as dimensões. A imagem tem 32x32 pixels.

  2. Para testar suas alterações, entre no Outlook Web App, clique em Opções e procure por seu novo tema no seletor de temas. Caso não veja o novo ícone, use as Opções da Internet no Internet Explorer para excluir os arquivos temporários. Em seguida, atualize o navegador e tente exibir o seletor de temas novamente.

Criar um cabeçalho personalizado

Para executar este procedimento, você precisa de permissões. Para ver de que permissões você precisa, consulte o A entrada "Editor gráfico" no tópico Permissões de Acesso para Cliente.

Para alterar o cabeçalho no Outlook Web App, é necessário editar os seguintes arquivos usados para criar o cabeçalho no topo do Outlook Web App:

  • headerbgmain.png

  • headerbgright.png

  • headerbgmainrtl.png (você só precisa editar este arquivo se der suporte a idiomas escritos da direita para a esquerda).

  1. Abra os arquivos .png em uma ferramenta para a edição de imagens e faça as alterações desejadas. Não modifique as dimensões.

  2. Para alterar o logotipo, use uma ferramenta para a edição de imagens com suporte a planos de fundo transparentes, como o Paint.NET ou o Photoshop, para abrir e modificar csssprites.png. Esse arquivo tem um plano de fundo transparente. Não mova ou altere o tamanho das imagens no arquivo, pois o Outlook Web App puxa cada ícone ou logotipo de uma localização específica em csssprites.png. Ao editar alguma coisa no arquivo, alinhe a nova imagem exatamente sobre a imagem que está sendo substituída.

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

  4. Para testar alterações em seu tema personalizado, entre no Outlook Web App, clique em Opções e selecione seu tema no seletor de temas. Caso não veja seu novo tema, use as Opções da Internet no Internet Explorer para excluir os arquivos temporários. Em seguida, atualize o navegador e tente selecionar seu tema personalizado novamente.

Usar as ferramentas para desenvolvedores do Internet Explorer para determinar cores

O Internet Explorer 8 e o Internet Explorer 9 incluem ferramentas para desenvolvedores que permitem determinar as cores e fontes de elementos específicos e testar modificações nesses valores. Use as informações das ferramentas para desenvolvedores para localizar esses valores nos arquivos .css e modifique-os para personalizar um tema.

  1. Entre no Outlook Web App e selecione qualquer tema.

  2. Vá para um módulo que exiba o elemento que você quer personalizar. Por exemplo, se quiser personalizar a cor de realce em Mail, vá para Mail.

  3. No Internet Explorer, vá até a barra de ferramentas do programa e selecione Ferramentas > Ferramentas para Desenvolvedores, ou pressione F12.

  4. Organize suas janelas de modo que as janelas do Outlook Web App e das Ferramentas para Desenvolvedores não se sobreponham.

  5. Nas Ferramentas para Desenvolvedor, clique na seta de seleção à esquerda da barra de ferramentas ou pressione CTRL+B.

  6. Mova o ponteiro sobre a seção do Outlook Web App que deseja personalizar. O contorno de cada elemento será destacado quando o ponteiro passar sobre ele. Clique quando o elemento a ser alterado ficar com o contorno destacado.

  7. Observe a janela das Ferramentas para Desenvolvedores. Você verá o código usado para montar a página, e o elemento que selecionou será realçado na janela esquerda.

  8. Procure na janela direita a cor desse elemento. Será um valor RGB, expresso como uma cadeia de sete caracteres, começando com um # seguido por seis caracteres alfanuméricos. Por exemplo, o branco é expresso como #ffffff.

  9. Se não houver nenhum valor RGB, repita as etapas anteriores e tente novamente.

  10. Ao encontrar um valor RGB, altere-o para o valor desejado e pressione Enter. A alteração irá aparecer no Outlook Web App quase que imediatamente. Isso não mudará o tema, só as configurações locais, e apenas para a sessão atual.

  11. O painel direito das Ferramentas para Desenvolvedores mostra em qual arquivo está o valor e onde encontrá-lo no arquivo.

  12. Depois de localizar o valor que deseja alterar, vá até a pasta do tema personalizado no servidor de Acesso para Cliente e modifique esse valor em premium.css.

Dica

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 coletar uma amostra da cor e determinar seu valor RGB HTML. As Ferramentas para Desenvolvedores têm um útil seletor de cores. Selecione Ferramentas > Mostrar Selecionador de Cores no menu. Para determinar o valor RGB da cor desejada, posicione o ponteiro do mouse sobre um elemento nessa cor.

Alterar cores em um tema

Depois de encontrar a cor que deseja alterar e determinar o valor RGB para o qual será feita a alteração, localize a propriedade na folha de estilo premium (premium.css) no servidor de Acesso para Cliente e substitua o valor existente pelo novo valor.

Para executar este procedimento, você precisa de permissões. Para ver de que permissões você precisa, consulte o A entrada "Editor gráfico" no tópico Permissões de Acesso para Cliente.

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

  2. No arquivo, procure pelo valor encontrado usando as ferramentas do Internet Explorer.

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

  4. Para testar alterações em seu tema personalizado, entre no Outlook Web App, clique em Opções e selecione seu tema no seletor de temas. Caso não veja suas alterações, use as Opções da Internet do Internet Explorer para excluir os arquivos temporários. Em seguida, atualize o navegador e tente selecionar seu tema personalizado novamente.

Alterar ícones e logotipos em um tema

Para executar este procedimento, você precisa de permissões. Para ver de que permissões você precisa, consulte o A entrada "Editor gráfico" no tópico Permissões de Acesso para Cliente.

Para alterar os ícones e logotipos em um tema, use uma ferramenta para a edição de imagens com suporte a planos de fundo transparentes, como o Paint.NET ou o Photoshop, para abrir e modificar csssprites.png e csssprites2.png. Esses arquivos têm um plano de fundo transparente que precisa ser preservado para a exibição correta dos elementos individuais. Não mova ou altere o tamanho das imagens no arquivo, pois o Outlook Web App puxa cada imagem de uma localização específica no arquivo. Ao editar algo no arquivo, posicione a nova imagem exatamente no mesmo local da imagem que está sendo substituída.

Para alterar uma imagem:

  1. Use uma ferramenta para a edição de imagens com suporte a planos de fundo transparentes para abrir o arquivo que contém os elementos gráficos que você deseja alterar.

  2. Edite o elemento que deseja alterar, tomando o cuidado de preservar a localização e o tamanho do elemento original.

  3. Salve e feche o arquivo.

  4. Para testar alterações em seu tema personalizado, entre no Outlook Web App, clique em Opções e selecione seu tema no seletor de temas. Caso não veja suas alterações, use as Opções da Internet do Internet Explorer para excluir os arquivos temporários. Em seguida, atualize o navegador e tente selecionar seu tema personalizado novamente.

Definir o tema padrão do Outlook Web App

Quando você definir um tema padrão, apenas os usuários que não tenham entrado anteriormente no Outlook Web App 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.

Usar o Shell para definir o tema padrão do Outlook Web App

Para executar este procedimento, você precisa de permissões. Para ver de que permissões você precisa, consulte o Entrada "Diretórios virtuais do Outlook Web App" no tópico Permissões de Acesso para Cliente.

Este exemplo define o tema padrão do Outlook Web App no qual 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".

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

Para informações detalhadas de sintaxes e de parâmetros, consulte Set-OwaVirtualDirectory.

Usar o Shell para desabilitar a seleção de temas do Outlook Web App

Para executar este procedimento, você precisa de permissões. Para ver de que permissões você precisa, consulte o Entrada "Diretórios virtuais do Outlook Web App" no tópico Permissões de Acesso para Cliente.

Este exemplo desabilita a seleção de temas no Outlook Web App no qual o nome do servidor é "FourthCoffee", o nome do diretório virtual é "owa" e o nome do site é "Site padrão".

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

Você também pode concluir os dois comandos ao mesmo tempo como mostra o exemplo a seguir:

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

Para informações detalhadas de sintaxes e de parâmetros, consulte Set-OwaVirtualDirectory.

Outras Tarefas

Depois de criar um tema, você também poderá Personalizar as Páginas de Entrada e Saída do Outlook Web App.

 © 2010 Microsoft Corporation. Todos os direitos reservados.