Antes de tudo, aconselho a instalação do Firebug, um plugin do Firefox que permite alterar o código da página em tempo real. O mesmo é muito útil para saber qual código altera que cor ou função da página.

É importante também, antes de alterar algum código, fazer o backup de toda a pasta original onde se encontra o mesmo. Leia todo o conteúdo da documentação antes de fazer as alterações no(s) tema(s).

Para aprender a usar o Firebug, consulte o fim da Documentação.

Para a alteração do tema basta entrar na pasta: skins/_base/base3

Dentro da pasta, encontrar e alterar o código, já localizado com o auxilio do Firebug, responsável pela cor ou posicionamento.

O arquivo acima citado, possui os códigos de alteração do interior do e-mail, como cor do background geral do e-mail, bem como da tela de login.

É importante também, alterar alguns arquivos da pasta css/, que fica na mesma localização da pasta skins (fora da mesma).

Os arquivos podem variar de acordo com a versão, por isso, é muito útil usar o comando:

→ grep - RI "trecho_do_código" ./

...dentro da pasta css para encontrar o arquivo que possui o referido código que se deseja mudar.

Novamente lembrado, é possível saber qual código se deseja mudar com o auxílio da ferramenta Firebug, sem ela, o trabalho de busca para alteração dos códigos torna-se extremamente desgastante e dependendo do conhecimento em HTML e CSS de quem os altera, é até mesmo impossível.

Busque pelos arquivos: common, login, zhtml e zlogin
...ou simplesmente pesquise dentro da pasta css o código que você procura para ver se os mesmos se encontram lá.

Ainda é muito importante alterar também a pasta de imagens, para que a logo do zimbra seja alterada pelo logo de sua empresa/organização.

A pasta que contém as logos está em: skins/_base/logos/

Não esqueça de fazer antes o backup da pasta logos. Como você só irá alterar arquivos, pode fazer uso do comando mv para o backup e para facilitar a alteração.

Por exemplo: dentro da pasta _base/, emita o seguinte comando:

→ mv logos/ logosbck

Assim, bastará apenas copiar uma nova pasta com nome logos, que contenha as imagens, para dentro do diretório atual e você ainda terá a pasta logosbck que servirá de backup.

O método anteriormente descrito é sem dúvida muito útil, mas faça uma cópia da pasta logosbck, para a sua máquina por segurança.

Fazendo apenas uma cópia, ao invés de mover a pasta, para sua máquina ou um outro local mais seguro, você estará facilitando o processo de retorno para o arquivo original caso haja algum erro.

Para alterar definitivamente a imagem, clique sobre ela com o Firebug e veja qual código a está gerando, em seguida, procure por tal código e altere o caminho (URL) do código para o nome da nova imagem, ou até mesmo, o novo caminho da imagem.

* É importante também alterar arquivos da pasta do própio tema em questão.

E por último, mas não menos importante, após qualquer alteração no tema, seja ela de cor ou posicionamento de botões, emita o comando:

→ zmskindeploy nome_do_tema

E em seguida, o comando abaixo, que será necessário para a validação do comando anterior:

→ zmmailboxdctl restart

Em alguns casos, emita o comando abaixo para restartar todo o serviço de e-mail:

→ zmcontrol restart

Também vale lembrar que os procedimentos relatados acima, são apenas para alteração no(s) tema(s) através de CSS, que apenas altera a cor e/ou o estilo da página. As alterações de funções de botões e outras coisas no e-mail ou na tela de login, só poderão ser feitas mediante a alteração dos arquivos .html.

Em caso de dúvidas não sanadas com o uso desta documentação, o bom e velho Google pode ajudar, existem vários fóruns espalhados pela internet, nos quais você pode obter ajuda; infelizmente muitos deles em inglês, mas para isso o bom e velho (novamente) Google Tradutor está ai.

Alteração de cores

Para a alteração de cores, basta buscar no Google por "cores html" e você encontrará inúmeros sites com tabelas de cores em hexadecimal, que são os tipos de cores mais aceitas pela linguagem CSS e HTML.

Exemplo: #FFFFFF, o hexadecimal anterior refere-se a cor branca e #6B8E23, já o Hex anterior representa uma tonalidade de verde.

Você pode ainda fazer uso de algum programa vetorial para escolher as cores (como o Inkscape) e usar os valores RGB no painel de cores e convertê-los para Hex ="hexadecimal". Basta colocar no Google: "rgb to hex", para encontrar sites que fazem essa conversão, basta inserir os valores RGB.

Como usar o Firebug

A utilização do Firebug é muito simples o seu ícone, geralmente, fica no canto superior direito da tela. Procure pelo ícone de um inseto, tem a aparência de uma formiga ou persevejo, seja como for.

Clique sobre ele e o mesmo será aberto na parte inferior da tela. Na parte superior dele (Firebug aberto), clique sobre o ícone representado por um retângulo e um ponteiro de mouse. Em seguida, basta passar o mouse sobre qualquer parte da tela e ele te mostrará o CSS que cria aquela cor ou o HTML de um botão.

No caso, ao clicar sobre a barra principal, o HTML da barra será exibido e no canto direito da tela, será exibido o CSS (estilo e cor) da barra. Para visualizar diretamente o CSS de tal objeto na tela, clique sobre ele usando o ícone de seleção e, no canto direto da tela, clique sobre o link que está dentro do CSS que o representa.

Ou, você pode sair fazendo alterações no CSS (na cor, por exemplo) e ver o que muda na tela. Assim, veja o código (exemplo: LoginScreen Form ) e busque por ele nas pastas citadas acima, como a do própio tema, _base/, css.

Você pode, ainda, fazer uso do bom e velho Google para aprender mais sobre o Firebug, basta digitar "como usar o firebug".