Como criar ou utilizar um tema pré-existente para o ambiente.

Para alterar ou criar o tema de um ambiente, habilite a área administrativa, clique em Ambientes, selecione o ambiente que deseja configurar, navegue até a aba Aparência e clique em selecionar, em Tema do Ambiente:

Na tela seguinte você terá acesso a diversos temas que já estão dispoibilizados para você. Porem é possivel criar um tema personalizado, clicando em + tema, na tela seguinte clique em criar tema:

A criação de um tema envolve a importação de um arquivo zip que contenha, obrigatoriamente, 2 arquivos:

• thumb.jpg
• theme-one.css

O arquivo thumb.jpg é uma miniatura da imagem do tema, que será exibida na tela de seleção de temas, na configuração do ambiente.

O arquivo theme-one.css contém as regras de estilos de formatação do tema.

No arquivo theme-one.css, um dos trechos que é importante entender é a escala de cores que irá ser aplicada em todo o sistema (no ambiente onde este tema estiver aplicado).

Ao abrir este arquivo em um editor de texto, você verá que nas 15 primeiras linhas existem esses códigos que representam a escala de cor:

As variáveis --color-1 a --color-7 contém códigos hexadecimais das cores, começando de um tom mais escuro, para um mais claro. No exemplo, a escala de cor representa um tom de azul do mais escuro (#003366) ao mais claro (#EAF6FF).

As variávies --color-light e --color-dark são cores normalmente usadas em fundo de tela (--color-light) e textos de destaque ou títulos (--color-dark).

Recomendamos que para criar um tema, utilize o arquivo theme-package.zip que contém os arquivos citados assim, e também imagens que são referenciadas no arquivo theme-one.css. Isso pode ajudar como um ponto de partida para a criação do tema.

Para alterar as imagens, você pode usar o arquivo theme-template.psd, que é um arquivo feito em Photoshop. Ao abrir este arquivo, você pode customizar como quiser, desde que mantendo as proporções das áreas destacadas abaixo:

Finalizada a edição desse arquivo, você deverá seguir os passos para exportar as imagens:

1. Na janela Layers, oculte o layer "bg"

2. Vá no menu File > Export > Save for Web (Legacy)

3. Certifique-se que a opção PNG esteja selecionada, e clique em Save

4. Ao escolher um local para salvar, repare que ele salvou as imagens em um diretório chamado images. Agora, você deverá fazer um procedimento parecido, porém para salvar apenas a imagem de plano de fundo do tema. De volta do Photoshop, volte a visibilidade do layer "bg", e oculte todos os demais:

5. Agora basta salvar este arquivo como "bg.png" dentro da pasta images, pela opção File > Export > Quick Export as PNG:

6. Ao final, sua pasta deve conter os arquivos na estrutura abaixo:

7. Agora, basta criar um zip com todos esses arquivos, e é este arquivo que você deve enviar ao criar/editar um tema, selecionando este arquivo clicando no botão importar:

Pronto, seu tema está disponível para uso quando você for criar/editar um ambiente: