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.

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).

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.

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:

1. 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;
2. 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:

1. .fa-star-o{ }: ícone usado quando ocorre o clique no componente;
2. .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