Alteração de temas no Zimbra 8.0.7

Neste artigo, dou algumas dicas de onde buscar os códigos para alterar o tema do Zimbra, para que o mesmo fique personalizado de acordo com sua empresa ou organização.

[ Hits: 7.877 ]

Por: Lucas Vasconcelos em 24/09/2014


Caminhos e arquivos para alteração do tema



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

   

Páginas do artigo
   1. Caminhos e arquivos para alteração do tema
Outros artigos deste autor

Como acessar outras máquinas Linux remotamente

Leitura recomendada

Configurando o Korn

Importando e-mails do MS Outlook para o Evolution ou Kmail

PHPXmail - um front-end web para o XMail

Configurando o SendMail

POP3 gateway com fetchmail

  
Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts