Customização do Tema Moderno no Portal Modelo 3 trocando o banner

Resumo


Tutorial para utilizar o pm3demo para customizar o tema moderno, trocando o banner.

Descrição

Esse tutorial apresenta um guia para customizar e testar as customizações do tema moderno do portal modelo sem comprometer o portal que está sendo usado. A vantagem é aproveitar o tema usado no portal para iniciar a customização mas utilizando a Demonstração do Portal Modelo 3 (usuário: admin, senha: interlegis) hospedado no Interlegis.

Esse tutorial foi criado à partir de uma dúvida na lista da comunidade: https://colab.interlegis.leg.br/archives/thread/gitec/banner-do-tema-moderno.

Instruções

As instruções que seguem servem para trocar o banner do Tema Moderno do Portal Modelo3. É possível seguir partes do tutorial para customizar outras coisas.

Copiando o tema moderno

Para começar a customização é necessário copiar o tema, os temas pré-instalados não podem ser alterados. Basta clicar no botão "Copiar".

Definindo o nome do tema

Em seguida é aberto um formulário, deve ser digitado um título e clicar no botão "Criar". Lembre de deixar o botão "Aplicar imediatamente o novo tema" desmarcado.

Iniciando as alterações

Clicar no botão "Alterar o tema".

Escolher a pasta de imagens

Clicar na pasta "img" onde estão as imagens do tema.

Abrir formulário de envio

Clicar no botão "Upload file" para escolher o novo banner, o tamanho padrão do banner do portal é 1920x262, se o banner novo tiver outras dimensões pode prejudicar o layout.

Escolher novo banner

Clicar no botão "Selecionar arquivo" e procurar no computador o local onde está salvo o novo banner. Conferir se a pasta "img" está selecionada é essencial que o novo banner vá para a pasta correta.

Customizar o arquivo de estilo

A imagem usada pelo portal está configurada no arquivo de estilos css, selecionar a pasta "css" para editar o arquivo.

Customizar o arquivo de estilo

Clicar no arquivo "style.css" para abrir e poder editar o arquivo.

Encontrar a regra do banner

Para alterar a regra fica mais fácil fazer uma busca, para buscar a regra clique em qualquer parte do campo onde o arquivo está sendo editado e utilize a tecla de atalho de busca do seu navegador, normalmente é CTRL-F e digite a palavra banner.

Altera imagem de background do banner

A propriedade que precisa ser alterada é background-image, atenção para colocar o mesmo nome da do arquivo com o novo banner e manter o nome da pasta "img". No exemplo do tutorial ficou assim: background-image: url('../img/banner_verde.jpg'); isso porque o nome do novo banner era banner_verde.jpg.

Salva estilo

Após a alteração, clicar no botão "Save file".

Verificando o tema

Antes de ativar é possível verificar se o tema está bom, clicar no botão "Visualize o tema".

Volta ao painel de controle

Após as customizações basta voltar ao painel de controle para poder ativar o tema. Clicar no link "Voltar ao painel de controle".

Ativar o tema customizado

Se estiver satisfeito com as mudanças basta ativar o tema. Clicar no botão "Ativar" para que o tema passe a ser utilizado. Pode ser necessário clicar no botão atualizar algumas vezes por causa de cópias da página inicial armazenadas em cache.

Tem mais um passo que não é necessário, mas é recomendado. Capturar uma imagem do tema customizado e alterar o arquivo preview.png que fica na raiz do tema. Essa imagem será exibida no painel de controle como miniatura do tema.

Última modificação 3 anos atrás Última modificação em 01/06/2016 11:55:49

Anexos (15)

Download de todos os anexos como .zip

 

The contents and data of this website are published under license:
Creative Commons 4.0 Brasil - Atribuir Fonte - Compartilhar Igual.