wiki:phpgwapi/temas

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  clique aqui.
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":

No image "temas_escolha.jpg" attached to phpgwapi/temas

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


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:

No image "temas.jpg" attached to phpgwapi/temas

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;

No image "araucaria.png" attached to phpgwapi/temas

Veja mais informações em: Padrões de nomes dos temas