- Criado por Igor Andrade, última alteração em 26/08/2020
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
« Anterior Versão 2 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.
Nome | Hexadecimal |
---|---|
Yellowgreen | #9ACD32 |
Darkcyan | #008B8B |
White | #FFFFFF |
Lightgreen | #90EE90 |
Silver | #C0C0C0 |
Gold | #FFD700 |
Figura 1.7 - Cores usadas em nosso exemplo
Alterar logo
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.8 - Alterando a logo na página login
Teste
Salve todo o conteúdo ainda aberto e rode o projeto, As modificações já serão visíveis ao navegar ou editar uma página web.
- Sem rótulos