Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

Versão 1 Próxima »

Nesse tutorial mostraremos como alterar o padrão de cores a partir de um exemplo criado por nossa equipe. Utilize esse exemplo para se basear em uma estilização própria para o seu projeto.

O exemplo foi criado para o tema Material, é possível que ocorra problemas ao utilizar outros temas.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

Requisitos:

  • Projeto do web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link ( Criar projeto );
  • Conhecimento básico de CSS.

Passos

Seleção do Tema

Usaremos o tema Material como base para esse tutorial, esse tema pode ser definido durante ou após a criação do projeto.

Durante a criação do projeto

Na terceira tela durante a criação do projeto é solicitado a definição do tema, selecione a opção Material e avance até finalizar. 


Figura 1.1 - Etapa de seleção de tema durante a criação do projeto

Após a criação do projeto

Clique com o botão de contexto sobre o nome do projeto (raiz da árvore de arquivos) e selecione a opção Aplicar Modelo... no menu (Figura 1.2). Após abrir a janela de configurações iniciais do projeto, avance uma tela para acessar a seleção de temas, marque o tema Material e avance até finalizar (Figura 1.1).


Figura 1.2 - Abrindo a janela de definições do modelo


Novos arquivos

Nesse momento iremos incluir no projeto os arquivos .css de exemplo e adicionar a imagem com a logo do seu sistema.


Figura 1.3 - Diretório onde adicionaremos os novos arquivos

Diretório css

Abra o diretório css (localizado em src/main/webapp/) e inclua os arquivos app.css e util.css que estão em nosso repositório de exemplo para esse tutorial (destaque 1 da Figura 1.3).

Se você fez já fez alguma estilização em seu projeto, o arquivo app.css não estará vazio, nesse caso recomendamos fazer uma  cópia desse arquivo antes de substituir.

Diretório img

Caso o seu projeto não possua o diretório img (localizado em src/main/webapp/), crie um. Em seguida adicione a logo do seu projeto neste diretório.

Por padrão, esse diretório já possui permissão para o acesso público, mas caso não esteja, acesse a funcionalidade Permissão de segurança e adicione o endereço "/img/**" na Visão do permissionável Public (Figura 1.4).


Figura 1.4 - Concedendo acesso público ao diretório de imagens

Atualizar CSS

O arquivo app.css que adicionamos no passo anterior possui diversas modificações de estilo dos componentes visuais, páginas e classes CSS. Como se trata de um exemplo, durante o desenvolvimento do seu sistema, será necessário analisar e alterar de acordo as suas necessidades.

Nesse momento é recomendável que seu sistema possua um guia de estilo com a definição das cores que serão usadas. Na figura 1.5 mostramos um exemplo de guia de estilo.


Figura 1.5 - Exemplo de guia de estilo


Substituir cores

Para alterar as cores principais, substitua os códigos hexadecimal usados no exemplo pelas cores da sua escolha. Com o arquivo app.css aberto, pressione CTRL+H para abrir a janela de substituir texto. 


Figura 1.6 - Substituição das cores principais do nosso exemplo


Na tabela e figura abaixo são exibidas o nome, código hexadecimal e cor utilizada.


NomeHexadecimal
Yellowgreen#9ACD32
Darkcyan

#008B8B

White#FFFFFF
Lightgreen#90EE90
Silver#C0C0C0
Gold#FFD700

Figura 1.6 - Cores usadas em nosso exemplo

Nas páginas login.view.html (localizada em src/main/webapp/views/) e home.view.html (localizada em src/main/webapp/views/logged/) possuem logo onde é possível substituir pelo o do seu projeto. Acesse as páginas, marque o componente imagem na área de edição da página, clique no botão "..." da propriedade Origem e selecione a imagem que adicionamos ao projeto.


Figura 1.7 - Alterando a logo na página login



  • Sem rótulos