Show Menu
TÓPICOS×

Personalizar a criação da interface de usuário de correspondência

Visão geral

O Gerenciamento de correspondência permite que você reclassifique seu modelo de solução para obter um melhor valor da marca e para seguir os padrões de marca de sua organização. A nova marca da interface do usuário inclui a alteração do logotipo da organização, que é exibido no canto superior esquerdo da interface Criar correspondência.
Você pode alterar o logotipo na interface do usuário Criar correspondência com o logotipo de sua organização.
O ícone personalizado na ​Figura Criar interface de usuário de correspondência: O ícone personalizado na interface Criar correspondência

Alteração do logotipo na interface Criar correspondência

Para configurar uma imagem de logotipo de sua escolha, faça o seguinte:
  1. Crie a estrutura de pastas apropriada no CRX .
  2. Carregue o novo arquivo de logotipo na pasta que você criou no CRX.
  3. Configure o CSS no CRX para se referir ao novo logotipo.
  4. Limpe o histórico do navegador e atualize a interface de usuário Criar correspondência.

Criação da estrutura de pastas necessária

Crie a estrutura de pastas, conforme explicado abaixo, para hospedar a imagem de logotipo personalizada e a folha de estilos. A nova estrutura de pastas com a pasta raiz /aplicativos é semelhante à estrutura da pasta /libs.
Para qualquer personalização, crie uma estrutura de pastas paralela, conforme explicado abaixo, na ramificação /apps.
A ramificação /apps (estrutura de pastas):
  • Certifique-se de que seus arquivos estejam seguros no caso de uma atualização do sistema. No caso de atualização, pacote de recursos ou correção, a ramificação /libs é atualizada e, se você hospedar suas alterações na ramificação /libs, elas serão substituídas.
  • Ajuda você a não perturbar o sistema/ramificação atual, que você possivelmente poderá desfazer por engano se usar os locais padrão para armazenar os arquivos personalizados.
  • Ajuda seus recursos a terem prioridade mais alta quando o AEM pesquisa por recursos. O AEM é configurado para pesquisar primeiro a ramificação /apps e depois a ramificação /libs para localizar um recurso. Esse mecanismo significa que o sistema usa sua sobreposição (e as personalizações definidas ali).
Use as seguintes etapas para criar a estrutura de pastas necessária na ramificação /apps:
  1. Vá para https://[server]:[port]/[ContextPath]/crx/de e faça logon como Administrador.
  2. Na pasta apps, crie uma pasta nomeada css com caminho/estrutura semelhante à pasta css (localizada na pasta ccrui).
    Etapas para criar a pasta css:
    1. Clique com o botão direito do mouse na pasta css no seguinte caminho e selecione Sobrepor nó : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
    2. Certifique-se de que a caixa de diálogo Sobrepor nó tenha os seguintes valores:
      ​Caminho: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
      ​Localização da sobreposição: /apps/
      ​Corresponder tipos de nós: Verificado
      Não faça alterações na ramificação /libs. Quaisquer alterações feitas podem ser perdidas, pois essa ramificação está sujeita a alterações sempre que você:
      • Atualizar na sua instância
      • Aplicar uma correção
      • Instalar um pacote de recursos
    3. Clique em OK . A pasta css é criada no caminho especificado.
  3. Na pasta apps, crie uma pasta chamada imgs com caminho/estrutura semelhante à pasta imgs (localizada na pasta ccrui).
    1. Clique com o botão direito do mouse na pasta de imagens no seguinte caminho e selecione Sobrepor nó : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
    2. Certifique-se de que a caixa de diálogo Sobrepor nó tenha os seguintes valores:
      ​Caminho: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
      ​Localização da sobreposição: /apps/
      ​Corresponder tipos de nós: Verificado
    3. Clique em OK .
      Você também pode criar a estrutura de pastas na pasta /apps manualmente.
  4. Clique em Salvar tudo para salvar as alterações no servidor.

Criar o CSS para integrar o logotipo à interface do usuário

A imagem do logotipo personalizado requer que uma folha de estilos adicional seja carregada no contexto do conteúdo.
Use as seguintes etapas para configurar a folha de estilos para renderizar o logotipo:
  1. Ir para https://[server]:[port]/[contextpath]/crx/de . Se necessário, faça logon como Administrador.
  2. Crie um arquivo chamado customcss.css (não é possível usar um nome de arquivo diferente) no seguinte local:
    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
    Etapas para criar o arquivo customcss.css:
    1. Clique com o botão direito do mouse na pasta css e selecione Criar > Criar arquivo .
    2. Na caixa de diálogo Novo arquivo, especifique o nome do CSS como customcss.css (não é possível usar um nome de arquivo diferente) e clique em OK .
    3. Adicione o seguinte código ao arquivo css recém-criado. Em content:url no código, especifique o nome da imagem que você carregou na pasta de imagens no CRXDE.
      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
      
      
    4. Clique em Salvar tudo .

Atualize a interface de usuário Criar correspondência para ver o logotipo personalizado

Limpe o cache do navegador e abra a instância Criar interface de usuário de correspondência no navegador. Você deve ver seu logotipo personalizado.
Crie uma interface de usuário de correspondência com o logotipo personalizado Figura: O ícone personalizado na interface Criar correspondência