Themes

De Wiki Expresso V3
Ir para: navegação, pesquisa

Como configurar um tema

Como criar um tema


Conteúdo

Criação de Temas

Objetivo

Definir classes, identificadores e propriedades mais utilizadas e organizar informações visando a construção de temas para o Expresso 3.0.

Estrutura Básica

As regras de estilo deverão estar em um arquivo de folha de estilos (<tema>.css). Todos os arquivos próprios do tema, como imagens e folhas de estilo, deverão estar em uma subpasta da pasta themes, de acordo com as seguinte estrutura:

themes
|
+ temaX
  |
  + images
  |
  + css

1- O nome da pasta do tema não deverá exceder 16 caracteres (mnemônico do nome do tema);

2- Ambas subpastas da pasta do tema (images e css) seguem a estrutura de pastas usadas pelo ExtJS na sua versão 3.1.1. A pasta de imagens deverá conter as imagens que são diferentes das originais do ExtJS ou uma estrutura similar para novas classes que forem criadas;

3- A pasta css deverá conter um arquivo com o nome do tema, exatamente o nome que foi dada a pasta principal, porém com a extensão css. Este arquivo irá conter as classes e extensões feitas para a folha de estilos original ou novas classes e extensões;

4- O tema deverá ser atômico, isto é, não deverá necessitar de outros arquivos css além do único arquivo já existente;

5- É recomendado que o responsável utilize ferramentas para limpar o arquivo css de comentários e espaços em branco. Se isto for feito é necessário que um arquivo css sem alterações seja incluído, para referencia nas alterações e extensões.

Template

Como base para construção do tema, utilizar a estrutura básica (template-tema-expresso.css) preparada para isto. Ela contém comentários e as pastas básicas replicando a estrutura padrão.

Estrutura do arquivo de template do CSS

O arquivo template da folha de estilos está dividido em partes, de acordo com a sua utilidade. Cada parte contém um comentário sobre a sua utilização, assim como cada classe ou identificador css também contém um comentário. As propriedades mais utilizadas em cada classe ou identificador css também estão indicadas, seguidas do valor !important, caso este seja necessário para a correta atribuição do estilo à pagina. (o template está desatualizado)

/* PRIMEIRA PARTE */ 
/****************************/ 
/* reseta o css padrao      */ 
/****************************/ 
/* descrição da utilização do identificador ou classe css */ 
/* comentário a utilização */
.<classe-css || identificador-css> { 
	<propriedade-css>: <valor-da-propriedade>; 
} 
Reset do estilo do Tine 2.0

A primeira parte do template contém regras de estilo para resetar o estilo padrão do Tine 2.0. É recomendado não ser alterado ou excluído. Caso seja necessária a alteração ou inclusão de alguma propriedade, deve-se fazer isto a partir da segunda parte do template.

Estilo geral

A segunda parte do template contém regras de estilo que se aplicam a todas as telas do Expresso 3.0.

Estilo da tela de login

A terceira parte do template contém regras de estilo para a tela de login do Expresso 3.0. A tela de login utiliza o mesmo arquivo css da tela do usuário já logado (tela das aplicações), sendo que o esqueleto básico do HTML de ambas as telas é gerado pelo arquivo /Tinebase/views/jsclient.php.

Estilo da tela de aplicações

A quarta parte do template contém regras de estilo para a tela das aplicações do Expresso 3.0. Como o esqueleto das telas de login e de aplicações são comuns, gerados pelo arquivo /Tinebase/views/jsclient.php, durante a carga da tela do usuário logado (tela das aplicações) é exibido o fundo da tela definida para o login, embora sem a caixa do formulário de login. Quando o ExtJS termina a montagem do código HTML da tela das aplicações, porém, a tela de fundo do login é sobreposta.

Estilo das telas popup

A quinta parte do template contém regras de estilo para as telas de mensagens, alertas, progresso e demais popups do Expresso 3.0.

Instalação dos Temas

Os temas serão instalado em uma pasta chamada "themes", localizada na raiz da aplicação. A instalação é feita pela cópia simples de um tema criado de acordo com a regra de negócio "Criação de Temas". O tema deverá ser copiado na estrutura de diretórios constante na regra de negócio "Criação de Temas".

Configuração dos Temas

No arquivo "config.inc.php" localizado na raiz da aplicação é criada uma matriz de configuração. Nesta matriz deverá ser incluído um novo índice de nome "themes". Isso pode ser feito pela interface gráfica de setup, na seção "Temas".

'theme' => array(
    'load' => [true | false]
    'path' => [nome da pasta de tema em themes]
    'useBlueAsBase' => [true | false]
)

Carga automática de temas

O sistema faz a leitura de um cookie enviado pelo servidor da aplicação que informa o número do tema que deverá ser carregado de acordo com o domínio;

O cookie contém um número que sera usado para buscar na lista de temas configurados na matriz de temas;

Se o número informado existir o sistema deverá automaticamente carregar o tema encontrado;

Se o número informado não existir o sistema deverá voltar ao tema padrão configurado na aplicação;

Se não for encontrado um tema padrão configurado o sistema deverá exibir uma mensagem notificando o usuário e não deverá dar prosseguimento.

Ferramentas pessoais
Espaços nominais

Variantes
Ações
Navegação
Ferramentas