Como Criar e Personalizar uma Página de Conexão

Nesta seção:

Ao utilizar um processo com três etapas, você pode criar e personalizar uma página para conexão específica para sua empresa ou organização. As três etapas são:

  1. Construir e Habilitar a Nova Página para Conexão Personalizada
  2. Como Configurar os Rótulos de Texto
  3. Como Editar o Arquivo CSS para Elementos de Posição e da Página de Estilo

Estas etapas estão descritas em mais detalhes no Centro do Suporte Técnico. Para obter informações específicas e orientação sobre como criar uma página para conexão única, consulte https://techsupport.informationbuilders.com


Topo da página

x
Construir e Habilitar a Nova Página para Conexão Personalizada

Como:

A página para conexão personalizada e compacta, como ilustrado na imagem a seguir, consiste de uma imagem de plano de fundo que contém uma caixa de diálogo para as credenciais de conexão.

A imagem de plano de fundo é centralizada em uma classe div, fornecendo espaço em volta da imagem. Para construir sua página, consulte Como Construir a Página.



x
Procedimento: Como Construir a Página
  1. Decida se você irá usar uma imagem de plano de fundo, uma cor (sólida ou gradiente) ou ambas.
  2. Crie uma maquete no software de edição de imagem que suporte arquivos PNG com camadas, como o Adobe® Fireworks® ou o Adobe® Photoshop®, respectivamente. O Open Source Software GIMP pode ser utilizado para editar arquivos .psd.
    1. Abra a imagem de exemplo com múltiplas camadas fornecida.
    2. Substitua a imagem de plano de fundo na camada Plano de Fundo Personalizado pela imagem ou cor(es) de sua escolha.
    3. Configure a transparência alfa para a porcentagem desejada.

      Observação: Nem todas as imagens necessitam de configuração de transparência alfa. Geralmente, o valor se encontra entre 50% e 75%.

    4. Se necessário, redimensione a tela para encaixar sua imagem.
    5. Personalizar o Formulário, como descrito em Como Personalizar o Formulário.
    6. Exporte sua imagem como .gif ou .png para preservar a transparência.
    7. Coloque sua imagem em \ibi\WebFOCUS81\config\web_resource\signin\images.


x
Procedimento: Como Personalizar o Formulário
  1. Para o plano de fundo do formulário:
    1. Altere a cor do plano de fundo do objeto Plano de Fundo da Área do Formulário na Camada de Formulário para combinar com o seu esquema de cores.
    2. Posicione o plano de fundo da forma que desejar. Dependendo do texto editado na próxima etapa, você poderá precisar redimensionar esta caixa.
  2. Para os elementos do formulário:
    1. Determine se o recurso Lembrar de Mim será utilizado na sua instalação. Se isto acontecer, ative o elemento Lembrar na Camada de Formulário.
    2. Altere o texto, conforme necessário, na Camada Formulário.
    3. Crie o estilo de todos os elementos de formulário e os posicione na camada Formulário.
  3. Para a mensagem de erro:
    1. Ative a subcamada de mensagens de erro.
    2. Crie o estilo do texto e plano de fundo das mensagens de erro e os posicione.
  4. Desative a Camada Formulário, já que estes itens serão gerados na hora da execução.


x
Procedimento: Como Habilitar a Nova Página Personalizada de Conexão

A última etapa é ativar a nova página criada por você. Utilize as etapas a seguir para completar esta tarefa.

  1. Conecte-se ao WebFOCUS com uma conta administrativa.
  2. Inicie o Console Administrativo WebFOCUS.
  3. Clique em Configuração e, em seguida, Configurações do Aplicativo.
  4. Clique em Segurança.
  5. Configure IBI_Customized_Signin_Page como verdade, como ilustrado na imagem a seguir.

  6. Clique em Salvar.
  7. Desconecte-se do WebFOCUS.

Topo da página

x
Como Configurar os Rótulos de Texto

Como:

O WebFOCUS fornece a possibilidade de se alterar o texto de todos os rótulos na página Conecte-se. O programa também oferece a possibilidade de inclusão de até dois links personalizados na barra de menu.



x
Procedimento: Como Configurar Texto e Links
  1. Vá para \ibi\WebFOCUS81\config\web_resource\signing\.
  2. Em um editor de texto, como o Notepad ++, edite o arquivo customsignin.xml.
  3. Altere o texto dos elementos desejados.

    As tabelas a seguir fornecem o elemento, o nome da tag XML e o valor padrão para este elemento (que pode ser alterado). O valor inserido por você não inclui o wrapper CDATA do XML.

    Observação: Caso você não queira ver suas alterações nesta seção ou na seção CSS entrando em vigor, pode ser necessário limpar o cache do seu navegador.

    Elementos da Página Principal

    Tag XML

    Valor Padrão

    Título da Página

    <signin_custom_page_title>

    Conecte-se ao Portal de BI

    Texto do Item 1 do Menu

    <signin_menu_button1>

    menu1

    Link do Item 1 do Menu

    <signin_menu_button1_link>

    http://www.informationbuilders.com/

    Texto do Item 2 do Menu

    <signin_menu_button2>

    menu2

    Link do Item 2 do Menu

    <signin_menu_button2_link>

    http://www.informationbuilders.com/

    Título do Quadro (Área do Formulário)

    <signin_custom_frame_title>

    Conecte-se ao Portal de BI

    Rótulo do Nome do Usuário

    <signin_user_name_label>

    Nome Usuário:

    Rótulo da Senha

    <signin_password_label>

    Senha:

    Texto do botão Conectar

    <signin_button>

    Conectar

    Opção Lembrar Senha

    <remember_me_checkbox>

    Lembrar-me neste computador

    Elementos de Diálogo de Alteração de Senha

    Tag XML

    Valor Padrão

    Texto do Título

    <signin_custom_change_password_frame_title>

    Alterar a Senha

    Rótulo do Nome do Usuário

    <signin_change_password_user_name_label>

    Nome Usuário

    Antiga do Rótulo da Senha

    <signin_change_password_old_password_label>

    Senha Antiga

    Novo Rótulo da Senha

    <signin_change_password_new_password_label>

    Nova Senha

    Confirmar Senha Rótulo

    <signin_change_password_confirm_password_label>

    Confirmar Nova Senha

    Texto do botão Conectar

    <signin_change_password_sigin_button>

    Conectar

    texto do Botão Cancelar

    <signin_change_password_cancel_button>

    Cancelar

    Elementos de Diálogo Já Conectados

    Tag XML

    Valor Padrão

    Texto do Título

    <signin_custom_user-already-signin_frame_title>

    Usuário já está conectado

    Texto da Mensagem

    <signin_custom_user-already-signin_message>

    Já existe uma sessão ativa para este usuário. Gostaria de continuar a conexão e cancelar a outra sessão?



x
Como Editar o Arquivo CSS para Elementos de Posição e da Página de Estilo

Como:

Você tem muita flexibilidade ao construir a página personalizada para conexão. A criação do estilo e o posicionamento são feitos exclusivamente no CSS.



x
Procedimento: Como Editar o CSS
  1. Vá para \ibi\WebFOCUS81\config\web_resource\signin\
  2. Em um editor de texto, como o Notepad ++, edite o arquivo customsignin.css.
  3. Edite os elementos desejados.

    Comunicado:

    • Para testar em qualquer momento, salve seu trabalho e vá para
      http://server:port/ibi_apps/
    • Certifique-se de que o zoom do seu navegador está em 100%.
    • O posicionamento e a formatação do estilo das informações de todos os elementos podem ser obtidos através da seleção do elemento correspondente dentro do seu software de edição de imagens. É possível que você precise ajustar levemente o posicionamento.
    • As URLs de imagem são relativas ao diretório que contém o arquivo CSS (\ibi\WebFOCUS81\config\web_resource\signin\). A URL para este diretório é
      http://server:port/ibi_apps/web_resource/signin.

    A tabela a seguir fornece os elementos que você pode editar, o nome de suas classes CSS e os atributos sugeridos que você pode desejar alterar.

    Elementos da Página Principal

    Classse CSS ou Tag HTML

    Sugestões de Alterações

    Cor do Plano de Fundo

    corpo, html

    Gradiente ou Sólido:

    • Matiz
      • Substitua todas as ocorrências de #064e96 pela sua cor inicial.
      • Substitua todas as ocorrências de #7200e pela sua cor final.
    • Sólida
      • Exclua as últimas oito linhas de código no corpo (classe html), que dizem:
      • background: -webkit-gradient(linear, 0 0, 0 100%, from(#064e96) to(#ff7200)); /*old webkit*/ background: -webkit-linear-gradient(#064e96, #ff7200); /*new webkit*/background: -moz-linear-gradient(#064e96, #ff7200); /*gecko*/

    Cor do Plano de Fundo da Página (continuação)

    corpo, html (continuação)

    • Sólida (continuação)

      • background: -ms-linear-gradient(#064e96, #ff7200); /*IE10*/background: -o-linear-gradient(#064e96, #ff7200); /*opera 11.10+*/ background: linear-gradient(#064e96, #ff7200); /*future CSS3 browsers*/ -pie-background: linear-gradient(#064e96, #ff7200);behavior: url(web_resource/signin/PIE.htc);

      • Altere a cor no atributo de plano de fundo remanescente de acordo com a sua preferência.

    Imagem do Plano de fundo

    .signin-background-image

    • Altere a imagem
    • Defina a largura da imagem
    • Defina a altura da imagem

    .signin-box

    • Defina a largura da imagem
    • Defina a altura da imagem

    Observação: O topo e a esquerda podem ser utilizados para centralizar a imagem e todos os controles, se desejado.

    Posição da Barra de Menu

    .signin-custom-menu-bar-position

    • Defina o topo
    • Defina a esquerda

    Estilo da Barra de Menu

    .signin-custom-menu-bar

    • Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Estilo dos Separadores da Barra de Menu

    .signin-menu-bar-separator

    • Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.
    • Para ocultar o separador, configura a cor como transparente.

    Posição do Título do Quadro

    .signin-custom-frame-title

    • Defina o topo
    • Defina a esquerda

    Estilo do Título do Quadro

    .signin-custom-frame-label

    • Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Posição do Rótulo do Nome do Usuário

    .signin-custom-username-label-position

    • Defina o topo
    • Defina a esquerda

    Estilo do Rótulo do Nome do Usuário

    .signin-custom-username-label

    • Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Posição do Controle de Saída do nome de Usuário

    .signin-custom-username-editbox

    • Defina o topo
    • Defina a esquerda

    Estilo do Controle de Saída do nome de Usuário

    .signin-custom-username-editbox-input

    • Isto controla o estilo. As cores de plano de fundo devem ser aplicadas aqui.

    Posição do Rótulo da Senha

    .signin-custom-password-label-position

    • Defina o topo
    • Defina a esquerda

    Estilo do Rótulo da Senha

    .signin-custom-password-label

    • Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Posição do Controle de Entrada de Senha

    .signin-custom-password-editbox

    • Defina o topo
    • Defina a esquerda

    Estilo do Controle de Entrada de Senha

    .signin-custom-password-editbox-input

    • Isto controla o estilo. As cores de plano de fundo devem ser aplicadas aqui.

    Posição da Opção Lembrar Senha

    .signin-custom-remember-me-position

    • Defina o topo
    • Defina a esquerda

    Estilo da Opção Lembrar Senha

    signin-custom-remember-me

    Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Estilo do Rótulo do Botão Conectar

    .signin-button-label

    Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Posição do Botão Conectar

    .signin-custom-button-signin-position

    • Defina o topo
    • Defina a esquerda

    Estilo do Botão Conectar

    .signin-custom-button-signin

    • Configure o raio, tamanho e cor da borda.
    • Configure a fonte

    .signin-button, .button

     

    Observação: Caso você precise redimensionar qualquer objeto, utilize a mesma classe na qual você estabeleceu a posição.

    Elementos de Mensagens de Erros

    Classse CSS ou Tag HTML

    Sugestões de Alterações

    Posição da Mensagem de Erro

    .signin-custom-error-position

    • Defina o topo
    • Defina a esquerda

    Estilo da Mensagem de Erro

    .signin-custom-error-message

    • Defina o estilo desejado, como o raio da borda, a família da fonte, tamanho, cor, etc.

    Imagem da Mensagem de Erro

    .signin-custom-error-image

    • Defina a imagem
    • Remova o comentário de :visibilidade: oculta; linha para ocultar a imagem, mas mantenha o espaço necessário. Exibição de uso: nenhuma; para remover a imagem, incluindo o espaço que ocupa.

    O estilo dos elementos nas duas tabelas a seguir são herdados dos elementos da página principal. Isto significa que os botões, rótulos e controles correspondem à página principal.

    Elementos de Diálogo de Alteração de Senha

    Classse CSS ou Tag HTML

    Sugestões de Alterações

    Estilo e Posição da Caixa de Diálogo

    .signin-custom-change-password-position

    • Defina o topo
    • Defina a esquerda
    • Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Barra de Título da Caixa de Diálogo

    .signin-custom-change-password-title-position

    • Defina a cor do plano de fundo

    Rótulo do Título da Caixa de Diálogo

    .signin-custom-change-password-title-label

    Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Ícone do Título da Caixa de Diálogo

    .signin-custom-change-password-title-image

    Defina a imagem.

    Posição do Rótulo do Nome do Usuário

    .signin-custom-change-password_username-label-position

    • Defina o topo
    • Defina a esquerda

    Posição do Controle de Saída do nome de Usuário

    .signin-custom-change-password_username-editbox-position

    • Defina o topo
    • Defina a esquerda

    Posição Antiga do Rótulo da Senha

    .signin-custom-change-password_old-password-label-position

    • Defina o topo
    • Defina a esquerda

    Posição Antiga do Controle de Entrada de Senha

    .signin-custom-change-password_old-password-editbox-position

    • Defina o topo
    • Defina a esquerda

    Nova Posição do Rótulo da Senha

    .signin-custom-change-password_new-password-label-position

    • Defina o topo
    • Defina a esquerda

    Posição de Controle de Entrada de Nova Senha

    .signin-custom-change-password_new-password-editbox-position

    • Defina o topo
    • Defina a esquerda

    Confirmar Nova Posição do Rótulo da Senha

    .signin-custom-change-password_confirm-password-label-position

    • Defina o topo
    • Defina a esquerda

    Confirmar Posição de Controle de Entrada de Nova Senha

    .signin-custom-change-password_confirm-password-editbox-position

    • Defina o topo
    • Defina a esquerda

    Confirmar Posição de Controle de Entrada de Nova Senha

    .signin-custom-change-password_confirm-password-editbox-position

    • Defina o topo
    • Defina a esquerda

    Posição do Botão Conectar

    .signin-custom-change-password-button-signin-position

    • Defina o topo
    • Defina a esquerda

    Posição do Botão Cancelar

    .signin-custom-change-password-button-cancel-position

    • Defina o topo
    • Defina a esquerda

    Elementos de Diálogo Usuário Já Conectado

    Classse CSS ou Tag HTML

    Sugestões de Alterações

    Estilo e Posição da Caixa de Diálogo

    .signin-custom-user-already-signin-position

    • Defina o topo
    • Defina a esquerda
    • Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.

    Rótulo do Título da Caixa de Diálogo

    .signin-custom-user-already-signin-label-position

    • Defina o estilo desejado, como a família da fonte, tamanho, cor, etc.
    • Você pode desejar ajustar à esquerda caso não use um ícone.

    Ícone do Título da Caixa de Diálogo

    .signin-custom-user-already-signin-title-image

    • Defina a imagem
    • Exclua a visibilidade: oculta; linha para exibir a imagem.

    Posição do Botão Conectar

    .signin-custom-user-already-signin-button-signin-position

    • Defina o topo
    • Defina a esquerda

    Posição do Botão Cancelar

    .signin-custom-user-already-signin-button-cancel-position

    • Defina o topo
    • Defina a esquerda


x
Procedimento: Como Configurar os Rótulos de Texto

As informações a seguir são um guia, utilizando a imagem de exemplo, para a implementação de uma página personalizada para conexão. Presume-se que você já tenha passado pelas etapas de construção e ativação.

  1. Vá para \ibi\WebFOCUS81\config\web_resource\signin\.
  2. Em um editor de texto, como o Notepad ++, edite o arquivo customsignin.xml.
  3. Altere o texto dos elementos a seguir.

    Observação: A tabela a seguir exibe somente os elementos que foram alterados no exemplo. Insira o valor exibido na coluna Valor de Exemplo no arquivo XML.

    Elementos da Página Principal

    Tag XML

    Valor de Exemplo

    Título da Página

    <signin_custom_page_title>

    Conexão com a Information Builders

    Texto do Item 1 do Menu

    <signin_menu_button1>

    Summit 2013

    Link do Item 1 do Menu

    <signin_menu_button1_link>

    http://www.informationbuilders.com/summit

    Texto do Item 2 do Menu

    <signin_menu_button2>

    IBI

    Título do Quadro (Área do Formulário)

    <signin_custom_frame_title>

    Conexão com a Information Builders

    Rótulo do Nome do Usuário

    <signin_user_name_label>

    Nome do Cliente

    Rótulo da Senha

    <signin_password_label>

    Senha

    Opção Lembrar Senha

    <remember_me_checkbox>

    Lembre-me

    Observação: A opção Lembrar Senha não está ativada por padrão, mas está configurada nos arquivos de exemplo, caso você a ative.

    Altere Elementos de Diálogo

    Tag XML

    Valor de Exemplo

    Rótulo do Nome do Usuário

    <signin_change_password_user_name_label>

    Nome do Cliente:

  4. Inicie o WebFOCUS em um navegador. A seguinte imagem será exibida:



x
Procedimento: Como Editar o Arquivo CSS
  1. Vá para \ibi\WebFOCUS81\config\web_resource\signin\.
  2. Em um editor de texto, como o Notepad ++, edite o arquivo customsignin.css.
  3. Edite os elementos desejados.

    Comunicado:

    • Para testar em qualquer momento, salve seu trabalho e vá para
      http://server:port/ibi_apps/
    • Certifique-se de que o zoom do seu navegador está em 100%.
    • O posicionamento e a formatação do estilo das informações de todos os elementos podem ser obtidos através da seleção do elemento correspondente dentro do seu software de edição de imagens. É possível que você precise ajustar levemente o posicionamento.
    • As URLs de imagem são relativas ao diretório que contém o arquivo CSS (\ibi\WebFOCUS80\config\web_resource\signin\). A URL para este diretório é
      http://server:port/ibi_apps/web_resource/signin.

    As tabelas a seguir contêm as alterações que você precisa fazer para criar o estilo da página Conecte-se e duas caixas de diálogo. Antes de cada tabela há uma captura de tela do que você deve visualizar ao concluir as alterações.

    Elementos da Página Principal

    Classse CSS ou Tag HTML

    Valores a serem Adicionados, Alterados ou Excluídos

    Cor do Plano de Fundo

    corpo, html

    plano de fundo: #000000;

    Exclua todas as linhas gradientes.

    Imagem do Plano de fundo

    .signin-background-image

    background-image: url("images/customsignin.gif");

    largura: 960px;

    altura: 638px;

    .signin-box

    largura: 960px;

    altura: 638px;

    Posição da Barra de Menu

    .signin-custom-menu-bar-position

    topo: 220px;

    esquerda: 475px;

    Estilo da Barra de Menu

    .signin-custom-menu-bar

    cor: #ffffff;

    fonte: 11px Tahoma, Verdana, Arial, Sans-Serif;

    Estilo dos Separadores da Barra de Menu

    .signin-menu-bar-separator

    cor: #ffffff;

    Esta classe está localizada na parte inferior do arquivo CSS.

    Posição do Título do Quadro

    .signin-custom-frame-title

    topo: 245px;

    esquerda: 370px;

    Estilo do Título do Quadro

    .signin-custom-frame-label

    cor: #ffffff;

    Posição do Rótulo do Nome do Usuário

    .signin-custom-username-label-position

    text-align: esquerda;

    topo: 275px;

    esquerda: 370px;

    Nome Usuário

    .signin-custom-

    cor: #ffffff;

    Posição do Controle de Saída do nome de Usuário

    .signin-custom-username-editbox

    largura: 221px;

    topo: 295px;

    esquerda: 370px;

    Observação: Para mostrar todas as bordas de forma adequada, a largura deve ser de pelo menos 5px.

    Estilo do Controle de Saída do nome de Usuário

    .signin-custom-username-editbox-input

    largura: 216px;

    Posição do Rótulo da Senha

    .signin-custom-password-label-position

    text-align: esquerda;

    topo: 330px;

    esquerda: 370px;

    Estilo do Rótulo da Senha

    .signin-custom-password-label

    cor: #ffffff;

    Exclua font-size:12px;

    Posição do Controle de Entrada de Senha

    .signin-custom-password-editbox

    largura: 221px;

    topo: 350px;

    esquerda: 370px;

    Observação: A largura é de 5px a mais que a do controle para mostrar todas as bordas.

    Estilo do Controle de Entrada de Senha

    .signin-custom-password-editbox-input

    largura: 216px;

    Posição da Opção Lembrar Senha

    .signin-custom-remember-me-position

    largura: 216px;

    topo: 388px;

    esquerda: 490px;

    Observação: O topo é de 2px ou menos do que o valor no desenho devido ao processo do HTML. A largura e a margem esquerda são correspondentes aos controles de entrada, como alinhamento de texto à direita para alinhar a margem direita.

    Estilo da Opção Lembrar Senha

    signin-custom-remember-me

    cor: #ffffff;

    font-size:12px;

    Posição do Botão Conectar

    .signin-custom-button-signin-position

    cor: #ffffff;

    Estilo do Botão Conectar

    .signin-custom-button-signin

    cor: #ffffff;

    borda: 1px solid #223AA7;

    border-radius: 10px;

    Estilo do Botão Conectar

    a.signin-custom-button-signin

    background-color: #223AA7;

    largura: 96px;

    Exclua a linha de plano de fundo.

    Exclua a linha de preenchimento à direita.

    a.signin-custom-button-signin span

    preenchimento: 3px 0px 3px 0px;

    Exclua a linha de altura de linha.



x
Mensagem de Erro

A imagem e a tabela a seguir fornecem informações sobre como resolver as mensagens de erro.

Elementos de Mensagens de Erros

Classse CSS ou Tag HTML

Sugestões de Alterações

Estilo do Plano de Fundo e Posição da Mensagem de Erro

.signin-custom-error-position

largura: 340px;

altura: 27px;

topo: 240px;

esquerda: 310px;

background-color: #ff0000;

borda: 1px solid #ff0000;

border-radius: 10px;

comportamento: url(web_resource/signin/PIE.htc);

Estilo do Texto e Posição da Mensagem de Erro

.signin-custom-error-message

cor: #ffffff;

font-size: 11px;

topo: 5px;

largura: 340px;

text-align: centralizado;

Exclua à esquerda: 20;

Observação: O topo é a diferença entre o topo da caixa e o topo do texto do seu software de edição de imagem. A largura aqui deve corresponder à largura da classe acima.

Imagem da Mensagem de Erro

.signin-custom-error-image

exibição: nenhum;

Observação: Isto foi feito paraque não haja imagem.

Observação: Caso você precise redimensionar qualquer objeto, utilize a mesma classe na qual você estabeleceu a posição.



x
Caixa de Diálogo Alterar Senha

A criação do estilo de elementos na caixa de diálogo Alterar Senha, assim como a caixa Já Conectado, é herdado dos elementos da página principal. Isto significa que os botões, rótulos e controles correspondem à página principal.

A imagem e a tabela a seguir fornecem informações sobre como alterar senhas.

Elementos de Diálogo de Alteração de Senha

Classse CSS ou Tag HTML

Sugestões de Alterações

Estilo e Posição da Caixa de Diálogo

.signin-custom-change-password-position

topo: 220px;

esquerda: 353px;

background-color: #565352;

cor: #ffffff;

borda: 1px, sólida, transparente;

border-radius:25px;

-webkit-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75);

-moz-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75);

box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75);

comportamento: url(web_resource/signin/PIE.htc);

Observação: A visibilidade: oculta; a linha terá que ser excluída, adicionada novamente ou transformada em comentários durante os testes.

Barra de Título da Caixa de Diálogo

.signin-custom-change-password-title-position

background-color: #223AA7;

Ícone do Título da Caixa de Diálogo

.signin-custom-change-password-title-image

visibilidade: oculta;

Posição do Botão Conectar

.signin-custom-change-password-button-signin-position

altura: 25px;

topo: 190px;

esquerda: 100px;

Posição do Botão Cancelar

.signin-custom-change-password-button-cancel-position

altura: 25px;

topo: 190px;

esquerda: 200px;



x
Caixa de Diálogo Já Conectados

A imagem e tabela a seguir fornecem informações sobre como trabalhar com a caixa de diálogo Já Conectado.

Elementos de Diálogo Já Conectados

Classse CSS ou Tag HTML

Sugestões de Alterações

Estilo e Posição da Caixa de Diálogo

.signin-custom-user-already-signin-position

altura: 130px;

topo: 305px;

esquerda: 332px;

background-color: #565352;

borda: 1px, sólida, transparente;

border-radius:25px;

-webkit-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75);

-moz-box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75);

box-shadow: 7px 7px 9px rgba(255, 255, 255, 0.75);

comportamento: url(web_resource/signin/PIE.htc);

Observação: A visibilidade: oculta; a linha terá que ser excluída, adicionada novamente ou transformada em comentários durante os testes.

Rótulo do Título da Caixa de Diálogo

.signin-custom-user-already-signin-label-position

largura: 270px;

cor: #ffffff;

Ícone do Título da Caixa de Diálogo

.signin-custom-user-already-signin-title-image

visibilidade: oculta;

Posição do Botão Conectar

.signin-custom-user-already-signin-button-signin-position

altura: 25px;

topo: 100px;

esquerda: 100px;

Posição do Botão Cancelar

.signin-custom-user-already-signin-button-cancel-position

altura: 25px;

topo: 100px;

esquerda: 200px;


WebFOCUS