O Bootstrap é um framework web com código-fonte aberto para o desenvolvimento de componentes de interface e front-end, utiliza HTML, CSS e JavaScript. Foi criado no ano de 2011 por uma equipe do Twitter com o objetivo de melhorar a experiência do usuário em um site amigável e responsivo.

Por ser open-source, qualquer pessoa pode baixa, alterar ou criar temas próprios e distribuí-los. Dessa forma, são necessários poucos passos para deixar o seu sistema de cara nova!

Mas antes de procurar por temas, é necessário saber a versão do Bootstrap que seu sistema usa e, a depender do quanto queira personalizar seu sistema, a versão de outros plugins que possam ser requisitados. Atualmente o Cronapp utilizar a versão 3.3.4 do Bootstrap e o AngularJS na versão 1.5.9.

Temas internos

Além do Material, tema padrão do Cronapp e com suporte à acessibilidade, existem mais 16 temas disponíveis. Estes temas podem ser selecionados durante a criação do projeto (Figura 1.1) ou posteriormente (Figura 1.2).

Figura 1.1 - Etapa de seleção de tema durante 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 / index.html (Visualização de pastas), para alterar o tema. Procure o elemento <link> com o id "themeSytleSheet":

<link id="themeSytleSheet" rel="stylesheet" href="plugins/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

Concluída a seleção do tema no arquivo index.html, salve e rode o projeto em um navegador web. (Figura 1.3)

Figura 1.3 - Tela de login com o tema Material (esquerdo) e flatly (direito)

Temas externos

Para adicionarmos um tema externo, é necessário algumas informações sobre a estrutura de arquivos do Cronapp.

Estrutura de arquivos

<Nome do projeto>/
??? src/
    ??? main/
        ??? webapp/
            ??? cronapp-framework-js/
                ??? css/
                    ??? themes/
                        ??? custom/
                        ?   ??? cerulean/
                        ?   ?   ??? custom-cerulean.min.css
                        ?   ??? material/
                        ?       ??? custom-material.min.css
                        ??? cerulean.min.css
                        ??? material.min.css

"Nome do projeto"
??? src/
?   ??? main/
?   ?   ??? webapp/
?   ?   ?   ??? cronapp-framework-js/
?   ?   ?   ?   ??? css/
?   ?   ?   ?   ?   ??? fonts/
?   ?   ?   ?   ?   ??? themes/
?   ?   ?   ?   ?   ?   ??? custom/
?   ?   ?   ?   ?   ?   ?   ??? cerulean/
?   ?   ?   ?   ?   ?   ?   ?    ??? custom-cerulean.min.css
?   ?   ?   ?   ?   ?   ?   ??? material/
?   ?   ?   ?   ?   ?   ?   ?    ??? custom-material.min.css
?   ?   ?   ?   ?   ?   ??? cerulean.min.css
?   ?   ?   ?   ?   ?   ??? material.min.css