- Criado por Igor Andrade, última alteração em 27/05/2021
Nesse tutorial mostraremos como alterar o padrão de cores e CSS a partir de um modelo de personalização de template. Você poderá utilizar 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 seja necessário realizar ajustes 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 CSS;
- Habilitar a opção Modo Avançado.
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
Após a criação do projeto será necessário acessar o arquivo index.html (localizado em src/main/webapp/
) para alterar o tema. O index.html possui todas as chamadas para os plugins que o Cronapp usa, inclusive o seu tema. Procure o elemento <link>
com o id="themeSytleSheet"
:
<link id="themeSytleSheet" rel="stylesheet" href="node_modules/cronapp-framework-js/css/themes/material.min.css">
Exclua o nome do tema no final do atributo href
, pressione Ctrl + Espaço
para exibir a lista de temas e selecione uma opção de CSS minificado: <nome do tema>.min.css
.
Figura 1.2 - Selecionando um dos temas inclusos no Cronapp
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 substituí-lo.
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).
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 de 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.5 - 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.6 - Exemplo de guia de estilo
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.7 - Substituição das cores principais do nosso exemplo
Use a tabela e figura abaixo como base para substituir o código hexadecimal pelas cores do seu projeto.
Cor | Hexadecimal |
---|---|
Default | #97C93D |
Primary | #265280 |
Info | #FFFFFF |
Success | #B8DD74 |
Danger | #DDDADA |
Warning | #FFE920 |
Light | #579DE3 |
LInk | #514D4D |
Figura 1.8 - 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 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.
Figura 1.9 - É possível criar ou selecionar uma classe já criada através da propriedade Classe CSS
Acesse a página home.view.html (localizado em src/main/webapp/views/logged/
) e arraste o componente Avaliação para a área de edição. Selecione o componente para exibir 6 botões bola, clique no primeiro (cadeado fechado) para acessar o conteúdo dentro da tag <div>
. Após o desbloqueio, selecione a última estrela (destaque 1 da figura 1.9). Nesse momento é possível visualizar na propriedade Classe CSS que o componente utiliza o ícone da classe fa-star.
Clique na última linha da propriedade Classe CSS e insira um nome para uma nova classe, por exemplo "classe". Enquanto digita as classes existentes serão listadas, clique em alguma classe existente ou na primeira linha "<nova-classe> (novo)" para adicionar uma classe ainda não criada.
Abra novamente o arquivo app.css e pesquise pela classe "fa-star". Logo abaixo dela, crie mais 2 classes:
- .fa-star-o{ }: ícone usado quando ocorre o clique no componente;
- .classe{ }: classe que criamos ao selecionar a última estrela.
Adicione atributos nas classes como no campo abaixo:
.fa-star { color: #97C93D; border-style: inset; background-color: #DDDADA; } .fa-star-o { color: #B8DD74; border-style: outset; } .classe { color: yellow; }
Salve e execute o projeto, o resultado das alterações nas classes usadas no componente Avaliação deve estar como na figura abaixo.
Figura 1.10 - Resultado das alterações feitas nesse tópico
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.11 - 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 pela aplicação web.
Figura 2.1 - Projeto com o template e cores personalizado
- Sem rótulos