Personalizar criar interface do usuário de correspondência

Visão geral

O Gerenciamento de correspondência permite reformular a marca de seu modelo de solução para obter um melhor valor de marca e aderir aos padrões de marca de sua organização. A reformulação da marca da interface do usuário inclui a alteração do logotipo da organização, que é exibido no canto superior esquerdo da interface do usuário 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
interface do usuário Criar correspondência: o ícone personalizado na interface do usuário Criar correspondência

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

Para configurar uma imagem de logotipo de sua escolha, faça o seguinte:

  1. Crie a estrutura de pasta apropriada no CRX.

  2. Faça upload do novo arquivo de logotipo na pasta que você criou no CRX.

  3. Configure o CSSon CRX para fazer referência ao novo logotipo.

  4. Limpe o histórico do navegador e atualize a interface 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 /apps é 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):

  • Garante que os arquivos sejam seguros no caso de uma atualização do sistema. No caso de atualização, pacote de recursos ou hotfix, 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 pode ser desfeito por engano se você usar os locais padrão para armazenar os arquivos personalizados.
  • Ajuda seus recursos a ter prioridade mais alta quando AEM pesquisas por recursos. AEM é configurado para pesquisar primeiro a ramificação /apps e, em seguida, a ramificação /libs para localizar um recurso. Esse mecanismo significa que o sistema usa sua sobreposição (e as personalizações definidas lá).

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 chamada 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

      Nó de sobreposição

    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

      Local de sobreposição: /apps/

      Corresponder Tipos De Nó: Marcado

      Caminho do nó de sobreposição

      OBSERVAÇÃO

      Não faça alterações na ramificação /libs. As alterações feitas podem ser perdidas, pois essa ramificação pode ser alterada sempre que você:

      • Atualizar na sua instância
      • Aplicar um hotfix
      • 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 imgs 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

      Local de sobreposição: /apps/

      Corresponder Tipos De Nó: Marcado

    3. Clique em OK.

      OBSERVAÇÃO

      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.

Faça upload do arquivo de logotipo personalizado para o CRX. As regras HTML padrão controlam a renderização do logotipo. Os formatos de arquivo de imagem compatíveis são compatíveis com o navegador usado para acessar o AEM Forms. Todos os navegadores suportam JPEG, GIF e PNG. Para obter mais informações, consulte a documentação específica do navegador sobre os formatos de imagem suportados.

  • As dimensões padrão da imagem do logotipo são 48 px * 48 px. Certifique-se de que a imagem seja semelhante a este tamanho ou maior que 48 px * 48 px.
  • Se a altura da imagem do logotipo for superior a 50 px, a interface do usuário Criar correspondência dimensionará a imagem para uma altura máxima de 50 px, pois essa é a altura do cabeçalho. Ao dimensionar a imagem para baixo, a interface do usuário Criar correspondência mantém a proporção da imagem.
  • A interface do usuário Criar correspondência não dimensiona a imagem se ela for pequena, portanto, certifique-se de usar uma imagem de logotipo com pelo menos 48 px de altura e largura suficiente para maior clareza.

Use as seguintes etapas para fazer upload do arquivo de logotipo personalizado para o CRX:

  1. Ir para https://[server]:[port]/[contextpath]/crx/de. Se necessário, faça logon como Administrador.

  2. No CRXDE, clique com o botão direito do mouse na pasta imgs no seguinte caminho e selecione Criar > Criar arquivo:

    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/

    Criar novo nó na pasta imgs

  3. Na caixa de diálogo Criar arquivo, digite o nome do arquivo como CustomLogo.png (ou o nome do arquivo de logotipo).

    CustomLogo.png como novo nó

  4. Clique em Salvar tudo.

    No novo arquivo que você criou (aqui CustomLogo.png), a propriedade jcr:content é exibida.

  5. Clique em jcr:content na estrutura de pastas.

    as propriedades do jcr:content são exibidas.

    jcrcontentproperties

  6. Clique duas vezes na propriedade jcr:data.

    A caixa de diálogo Edit jcr:data é exibida.

    Agora clique na pasta newlogo.png , clique duas vezes em jcr:content (opção dim) e defina o tipo nt:resource. Caso não esteja presente, crie uma propriedade com o nome jcr:content.

  7. Na caixa de diálogo Editar jcr:data, clique em Procurar e selecione o arquivo de imagem que deseja usar como logotipo (aqui CustomLogo.png).

    Os formatos de arquivo de imagem compatíveis são compatíveis com o navegador usado para acessar o AEM Forms. Todos os navegadores suportam JPEG, GIF e PNG. Para obter mais informações, consulte a documentação específica do navegador sobre os formatos de imagem suportados.

    Exemplo de arquivo de logotipo personalizado
    Figura: Exemplo - CustomLogo.png a ser usado como o logotipo personalizado

  8. Clique em Salvar tudo.

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

A imagem de logotipo personalizada requer uma folha de estilos adicional para ser carregada no contexto de 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 Create > Create File.

    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 do 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 o logotipo personalizado.

Criar interface de usuário de correspondência com o
logotipo personalizadoFigura: o ícone personalizado na interface do usuário Criar correspondência

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now