Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Nesse tutorial mostraremos como alterar o padrão de cores e CSS a partir de um exemplo criado por nossa equipe. Utilize modelo de personalização de template. Você poderá utilizar esse exemplo para se basear em uma estilização própria para o seu projeto.
Informações |
---|
O exemplo foi criado para o tema Material, é possível que ocorra problemas ao utilizar outros temas. |
Todos os passos abaixo foram realizados em nosso projeto de exemplo no Github.
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 em 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).
Image Modified
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.
Image Modified
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).
Nota |
---|
Se você fez já fez alguma estilização em seu projeto, o arquivo |
Para que o arquivo util.css
seja reconhecido, é necessário adicioná-lo nas dependências da aplicação. Acesse o menu de contexto do arquivo util.css
e selecione a opção Importar dependências (Figura 1.4).
Image Added
Figura 1.4 - Adicionando o CSS nas dependências da aplicação
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.
Substituir cores
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 coresPara 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 Use a tabela e figura abaixo são exibidas o nome, código hexadecimal e cor utilizada.como base para substituir o código hexadecimal pelas cores do seu projeto.
CorNome | Hexadecimal | ||
---|---|---|---|
YellowgreenDefault | #9ACD32#97C93D | ||
DarkcyanPrimary | #008B8B#265280 | ||
WhiteInfo | #FFFFFF | ||
Lightgreen | #90EE90 | ||
Silver | #C0C0C0 | ||
Success | #B8DD74 | ||
Danger | #DDDADA | ||
Warning | #FFE920 | ||
Light | #579DE3 | ||
LInk | #514D4D | Gold | #FFD700 |
Image Modified
Figura 1.7 - Cores usadas em nosso exemplo
Ajustar classes CSS
Para ajustar algum detalhe do componente usado, podemos visualizar quais classes CSS esse componente utiliza e alterar no arquivo app.css ou criar uma nova classe e adicionar ao componente.
Vamos utilizar o componente Avaliação e fazer alguns ajustes:
- Adicionar bordas com efeito de sombreamento diretamente nas classes dos ícones usados pelo componente, esse efeito será refletivo em todos os componentes Avaliação utilizados no projeto;
- Criar uma classe que só será exibida no componente específico.
Image Added
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.
Image Modified
Figura 2.1 - Projeto com o template e cores personalizado