Como personalizar o tema

Você está vendo a documentação do Apigee Edge.
Acesse a documentação da Apigee X.
informações

Um tema é um conjunto de arquivos que define a aparência de um site. O portal de serviços para desenvolvedores é definido inicialmente com um tema padrão, que você pode personalizar. Isso permite que você selecione as preferências de aparência do seu portal. Mais especificamente, você pode mudar a cor de links, planos de fundo, texto e outros elementos do tema. Também é possível alterar a mensagem de boas-vindas que aparece na primeira página do seu portal do desenvolvedor.

Você pode personalizar o tema na interface do portal do desenvolvedor ou escrevendo código em um arquivo de tema personalizado para substituir o arquivo de tema padrão.

Dependendo da sua versão do portal do desenvolvedor, você terá vários temas para escolher:

Tema Descrição

Tema responsivo da Apigee

Baseado no Bootstrap 3, o tema padrão para versões posteriores do portal. Esse tema oferece suporte a dispositivos com larguras de 768 a 1.400 pixels. Todos os recursos do Bootstrap 3 estão disponíveis nesse tema.

Observação: para usar o tema responsivo da Apigee, verifique se o tema Bootstrap 7.x-3.0 está ativado.

Tema Apigee DevConnect

O tema do portal padrão anterior ao tema responsivo da Apigee.

É possível fazer upgrade dos portais atuais para o novo tema responsivo da Apigee, mas primeiro é necessário garantir que todos os blocos, modelos e outros conteúdos sejam compatíveis com o Bootstrap 3 e que o tema Bootstrap 7.x-3.0 esteja ativado.

Tema base da Apigee

Um tema pai do tema DevConnect da Apigee e que não deve ser usado sozinho.

Como definir o tema padrão

Se o portal ainda estiver usando o tema antigo do Apigee DevConnect, talvez você veja um aviso no formulário:

"Apigee DevConnect theme" is out of date 

Use o procedimento a seguir para definir o tema padrão do portal. Sempre teste um novo tema primeiro em um sistema que não seja de produção antes de implantá-lo na produção.

Para definir o tema padrão:

  1. Faça login no portal como usuário com privilégios de administrador ou de criação de conteúdo.
  2. Selecione Appearance no menu de administração do Drupal. A lista de temas ativados será exibida.
  3. No tema que você quer usar como padrão, selecione Definir padrão.
    Para usar o tema responsivo da Apigee, verifique se o tema Inicialização 7.x-3.0 está ativado nessa página também.
  4. Salve a configuração.

Como personalizar o tema responsivo da Apigee

Nesta seção, descrevemos como configurar o tema responsivo da Apigee, incluindo:

  • Personalizar formulários modais
  • Como personalizar as configurações gerais

Para personalizar o suporte a formulários modal, siga estas etapas:

O portal usa o módulo de sandbox formulários modais de inicialização do Drupal para exibir formulários Drupal como modais. Por padrão, os formulários de login e registro funcionam como modais. Desative essa funcionalidade para que os formulários apareçam como páginas individuais.

  1. Faça login no portal do desenvolvedor como usuário com privilégios de administrador.
  2. Selecione os formulários Configuration > User interface > Bootstrap Modal no menu de administração do Drupal.
  3. Ative ou desative o suporte modal para formulários.
  4. Selecione Salvar configuração.

Para personalizar as configurações gerais do tema responsivo da Apigee:

  1. Faça login no portal como usuário com privilégios de administrador ou de criação de conteúdo.
  2. Selecione Aparência no menu de administração do Drupal. A lista de temas ativados será exibida.
  3. Na área Apigee Responsive (default theme) da página, selecione Settings (não selecione o botão "Settings" na parte de cima da página).
  4. A página de configurações do tema responsivo da Apigee é exibida.
  5. A tabela a seguir descreve as áreas da página que você pode usar para configurar o tema. Se você alterar qualquer uma dessas configurações, selecione "Salvar configuração".

    Área Seção Descrição

    Configurações de inicialização

    Componentes

    Controle a exibição da navegação estrutural, a posição do menu principal (chamada de Navbar nas configurações) e a exibição de poços de região:

    • Navegação estrutural: oculta/mostre a localização atual e ative/desative o link "Página inicial" dentro dela.
    • Navbar: muda a posição da Navbar (menu principal) para posições fixas/estáticas/normais, tornando o layout mais dinâmico.
    • Region Wells: adicione uma classe de poço a qualquer região no site para acrescentar um fundo mais escuro a ela.

    JavaScript

    Controle a exibição de âncoras, pop-ups e dicas:

    • Anchors: corrigem as posições de âncora e permitem uma rolagem suave.
    • Popovers: adicionam pequenas sobreposições de conteúdo a qualquer elemento. Ativar/desativar pop-ups e configurar como eles são usados.
    • Dicas: configure como as dicas são usadas. É possível forçar a exibição de cada dica à direita, à esquerda, na parte superior ou inferior de cada elemento do formulário e definir outras opções de exibição.

    Avançado

    Controla como o portal usa o BootstrapCDN para atualizar os arquivos do tema do Bootstrap. Você pode desativar a dependência do portal no BootstrapCDN, mas precisará fornecer sua própria implementação do framework Bootstrap.

    Configurações do DevConnect

    Defina a mensagem de boas-vindas, as cores padrão e o tamanho do logotipo que aparece no menu principal.

    Substituir as configurações globais

    Alternar exibição

    Ativar e desativar a exibição de diferentes áreas do portal.

    Configurações da imagem do logotipo

    Especifica a imagem exibida no menu principal.

    Configurações do ícone de atalho

    Especifica a imagem exibida na barra de endereço de um navegador ou como um favorito do portal.

Como personalizar o tema do Apigee DevConnect

O tema Apigee DevConnect é o tema padrão do portal para versões mais antigas do portal. Ele pode ser atualizado para o novo tema responsivo da Apigee. No entanto, é preciso garantir que todos os blocos, modelos e outros conteúdos sejam compatíveis com o Bootstrap 3 antes de fazer o upgrade.

Para personalizar as configurações gerais do tema Apigee DevConnect:

  1. Faça login no portal como usuário com privilégios de administrador ou de criação de conteúdo.
  2. Selecione Appearance > Apigee DevConnect theme > Settings no menu de administração do Drupal. Isso mostra as configurações iniciais do tema. As configurações de cor são especificadas como valores hexadecimais.

  3. Mude as configurações como preferir.
    Por exemplo, adicione ou altere a mensagem de recepção ou a cor do plano de fundo do cabeçalho. Inicialmente, a cor de plano de fundo do cabeçalho é definida como algo próximo ao laranja (#FF4300). Você pode mudá-lo para outra cor, como azul (#0000FF).
  4. Quando terminar de alterar as configurações, clique em Salvar.

Personalizar um tema criando um subtema

Todos os arquivos e recursos que definem os temas padrão enviados com o portal estão no diretório profiles/apigee/themes no diretório de instalação do portal. Esse diretório estará em /var/www/html/profiles/apigee/themes se você tiver instalado o portal no local padrão.

Para editar um tema para modificar a aparência do site, não modifique os arquivos do tema diretamente em profiles/apigee/themes. Se você fizer isso, suas alterações serão substituídas na próxima vez que você fizer upgrade do portal.

Em vez disso, crie um subtema do tema que você quer modificar copiando os arquivos do tema padrão para o diretório /sites/all/themes. Para ver instruções sobre subtemas, consulte a documentação do Drupal em https://www.drupal.org/node/225125.

A documentação do Drupal especificada acima tem informações detalhadas sobre a criação de um subtema, mas as etapas gerais estão listadas abaixo para criar um subtema do tema responsivo da Apigee:
  1. Copie a pasta profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit para a pasta profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit.
  2. Renomeie a pasta apigee_responsive_starterkit como YOUR_THEME_NAME.
  3. Renomeie o arquivo apigee_responsive_starterkit.info como YOUR_THEME_NAME.info.
  4. Renomeie o css/apigee_responsive_starterkit.css como css/YOUR_THEME_NAME.css.
  5. Renomeie js/apigee_responsive_starterkit.js como YOUR_THEME_NAME.js.
  6. Edite o arquivo YOUR_THEME_NAME.info e substitua as seguintes linhas:

    stylesheets[all][] = css/apigee_responsible_starterkit.css
    scripts[] = js/apigee_reply_starterkit.js


    por:

    stylesheets[all][] =
    csNAMEs/YOUR_THEME_NAME.js.js
  7. Altere o nome do tema no arquivo YOUR_THEME_NAME.info do Apigee Responsive Starter Kit para SEU NOME DO TEMA.
  8. Se você quiser adicionar uma nova captura de tela ao tema, substitua o arquivo screenshot.png.
  9. Se você quiser adicionar um novo logotipo ao tema, substitua o arquivo logo.png.
  10. Se você quiser adicionar um novo favicon ao seu tema, substitua o arquivo favicon.ico existente.