Mudanças entre a Versão 1 e Versão 2 de TutorialAlteraBanner


Ignorar:
Timestamp:
01/06/2016 11:55:49 (3 anos atrás)
Autor:
ramiroluz
Comentário:

--

Legenda:

Não Modificado
Adicionado
Removido
Modificado
  • TutorialAlteraBanner

    v1 v2  
    88
    99
    10 == Passo a passo ==
    11 Intro
     10== Instruções ==
    1211
    13 === Subtitulo ===
    14 Descrição do passo. [[BR]][[BR]][[Image(nome-da-imagem.png)]]
     12As 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.
    1513
     14=== Copiando o tema moderno ===
     15Para 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".
     16
     17[[Image(01-copiar-tema.png)]]
     18
     19=== Definindo o nome do tema ===
     20Em 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.
     21
     22[[Image(02-criar-copia.png)]]
     23
     24=== Iniciando as alterações ===
     25Clicar no botão "Alterar o tema".
     26
     27[[Image(03-alterar-tema.png)]]
     28
     29=== Escolher a pasta de imagens ===
     30Clicar na pasta "img" onde estão as imagens do tema.
     31
     32[[Image(04-seleciona-pasta-img.png)]]
     33
     34=== Abrir formulário de envio ===
     35Clicar 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.
     36
     37[[Image(05-upload-banner.png)]]
     38
     39=== Escolher novo banner ===
     40Clicar 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.
     41
     42[[Image(06-upload-banner.png)]]
     43
     44=== Customizar o arquivo de estilo ===
     45A imagem usada pelo portal está configurada no arquivo de estilos css, selecionar a pasta "css" para editar o arquivo.
     46
     47[[Image(07-seleciona-pasta-css.png)]]
     48
     49=== Customizar o arquivo de estilo ===
     50Clicar no arquivo "style.css" para abrir e poder editar o arquivo.
     51
     52[[Image(08-seleciona-style-css.png)]]
     53
     54=== Encontrar a regra do banner ===
     55Para 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.
     56
     57[[Image(09-procurar-banner.png)]]
     58
     59=== Altera imagem de background do banner ===
     60A 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.
     61
     62[[Image(10-altera-background.png)]]
     63
     64
     65=== Salva estilo ===
     66Após a alteração, clicar no botão "Save file".
     67
     68[[Image(11-salva-estilo-css.png)]]
     69
     70=== Verificando o tema ===
     71Antes de ativar é possível verificar se o tema está bom, clicar no botão "Visualize o tema".
     72
     73[[Image(12-visualizar-tema.png)]]
     74
     75=== Volta ao painel de controle ===
     76Após as customizações basta voltar ao painel de controle para poder ativar o tema. Clicar no link "Voltar ao painel de controle".
     77
     78[[Image(13-voltar-painel-controle.png)]]
     79
     80=== Ativar o tema customizado ===
     81Se 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.
     82
     83[[Image(14-ativar-tema.png)]]
     84
     85Tem 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.
 

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