Personalizar o tema (versão original)

Você está lendo a documentação do Apigee Edge.
Acesse a documentação da Apigee X. info

Um tema consiste em uma folha de estilo global em cascata (CSS) que fornece uma aparência uniforme para todas as páginas do portal. O objetivo de um tema é permitir que você altere a aparência em todas as páginas do portal de uma só vez.

A maioria dos estilos padrão fornecidos com o portal de exemplo é baseada no Bootstrap. Você pode personalizar, visualizar e publicar seu tema, conforme descrito nas seções a seguir.

Assista o vídeo a seguir para saber como personalizar o tema do portal.

Acessar o editor de temas

Personalize, visualize e publique o tema do seu portal no editor de temas. Para abrir o editor de temas, selecione Tema no menu suspenso da barra de navegação superior.

Editor de temas

Conforme destacado na figura anterior, o editor de tema permite:

Adicionar estilos personalizados

Personalize seu tema adicionando seu próprio código CSS no painel do editor de estilos. Todos os elementos de estilo CSS são compatíveis.

Para personalizar seu tema:

  1. Selecione Tema no menu suspenso da barra de navegação superior.
  2. Adicione seu código CSS personalizado no painel do editor de estilo, no lado direito da página.
  3. Para conferir as mudanças no painel de visualização, clique em recarregar a visualização.
    > Observação: clique na navegação do portal para visualizar o conteúdo em todas as páginas.
  4. Clique em Publicar para publicar as mudanças no tema.
  5. Clique em Publicar para confirmar a atualização.

Personalize a imagem "Seu logotipo" com o logotipo da sua empresa. Para isso, substitua os seguintes arquivos de imagem no gerenciador de arquivos enviando seu logotipo com os mesmos nomes e tamanhos de arquivo relativos:

  • logo.png (140 pixels por 40 pixels)
  • mobile-logo.png (140 pixels por 40 pixels)

Além disso, modifique o conteúdo a seguir na folha de estilo CSS, conforme necessário:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}



.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

Para mais informações, consulte Gerenciar recursos.

Personalizar a imagem de plano de fundo na página inicial

Personalize a imagem de plano de fundo na página inicial modificando o conteúdo a seguir na folha de estilo CSS.

  • Modifique o arquivo de imagem de plano de fundo e o posicionamento dele.
    Você pode fazer upload da sua própria versão da imagem portal-hero.jpg para o gerenciador de arquivos usando o mesmo nome e tamanho relativo do arquivo (1440 pixels x 540 pixels). Se quiser usar outro nome de arquivo, edite o valor background-image no CSS abaixo. 

    /* ==== Jumbotron ====
a billboard for drawing attention, from Bootstrap  */

home-page-jumbotron-bg {
    background-image: url('/files/portal-hero.jpg');
}

  • Modifique o formato do texto que fica sobre a imagem de plano de fundo. 

    .jumbotron {
 text-align: center;
 height: 500px;
 background-size: cover;
 margin: -50px -30px 0 -30px;
 border-radius: 0;
}

.jumbotron h1 {
 font-size: 40px;
 font-weight: 400;
}

.jumbotron h2 {
 font-size: 25px;
 font-weight: 400;
}

.jumbotron a, .jumbotron a:hover {
 font-size: 18px;
}

.jumbotron p {
 max-width: none;
}

Noções básicas sobre regras de especificidade do CSS

A especificidade do CSS descreve o método usado por um navegador para determinar a precedência das declarações de elemento de estilo CSS quando surgem conflitos. A especificidade do CSS é calculada por meio da aplicação de um peso a uma declaração de elemento de estilo CSS específica, com base no tipo de seletor. Quanto mais específico for o seletor de CSS, maior será o peso. Um atributo de código, por exemplo, receberá uma ponderação maior no cálculo do que o seletor de tipo.

Por exemplo, se você definir os seguintes elementos de estilo no código CSS, o elemento de parágrafo ficará colorido em vermelho porque a declaração do elemento de estilo p dentro de um elemento div é mais específica do que a declaração de elemento de estilo p.

div p { color: red }  ← More specific  
p { color: blue }

Da mesma forma, se você definir as seguintes declarações de elementos de estilo no seu código CSS, qualquer texto entre tags <div class="test"></div> ficará azul porque a declaração de estilo do atributo id dentro de um elemento div é mais específica do que o elemento div. declaração.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

Para declarações de elementos de estilo com a mesma especificidade, a última declaração de elemento de estilo definida terá precedência. Por exemplo, dada as declarações de elemento de estilo a seguir, o elemento de parágrafo será colorido em azul. 

p { color: red }  
p { color: blue }  ← Last specified

Publicar seu tema

Para publicar no portal ativo as personalizações de tema e estilo que você adicionou:

  1. Selecione Tema no menu suspenso no menu de navegação superior.
  2. Clique em Publicar.

Para ver o conteúdo publicado no portal ativo, clique em Portal ativo na barra de navegação superior.