Como Criar uma Página de Login de Vinyl Personalizada¶

Se você deseja modificar a página Vinyl Login, este artigo descreve as práticas recomendadas. Seguir este método é preferível a métodos alternativos, pois esta abordagem preservará suas alterações ao atualizar o Vinyl no futuro. Métodos alternativos, como scripts no banco de dados ou remoção do lacre do Vinyl, não são recomendados e não serão preservados na atualização.

As imagens podem ser codificadas Base64 com sintaxe adequada ou você pode fazer upload da imagem diretamente para o Vinyl (método preferido) para usar uma imagem na página de login do Vinyl. Consulte a seção intitulada Para usar uma imagem hospedada em Vinyl para obter etapas sobre essa configuração. Aqui está um link para um site de codificador de imagem Base64 : https://www.base64-image.de/. Abaixo são fornecidas instruções sobre como gerar uma imagem codificada em Base64.

Se você for fazer upload da imagem para o Vinyl, vá para o IDE do Vinyl > Aparência > Imagens > selecione a Coleção que seu aplicativo está usando > clique em +Imagem e carregue a imagem. Após o upload, você pode clicar no ícone pop-up para expandir as informações detalhadas da imagem e clicar com o botão direito na parte superior da imagem conforme ela aparece na seção Foto. Consulte a seção abaixo sobre Para criar um tema de login personalizado para obter instruções passo a passo.

Ao fazer referência a caminhos de imagem em Temas, a sintaxe exata pode diferir ligeiramente dependendo de como o URL de hospedagem do Vinyl foi configurado. A maneira recomendada de fazer referência a um caminho de imagem é iniciar o valor do caminho com ./, por exemplo ./service/image/153f5b0b-c367-4409-a428-23813b6a5ab2.

Para enviar um novo tema de login em Desenvolvimento > Controle de qualidade > Produção, salve seu tema personalizado em sua Coleção de tema que está fazendo a viagem Dev > QA > Prod.

Para Criar um Tema de Login Personalizado¶

1. Navegue até Aparência
2. Confirme se você tem uma Coleção selecionada que pode ser modificada
3. Clique em + Tema
4. Forneça um Nome de tema identificável para o novo tema personalizado. Por exemplo: Tema de login do cliente
5. Selecione "Tema Base de Login" como Tema Base
6. Clique no botão Salvar
7. Selecione Formulário de login no painel Componentes
8. Clique no botão + Estilo no painel Estilos
9. Selecione Logotipo de login como Área
10. Selecione Imagem de fundo como Tipo de estilo

11. Insira a sintaxe formatada corretamente para uma imagem codificada em Base64. Por exemplo:

    `dados:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7 ////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAV VICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7`
    

12. Insira a descrição da Ajuda Técnica e clique em Salvar

13. Saia do Vinyl e atualize seu navegador. Agora você deve conseguir ver a imagem personalizada aparecer na tela de login do Vinyl.

Para Criar uma Imagem de Fundo Codificada em Base64¶

1. Para gerar a codificação Base64 adequada para sua imagem, recomendamos usar o site online: https://www.base64-image.de/

   

2. Arraste e solte ou clique no botão "Ou Clique Aqui" para fazer upload do seu arquivo de imagem JPG, PNG ou GIF

3. Após a conclusão do processamento do arquivo, clique no botão resultante Mostrar código

4. Clique no botão Selecionar tudo na seção Para uso em <img> seção de elementos

   

5. Clique no botão Copiar para a área de transferência

6. Esta é a sintaxe do código de imagem formatada corretamente que você colará no valor da imagem de fundo no Vinyl em seu tema de login personalizado

Para Usar uma Imagem Hospedada em Vinyl¶

1. Navegue até IDE > Aparência
2. Adicione a imagem que deseja usar a uma Coleção à qual seu aplicativo tem acesso
3. Depois de adicionar a imagem, clique no ícone Abrir registro correspondente
4. Role até o campo URL relativo e clique no botão Copiar
5. Siga as instruções acima para "Para criar um tema de login personalizado"
6. Na etapa 12, insira a sintaxe copiada para a área de transferência para sua imagem hospedada. Será algo parecido /service/image/ImageID, onde ImageID representa o valor exclusivo copiado para sua área de transferência. Por exemplo: /service/image/2bc0d8a0-2cd7-4e8d-b074-eebfb1b9b6d2
7. Revise o valor do caminho da imagem e se não começar com ./ ajuste manualmente conforme necessário
8. Entre em Ajuda Técnica e Salve

Exemplos Adicionais de Personalização¶

Muitas áreas do formulário de Login podem ser personalizadas, além do logotipo descrito anteriormente. Para personalizar outras áreas do formulário de Login, você pode aproveitar os diferentes estilos de Componentes – Subcomponentes disponíveis na área Aparência > Temas do Vinyl. Alguns exemplos são descritos abaixo.

Aspectos avançados de personalização podem exigir que você trabalhe com interfaces de tema personalizadas. Por exemplo, se você deseja direcionar um, mas não todos os botões que aparecem no formulário de login, você pode escrever uma interface personalizada para direcionar apenas um dos botões.

Direcione o Cabeçalho do Formulário de Login¶

1. Navegue até o tema de login personalizado definido para o seu formulário de login
2. Selecione Formulário de login no painel Componentes
3. Clique em + Estilo no painel Estilos
4. Selecione Cabeçalho do formulário de login como Área
5. Selecione o Tipo de estilo apropriado para a personalização. Por exemplo: "Cor de fundo" se você deseja alterar a cor da região

6. Forneça as informações de Valor apropriadas. Por exemplo: darkviolet

   1. Se o seu tema tiver cores primárias, secundárias e complementares definidas, pode ser necessário anexar !important ao Valor. Por exemplo: darkviolet!important

7. Clique em Salvar

8. Saia do Vinyl e atualize seu navegador para testar os resultados

Direcione o Botão de Login¶

1. Navegue até o tema de login personalizado definido para o seu formulário de login
2. Selecione o formulário Controles no painel Componentes
3. Clique em + Estilo no painel Estilos
4. Selecione Botão como Área
5. Selecione Tipo de estilo conforme apropriado para personalização. Por exemplo: "Cor de fundo" se você deseja alterar a cor da região

6. Forneça as informações de Valor apropriadas. Por exemplo: #ffa500

   1. Se o seu tema tiver cores primárias, secundárias e complementares definidas, pode ser necessário anexar !important ao Valor. Por exemplo: #ffa500!important

7. Clique em Salvar

8. Saia do Vinyl e atualize seu navegador para testar os resultados

Direcione os Controles do Formulário¶

1. Navegue até o tema de login personalizado definido para o seu formulário de login
2. Selecione Controles no painel Componentes
3. Clique em + Estilo no painel Estilos
4. Selecione Controle de formulário como Área
5. Selecione Tipo de estilo conforme apropriado para personalização. Por exemplo: "Cor de fundo" se você deseja alterar a cor da região

6. Forneça as informações de Valor apropriadas. Por exemplo: #ffff60

   1. Se o seu tema tiver cores primárias, secundárias e complementares definidas, pode ser necessário anexar !important ao Valor. Por exemplo: #ffff60!important

7. Clique em Salvar

8. Saia do Vinyl e atualize seu navegador para testar os resultados