Version 2 (modified by ramiroluz, 3 anos atrás) (diff)

--

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.

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.