= Criação e Configuração de Templates e Temas =

'''Atenção:''' Antes de prosseguir com a customização de templates e/ou temas, é extremamente recomendável que você atualize seu Expresso para uma versão > 2.0.0. Para isso [http://trac.expressolivre.org/wiki/phpgwapi/atualizar20 clique aqui].[[BR]]
No Expresso é possível que o usuário escolha templates e temas como na figura abaixo, disponível no link "Minhas Preferências" => "Altere suas preferências":
[[BR]][[BR]]
[[Image(temas_escolha.jpg,,center)]] 

A implementação desta funcionalidade visa flexibilizar o Expresso em qualquer instalação e também atender aos gostos pessoais dos usuários. Além disto, visa retirar códigos com caminhos embutidos (hardcoded) que impedem  atualizações futuras do Expresso personalizado com outro template e/ou tema diferente do padrão.

== Template ==
Template refere-se a Interface/Modelo. Esta opção agrupa:
 * Tela de login
 * Montagem e arranjo da tela
 * Comportamento dos elementos da tela incluindo barra de aplicações
[[BR]]

Cada módulo possui pela especificação da API a pasta templates. Dentro desta pasta cada template está organizado com arquivos .tpl, .css e .php. Se o administrador criar uma pasta dentro de phpgwapi/templates este novo template estará visível para o usuário escolhe-lo. Quando escolhido determinado template, todos os módulos que tiverem um template com o mesmo nome o utilizarão. Caso contrário o módulo utilizará a pata default.

Quando o administrador criar um novo template em phpgwapi (copiando uma pasta existente ou criando do zero), é aconselhável que utilize os templates default de cada módulo a fim de evitar esforço em atualizações do Expresso. Quando torna necessário utilizar um template distinto em determinado módulo isto pode ser feito só naquele módulo.

== Tema ==
A seleção de tema refere-se a cores,fontes e imagens. Isto torna quase todas as personalizações que dependem somente da aparência independentes de templates.
O exemplo abaixo mostra vários temas de um único template:

[[Image(temas.jpg,,center)]]

A criação de um tema é muito mais simples e encorajada a um template. Apesar de mais simples uma opção não substitui a outra, mas a opção de templates são personalizações mais pesadas no Expresso. Para criar um '''tema''' basta copiar um arquivo .css dentro de phpgwapi/templates/default/css/ (ou template de preferência). Depois de carregado o tema, a adaptação pode ser feita em tempo de execução no Expresso com uma extensão do tipo Firebug. E em seguida salvar no arquivo definitivo. As figuras podem ser guardadas em default ou no template modificado.

A idéia do tema (css) é de que ele já estará carregado quando o módulo for iniciado de forma que '''não é preciso''' recriar um a um dos css's dentro do módulos. Toda modificação que é feita por exemplo no expressoMail, apenas é feita no main.css, de forma que os outros temas não tenham que carregar esta modificação (não será preciso alterar todos os css's). Logo o css é apenas um tema geral do expresso sem especificidades dos módulos.


== Criando um tema == 
Neste exemplos iremos criar um tema "araucaria". Primeiro de tudo ache um css com cores parecidas com a que você quer. Gere todas as imagens de acordo com as imagens presentes em "/var/www/expresso/phpgwapi/templates/deafult/images". Copie um arquivo novo:
{{{
cp /var/www/expresso/phpgwapi/templates/default/css/rochas.css /var/www/expresso/phpgwapi/templates/default/css/araucaria.css
}}}

Mudar o fundo da barra de aplicações:
{{{
.toolbar
{
        background-image:url(../../../../phpgwapi/templates/default/images/fundo_topo_araucaria.png);
        position:absolute;
}}}

Mudar o logo do canto superior esquerdo
{{{
.logo_expresso
{
        background:url(../../../../phpgwapi/templates/default/images/logo_expresso_araucaria.png) no-repeat !important;
        width: 264px;
        height: 35px;
}}}

Mudar o fundo do cabeçalho das mensagens
{{{
.table_message{ 
        background: url(../../../../phpgwapi/templates/default/images/fundo_topo_araucaria.jpg) !important;
}}}

Cor das fontes do header
{{{
.message_options {
        color: #863 !important;
}}}

Fundo dos botões
{{{
.navbar_but
{
        background-image: url(../../../../phpgwapi/templates/default/images/back_app_araucaria.png) !important;
}}}

Fundo das patas
{{{
.image-menu {
        padding: 0px 0px 0px 0px !important;
        background: #ddf4fe url(../../../../phpgwapi/templates/default/images/folder_bg_araucaria.jpg) no-repeat scroll center bottom !important;
}}}

Configurar a cor de fundo:
{{{
body 
{
        margin: 0px !important;
        background-color: #380E00 !important;
}}}
{{{
#divAppbox 
{
        background-color: #380E00 !important;
}}}

[[Image(araucaria.png,,center)]]

Veja mais informações em:
[/wiki/phpgwapi/temas/padroes Padrões de nomes dos temas]