Como personalizar o tema

Esta é a documentação do Apigee Edge.
Acesse Documentação da Apigee X. informações

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

É possível personalizar o tema por meio da interface do portal do desenvolvedor ou escrevendo o código em um arquivo de tema para substituir o arquivo de tema padrão.

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

Tema	Descrição
Tema responsivo da Apigee	Baseado no bootstrap 3, o tema padrão para versões posteriores do portal. Este tema é compatível com dispositivos com larguras de 768 pixels a 1.400 pixels. Todos os recursos do Bootstrap 3 estão disponíveis nesse tema. Observação: para usar o tema da Apigee responsiva, verifique se o bootstrap O tema 7.x-3.0 está ativado.
Tema Apigee DevConnect	O tema de portal padrão anterior ao tema da Apigee responsiva. É possível fazer upgrade dos portais atuais para o novo tema da Apigee responsiva, mas é necessário primeiro garanta que todos os blocos, modelos e outros conteúdos sejam compatíveis com o Bootstrap 3, e se o tema Bootstrap 7.x-3.0 está ativado.
Tema base da Apigee	Um tema pai para o tema Apigee DevConnect e não deve ser usado no por conta própria.

Como definir o tema padrão

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

"Apigee DevConnect theme" is out of date 

Siga o procedimento abaixo para definir o tema padrão do portal. Você deve sempre testar um novo tema primeiro em um sistema de não produção antes de implantá-lo para a produção.

Para definir o tema padrão:

1. Faça login no seu 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 serviços temas aparece.
3. Selecione Definir padrão para o tema que você quer usar como padrão.
   Para usar o tema responsivo da Apigee, verifique se o tema Bootstrap 7.x-3.0 está 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 da Apigee responsiva, incluindo:

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

Para personalizar o suporte a formulários modal:

O portal usa o Drupal Bootstrap Módulo de sandbox de formulários modais para exibir formulários Drupal como modais. Os formulários de login e registro a função padrão como modais. Você pode desativar essa funcionalidade para que esses formulários apareçam como páginas individuais.

1. Faça login no portal para desenvolvedores como um usuário com privilégios de administrador.
2. Selecione Configuração > Interface do usuário > O bootstrap modal na Menu de administração Drupal.
3. Ativa ou desativa o suporte ao modal para formulários.
4. Selecione Salvar configuração.

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

1. Faça login no seu 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 Drupal. Lista de temas ativados aparece.
3. Na área Apigee responsivo (tema padrão) da página, selecione Configurações (não selecione o botão "Configurações" na parte superior da página).
4. A página de configurações do tema Apigee responsivo será exibida.
5. A tabela a seguir descreve as áreas nessa página que você pode usar para configurar os tema. Se você mudar alguma 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 (chamado de Navbar nas configurações) e a exibição dos recursos da região: Navegação estrutural: ocultar/mostrar a localização atual e ativar/desativar o link da página inicial. na navegação estrutural. Navbar: mude a posição da Navbar (menu principal) para fixas/estáticas/normais, tornando o layout mais dinâmico. Region Wells: adiciona uma classe de poço a qualquer região no site para adicionar um plano de fundo mais escuro à região.
   	JavaScript	Controle a exibição de âncoras, pop-ups e dicas de ferramentas: Âncoras: corrija posições de âncora e permita uma aplicação suave rolagem. Popovers: os popovers adicionam pequenas sobreposições de conteúdo a qualquer . Ativar/desativar pop-ups e configurar como eles são usados. Dicas: configure o uso das dicas. É possível forçar cada que será exibida à direita, esquerda, parte superior ou inferior de cada elemento do formulário e defina outras opções de exibição.
   	Avançado	Controla como o portal usa o BootstrapCDN. para atualizar os arquivos do tema de inicialização. Você pode desativar a dependência do portal em BootstrapCDN, mas você precisa fornecer sua própria implementação do bootstrap de análise de dados em nuvem.
   	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 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 um favorito para no portal.

Como personalizar o tema Apigee DevConnect

O tema Apigee DevConnect é o tema de portal padrão para versões mais antigas do portal. podem receber upgrade para o novo tema da Apigee responsiva. No entanto, é necessário garantir que todas blocos, modelos e outros conteúdos é compatível com o Bootstrap 3 antes de realizar a e fazer o upgrade.

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

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

   

3. Mude as configurações de acordo com sua preferência.
   Por exemplo, adicione ou altere a mensagem de boas-vindas ou a cor de fundo do cabeçalho. A a cor de fundo do cabeçalho é inicialmente definida como algo próximo a laranja (#FF4300). É possível mudar 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 fornecidos com o portal estão no Diretório profiles/apigee/themes no diretório de instalação do portal. Esse diretório está em /var/www/html/profiles/apigee/themes se você instalou o portal no local padrão.

Para editar um tema e modificar a aparência do site, não modifique os arquivos do tema em profiles/apigee/themes diretamente. Se você fizer isso, suas mudanças vão ser 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 o tema padrão. no diretório /sites/all/themes diretório. Para instruções sobre subtemas, consulte a documentação documentação em https://www.drupal.org/node/225125.

1. Copie a pasta profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit a página /sites/all/themes do Compute Engine.
2. Renomeie a pasta apigee_responsive_starterkit para YOUR_THEME_NAME.
3. Renomeie o arquivo apigee_responsive_starterkit.info como YOUR_THEME_NAME.info.
4. Renomeie css/apigee_responsive_starterkit.css como css/SEU_NOME_DO_TEMA.css.
5. Renomeie js/apigee_responsive_starterkit.js como SEU_NOME_DO_TEMA.js.
6. Edite o arquivo YOUR_THEME_NAME.info e substitua as seguintes linhas:
   
   folhas de estilo[todas][] = css/apigee_responsive_starterkit.css
   scripts[] = js/apigee_reply_starterkit.js
   
   com:
   
   folhas de estilo[todas][] = css/NOME_DO_SEU_TEMA.css
   scripts[] = js/NOME_DO_SEU_TEMA.js
7. Altere o nome do tema no arquivo YOUR_THEME_NAME.info de Apigee Responsive Starter Kit para SEU TEMA NOME.
8. Se você quiser adicionar uma nova captura de tela para o tema, substitua o arquivo screenshot.png existente.
9. Para adicionar um novo logotipo ao tema, substitua o arquivo logo.png existente.
10. Se você quiser adicionar um novo favicon ao seu tema, substitua o arquivo favicon.ico existente.