Creazione e personalizzazione di una pagina di accesso

In questa sezione:

Utilizzando un procedimento a tre passaggi, è possibile creare e personalizzare una pagina di accesso specifica alla propria compagnia o organizzazione. I tre passaggi includono:

  1. Progettazione e abilitazione della nuova pagina di accesso personalizzato
  2. Impostazione delle etichette di testo
  3. Modifica del file CSS per posizionare e stilizzare gli elementi pagina

Queste passaggi vengono descritti in modo più dettagliato nel Centro Supporto Tecnico. Per informazioni specifiche sulla creazione di una pagina di accesso personalizzato, consultare https://techsupport.informationbuilders.com


Inizio pagina

x
Progettazione e abilitazione della nuova pagina di accesso personalizzato

Come:

La pagina di accesso personalizzato inclusa, come mostrato nella seguente immagine, è composta da una immagine di sfondo che contiene una finestra di dialogo per le credenziali di accesso.

L'immagine di sfondo è centrata in una classe div, fornendo dello spazio intorno all'immagine. Per progettare la propria pagina, consultare Come progettare una pagina.



x
Procedura: Come progettare una pagina
  1. Decidere se si utilizzerà una immagine di sfondo, un colore (solido o con sfumatura), o entrambi.
  2. Creare un modello nel software di modifica delle immagini che sia in grado di gestire file PSD e PNG a strati, come rispettivamente Adobe® Fireworks® o Adobe® Photoshop®. Il software GIMP di origine aperta può essere utilizzando per modificare il file .psd.
    1. Aprire l'esempio fornito dell'immagine multi-livelli.
    2. Sostituire l'immagine di sfondo nel livello di sfondo personalizzato con la propria immagine o colore/i.
    3. Impostare la trasparenza alfa alla percentuale desiderata.

      Nota: Non tutte le immagine richiedono di impostare la trasparenza alfa. Generalmente, il valore sarà tra 50-75%.

    4. Se necessario, ridimensionare l'area di disegno per far aderire la propria immagine.
    5. Personalizzare il modulo, come descritto in Come personalizzare il modulo.
    6. Esportare la propria immagine come un .gif o .png per preservare la trasparenza.
    7. Posizionare la propria immagine in \ibi\WebFOCUS81\config\web_resource\signin\images.


x
Procedura: Come personalizzare il modulo
  1. Per lo sfondo del modulo:
    1. Modificare il colore dello sfondo dell'oggetto di sfondo dell'area del modulo nel Livello modulo per adattarlo al proprio schema di colori.
    2. Posizionare lo sfondo del modulo a proprio piacimento. A seconda del testo che si modificherà nel prossimo passaggio, si potrebbe dover ridimensionare questa casella.
  2. Per gli elementi del modulo:
    1. Determinare se la funzione Memorizza profilo utente viene utilizzata o meno sulla propria installazione. Se si decide di utilizzarla, attivare l'elemento Memorizza nel Livello modulo.
    2. Se necessario, modificare il testo nel Livello modulo.
    3. Stilizzare e posizionare tutti gli elementi del modulo nel Livello modulo.
  3. Per messaggi di errore:
    1. Attivare il sotto-livello dei messaggi di errore.
    2. Stilizzare e posizionare il testo e lo sfondo dei messaggi di errore.
  4. Disattivare il Livello modulo, in quanto questi elementi verranno generati durante l'esecuzione.


x
Procedura: Come abilitare la nuova pagina di accesso personalizzato

L'ultimo passaggio è quello di abilitare la nuova pagina creata. Utilizzare i seguenti passaggi per completare questa attività.

  1. Accedere a WebFOCUS con l'account amministrativo.
  2. Avviare la console di gestione di WebFOCUS.
  3. Fare clic su Configurazione e quindi su Impostazioni applicazione.
  4. Fare clic su Protezione.
  5. Impostare IBI_Customized_Signin_Page su true, come illustrato nella seguente immagine.

  6. Fare clic su Salva.
  7. Effettuare la disconnessione da WebFOCUS.

Inizio pagina

x
Impostazione delle etichette di testo

Come:

WebFOCUS fornisce l'abilità di modificare il testo di tutte le etichette sulla pagina di accesso. Inoltre, fornisce l'abilità di includere fino a due collegamenti personalizzati nella barra dei menu.



x
Procedura: Come impostare il testo ed i collegamenti
  1. Andare a \ibi\WebFOCUS81\config\web_resource\signing\.
  2. In un editor di testo, come Notepad ++, modificare il file customsignin.xml.
  3. Modificare il testo negli elementi desiderati.

    Le seguenti tabelle forniscono l'elemento, nome tag XML, e il valore predefinito per quell'elemento (che può essere modificato). Il valore immesso non include il wrapper XML CDATA.

    Nota: Se non si vedono le proprie modifiche in questa sezione o nella sezione CSS, si potrebbe dover cancellare la cache nel proprio browser.

    Elementi pagina principale

    Tag XML

    Valore predefinito

    Titolo pagina

    <signin_custom_page_title>

    Accesso al Portale BI

    Elemento Testo 1 del menu

    <signin_menu_button1>

    menu1

    Elemento Collegamento 1 del menu

    <signin_menu_button1_link>

    http://www.informationbuilders.com/

    Elemento Testo 2 del menu

    <signin_menu_button2>

    menu2

    Elemento Collegamento 2 del menu

    <signin_menu_button2_link>

    http://www.informationbuilders.com/

    Titolo cornice (Area modulo)

    <signin_custom_frame_title>

    Accesso al Portale BI

    Etichetta nome utente

    <signin_user_name_label>

    Nome Utente:

    Etichetta parola d'ordine

    <signin_password_label>

    Parola d'ordine:

    Testo del pulsante Accedi

    <signin_button>

    Accedi

    Opzione Memorizza profilo utente

    <remember_me_checkbox>

    Memorizza profilo utente su questo computer

    Modifica degli elementi della finestra di dialogo Parola d'ordine

    Tag XML

    Valore predefinito

    Testo del titolo

    <signin_custom_change_password_frame_title>

    cambiare parola d'ordine

    Etichetta nome utente

    <signin_change_password_user_name_label>

    Nome Utente

    Etichetta vecchia parola d'ordine

    <signin_change_password_old_password_label>

    Vecchia parola d'ordine

    Etichetta nuova parola d'ordine

    <signin_change_password_new_password_label>

    Nuova parola d'ordine

    Conferma parola d'ordine Etichetta

    <signin_change_password_confirm_password_label>

    Conferma nuova parola d'ordine

    Testo del pulsante Accedi

    <signin_change_password_sigin_button>

    Accedi

    Testo del pulsante Annulla

    <signin_change_password_cancel_button>

    Annulla

    Effettuato già l'accesso negli elementi della finestra di dialogo

    Tag XML

    Valore predefinito

    Testo del titolo

    <signin_custom_user-already-signin_frame_title>

    L'utente ha già effettuato l'accesso

    Testo messaggio

    <signin_custom_user-already-signin_message>

    Esiste già una sessione attiva per questo utente. Continuare con l'accesso e annullare l'altra sessione?



x
Modifica del file CSS per posizionare e stilizzare gli elementi pagina

Come:

Si ha molta flessibilità quando si esegue il layout della pagina di accesso personalizzato. Le operazioni di stilizzazione e posizionamento vengono eseguiti esclusivamente in CSS.



x
Procedura: Come modificare CSS
  1. Andare a \ibi\WebFOCUS81\config\web_resource\signin\
  2. In un editor di testo, come Notepad ++, modificare il file customsignin.css.
  3. Modificare gli elementi desiderati.

    Nota:

    • Per effettuare una verifica in qualsiasi momento, salvare e andare a
      http://server:port/ibi_apps/
    • Assicurarsi che lo zoom del proprio browser sia al 100%.
    • È possibile ottenere le informazioni di stilizzazione e posizionamento per tutti gli elementi selezionando l'elemento corrispondente all'interno del proprio software di modifica delle immagini. Si potrebbe dover adattare leggermente la posizione.
    • Gli URL immagini sono relativi alla directory contenente il file CSS (\ibi\WebFOCUS81\config\web_resource\signin\). L'URL di quella directory è
      http://server:port/ibi_apps/web_resource/signin.

    La seguente tabella fornisce gli elementi da poter modificare, il loro nome classe CSS e gli attributi suggeriti che si desidera modificare.

    Elementi pagina principale

    Classe CSS e Tag HTML

    Modifiche suggerite

    Colore dello sfondo pagina

    corpo, html

    Colore solido o sfumatura:

    • Sfumatura
      • Sostituire tutte le istanze di #064e96 con il colore di inizio.
      • Sostituire tutte le istanze di #ff7200 con il colore finale.
    • Continuo
      • Cancellare le ultime otto linee del codice nel corpo, classe html, che legge:
      • 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*/

    Colore sfondo pagina (continuo)

    corpo, html (continuo)

    • Solido (continuo)

      • 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);

      • Modificare il colore dell'attributo rimanente dello sfondo nel colore desiderato.

    Accesso immagine dello sfondo

    .signin-background-image

    • cambiare immagine
    • Impostazione della larghezza dell'immagine
    • Impostazione dell'altezza dell'immagine

    .signin-box

    • Impostazione della larghezza dell'immagine
    • Impostazione dell'altezza dell'immagine

    Nota: Se si desidera, i comandi In alto e A sinistra possono essere usati relativamente per centrare l'immagine e tutti i controlli.

    Posizione della barra dei menu

    .signin-custom-menu-bar-position

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Stile della barra dei menu

    .signin-custom-menu-bar

    • Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Scheda Stile della barra dei menu

    .signin-menu-bar-separator

    • Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.
    • Per nascondere il separatore, impostare il colore su trasparente.

    Posizione del titolo della cornice

    .signin-custom-frame-title

    • Impostazione del comando In Alto
    • Impostazione del comando A sinistra

    Stile del titolo della cornice

    .signin-custom-frame-label

    • Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Posizione dell'etichetta del nome utente

    .signin-custom-username-label-position

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Stile dell'etichetta del nome utente

    .signin-custom-username-label

    • Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Posizione del controllo dell'immissione del nome utente

    .signin-custom-username-editbox

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Stile del controllo dell'immissione del nome utente

    .signin-custom-username-editbox-input

    • Questa funzione controlla lo stile, bisognerebbe applicare qui i colori dello sfondo.

    Posizione etichetta della parola d'ordine

    .signin-custom-password-label-position

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Stile etichetta della parola d'ordine

    .signin-custom-password-label

    • Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Posizione del controllo dell'immissione della parola d'ordine

    .signin-custom-password-editbox

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Stile del controllo dell'immissione della parola d'ordine

    .signin-custom-password-editbox-input

    • Questa funzione controlla lo stile, bisognerebbe applicare qui i colori dello sfondo.

    Posizione dell'opzione Memorizza profilo utente

    .signin-custom-remember-me-position

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Stile dell'opzione Memorizza profilo utente

    signin-custom-remember-me

    Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Stile dell'etichetta del pulsante Accedi

    .signin-button-label

    Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Posizione del pulsante Accedi

    .signin-custom-button-signin-position

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Stile del pulsante Accedi

    .signin-custom-button-signin

    • Impostazione del raggio, della dimensione e del colore
    • Impostazione del font

    .signin-button, .button

     

    Nota: Se bisogna ridimensionare un oggetto qualsiasi, utilizzare la stessa classe su cui si è impostata la posizione.

    Elementi messaggio di errore

    Classe CSS o Tag HTML

    Modifiche suggerite

    Posizione del messaggio di errore

    .signin-custom-error-position

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Stile del messaggio di errore

    .signin-custom-error-message

    • Impostare lo stile desiderato, come il raggio del bordo, la famiglia, la dimensione, il colore, etc.

    Immagine del messaggio di errore

    .signin-custom-error-image

    • Impostazione dell'immagine
    • Decommentare :visibilità: nascosto; allineare per nascondere l'immagine, ma lasciare lo spazio necessario. Utilizzare la visualizzazione: nessuno; per rimuovere l'immagine, includendo lo spazio che occupa.

    Lo stile degli elementi nelle seguenti due tabelle vengono ineritate dagli elementi della pagina principale. Questo significa che i pulsanti, le etichette ed i controlli corrispondono alla pagina principale.

    Elementi della finestra di dialogo Modifica parola d'ordine

    Classe CSS o Tag HTML

    Modifiche suggerite

    Posizione e stile della finestra di dialogo

    .signin-custom-change-password-position

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra
    • Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Barra del titolo della finestra di dialogo

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

    • Impostazione del colore di sfondo

    Etichetta de titolo della finestra di dialogo

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

    Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Icona del titolo della finestra di dialogo

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

    Impostare l'immagine.

    Posizione dell'etichetta del nome utente

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione del controllo dell'immissione del nome utente

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione dell'etichetta della vecchia parola d'ordine

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione del controllo dell'immissione della vecchia parola d'ordine

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione dell'etichetta della nuova parola d'ordine

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione del controllo dell'immissione della nuova parola d'ordine

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione dell'etichetta della conferma della nuova parola d'ordine

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione del controllo dell'immissione della conferma della nuova parola d'ordine

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione del controllo dell'immissione della conferma della nuova parola d'ordine

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione del pulsante Accedi

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione del pulsante Annulla

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    L'utente ha già effettuato l'accesso negli elementi della finestra di dialogo

    Classe CSS o Tag HTML

    Modifiche suggerite

    Posizione e stile della finestra di dialogo

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra
    • Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.

    Etichetta del titolo della finestra di dialogo

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

    • Impostare lo stile desiderato, come la famiglia, la dimensione, il colore etc.
    • Si potrebbe voler giustificare a sinistra se non si utilizza l'icona.

    Icona del titolo della finestra di dialogo

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

    • Impostazione dell'immagine
    • Cancellare la visibilità: nascosto; allineare per mostrare l'immagine.

    Posizione del pulsante Accedi

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra

    Posizione del pulsante Annulla

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

    • Impostazione del comando In alto
    • Impostazione del comando A sinistra


x
Procedura: Come impostare le etichette testo

La seguente è una spiegazione esauriente, utilizzando l'immagine di esempio, per implementare una pagina di accesso personalizzato. Tale spiegazione assume che sono già stati effettuati i passaggi di progettazione o abilitazione.

  1. Andare a \ibi\WebFOCUS81\config\web_resource\signin\.
  2. In un editor di testo, come Notepad++, modificare il file customsignin.xml.
  3. Modificare il testo nei seguenti elementi.

    Nota: La seguente tabella illustra solamente gli elementi modificati nell'esempio. Immettere il valore mostrato nella colonna di valore Esempio nel file XML.

    Elementi pagina principale

    Tag XML

    Valore di esempio

    Titolo pagina

    <signin_custom_page_title>

    Accedi ad Information Builders

    Elemento Testo 1 del menu

    <signin_menu_button1>

    Summit 2013

    Elemento Collegamento 1 del menu

    <signin_menu_button1_link>

    http://www.informationbuilders.com/summit

    Elemento Testo 2 del menu

    <signin_menu_button2>

    IBI

    Titolo Cornice (area del modulo)

    <signin_custom_frame_title>

    Accedi ad Information Builders

    Etichetta nome utente

    <signin_user_name_label>

    Nome cliente

    Etichetta parola d'ordine

    <signin_password_label>

    Parola d'ordine

    Opzione Memorizza profilo utente

    <remember_me_checkbox>

    Memorizza profilo utente

    Nota: L'opzione Memorizza profilo utente non è abilitata per impostazione predefinita, ma viene imposta nei file di esempio, in caso si decida di abilitarla.

    Elementi Modifica finestra di dialogo

    Tag XML

    Valore di esempio

    Etichetta nome utente

    <signin_change_password_user_name_label>

    Nome cliente:

  4. Avviare WebFOCUS in un browser. Viene visualizzata l'immagine seguente:



x
Procedura: Come modificare il file CSS
  1. Andare a \ibi\WebFOCUS81\config\web_resource\signin\.
  2. In un editor di testo, come Notepad ++, modificare il file customsignin.css.
  3. Modificare gli elementi desiderati.

    Nota:

    • Per effettuare una verifica in qualsiasi momento, salvare e andare a
      http://server:port/ibi_apps/
    • Assicurarsi che lo zoom del proprio browser sia al 100%.
    • È possibile ottenere le informazioni di stilizzazione e posizionamento per tutti gli elementi selezionando l'elemento corrispondente all'interno del proprio software di modifica delle immagini. Si potrebbe dover adattare leggermente la posizione.
    • Gli URL immagini sono relativi alla directory contenente il file CSS (\ibi\WebFOCUS80\config\web_resource\signin\). L'URL di quella directory è
      http://server:port/ibi_apps/web_resource/signin.

    Le seguenti tabelle contengono le modifiche necessarie per stilizzare la pagina di accesso in due finestre di dialogo. Ciascuna tabella è prima una schermata rappresentante quello che si dovrebbe visualizzare dopo aver completato le modifiche.

    Elementi pagina principale

    Classe CSS o Tag HTML

    Valori da aggiungere, modificare o cancellare

    Colore dello sfondo pagina

    corpo, html

    sfondo: #000000;

    Cancellare tutte le linee sfumate.

    Accesso immagine dello sfondo

    .signin-background-image

    immagine-sfondo: url("images/customsignin.gif");

    larghezza: 960px;

    altezza: 638px;

    .signin-box

    larghezza: 960px;

    altezza: 638px;

    Posizione della barra dei menu

    .signin-custom-menu-bar-position

    superiore: 220px;

    sinistra: 475px;

    Stile della barra dei menu

    .signin-custom-menu-bar

    colore: #ffffff;

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

    Stile dei separatori della barra dei menu

    .signin-menu-bar-separator

    colore: #ffffff;

    Questa classe è ubicata in fondo al file CSS.

    Posizione del titolo della cornice

    .signin-custom-frame-title

    superiore: 245px;

    sinistro: 370px;

    Stile del titolo della cornice

    .signin-custom-frame-label

    colore: #ffffff;

    Posizione etichetta del nome utente

    .signin-custom-username-label-position

    allineamento-testo: sinistro;

    superiore: 275px;

    sinistro: 370px;

    Nome Utente

    .signin-custom-

    colore: #ffffff;

    Posizione del controllo dell'immissione del nome utente

    .signin-custom-username-editbox

    larghezza: 221px;

    superiore: 295px;

    sinistro: 370px;

    Nota: Per mostrare tutti gli angoli in modo appropriato, la larghezza deve essere di almeno 5px.

    Stile del controllo dell'immissione del nome utente

    .signin-custom-username-editbox-input

    larghezza: 216px;

    Posizione etichetta della parola d'ordine

    .signin-custom-password-label-position

    allineamento-testo: sinistro;

    superiore: 330px;

    sinistro: 370px;

    Stile etichetta della parola d'ordine

    .signin-custom-password-label

    colore: #ffffff;

    Cancellare dimensione-font: 12px;

    Posizione del controllo dell'immissione della parola d'ordine

    .signin-custom-password-editbox

    larghezza: 221px;

    superiore: 350px;

    sinistro: 370px;

    Nota: La larghezza è 5x in più rispetto a quella del controllo per mostrare tutti gli angoli.

    Stile del controllo d'immissione della parola d'ordine

    .signin-custom-password-editbox-input

    larghezza: 216px;

    Posizione dell'opzione Memorizza profilo utente

    .signin-custom-remember-me-position

    larghezza: 216px;

    superiore: 388px;

    sinistro: 490px;

    Nota: La parte superiore è 2px minore rispetto al valore nella grafica, a causa del rendering di HTML. La larghezza e la parte sinistra sono corrispondenti nei controlli di immissione, con l'allineamento testo a destra per allineare l'angolo destro.

    Stile dell'opzione Memorizza profilo utente

    signin-custom-remember-me

    colore: #ffffff;

    dimensione-font:12px;

    Posizione del pulsante Accedi

    .signin-custom-button-signin-position

    colore: #ffffff;

    Stile del pulsante Accedi

    .signin-custom-button-signin

    colore: #ffffff;

    bordo: 1px solido #223AA7;

    raggio-bordo: 10px;

    Stile del pulsante Accedi

    a.signin-custom-button-signin

    background-color: #223AA7;

    larghezza: 96px;

    Cancellare la linea di sfondo.

    Cancellare la linea riempimento-destro.

    a.signin-custom-button-signin span

    riempimento: 3px 0px 3px 0px;

    Cancellare la linea linea-altezza.



x
Messaggio di errore

La seguente immagine e tabella fornisce informazioni sulla risoluzione di messaggi di errore.

Elementi di messaggi di errore

Classe CSS o Tag HTML

Modifiche suggerite

Posizione e Stile dello sfondo del messaggio di errore

.signin-custom-error-position

Larghezza: 340px;

altezza: 27px;

superiore: 240px;

sinistro: 310px;

colore-sfondo: #ff0000;

bordo: 1px solido #ff0000;

raggio-bordo: 10px;

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

Posizione & Stile testo del messaggio di errore

.signin-custom-error-message

colore: #ffffff;

dimensione-font: 11px;

superiore: 5px;

larghezza: 340px;

allineamento-testo: centrato;

Cancellare sinistro: 20;

Nota: La parte superiore è la differenza tra la parte superiore della casella e del testo nel proprio software di modifica immagini. La larghezza qui deve corrispondere alla larghezza della classe di sopra.

Immagine messaggio di errore

.signin-custom-error-image

visualizzazione: nessuna;

Nota: Questa azione è stata eseguita per non avere immagini.

Nota: Se bisogna ridimensionare un oggetto, utilizzare la stessa classe in cui la posizione è stata impostata.



x
Finestra di dialogo Modifica parola d'ordine

Lo stile degli elementi nella finestra di dialogo Modifica parola d'ordine, come anche l'Accesso già effettuato nella finestra di dialogo, vengono acquisiti dagli elementi della pagina principale. Questo significa che i pulsanti, le etichette ed i controlli corrispondono alla pagina principale.

La seguente immagine e tabella fornisce informazioni su come modificare le parole d'ordine.

Elementi della finestra di dialogo Modifica parola d'ordine

Classe CSS o Tag HTML

Modifiche suggerite

Posizione e stile della finestra di dialogo

.signin-custom-change-password-position

superiore: 220px;

sinistro: 353px;

colore-sfondo: #565352;

colore: #ffffff;

bordo: 1px trasparente solido

raggio-bordo:25px;

ombreggiatura-casella-webkit: 7px 7px 9px rgba(255, 255, 255, 0.75);

ombreggiatura-casella-moz: 7px 7px 9px rgba(255, 255, 255, 0.75);

ombreggiatura-casella: 7px 7px 9px rgba(255, 255, 255, 0.75);

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

Nota: La visibilità: nascosto; la linea necessiterà o di essere cancellata, aggiunta di nuovo o commentata durante la verifica.

Barra del titolo della finestra di dialogo

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

colore-sfondo: #223AA7;

Icona titolo della finestra di dialogo

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

visibilità: nascosto;

Posizione del pulsante Accedi

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

altezza: 25px;

superiore: 190px;

sinistro: 100px;

Posizione del pulsante Annulla

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

altezza: 25px;

superiore: 190px;

sinistro: 200px;



x
Accesso già effettuato nella finestra di dialogo

La seguente immagine e tabella fornisce informazioni su come lavorare con l'Accesso già effettuato nella finestra di dialogo.

Accesso già effettuato negli elementi della finestra di dialogo

Classe CSS o Tag HTML

Modifiche suggerite

Posizione e stile della finestra di dialogo

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

altezza: 130px;

superiore: 305px;

sinistro: 332px;

colore-sfondo: #565352;

bordo: 1px trasparente solido;

raggio-bordo:25px;

ombreggiatura-casella-webkit: 7px 7px 9px rgba(255, 255, 255, 0.75);

ombreggiatura-casella-moz: 7px 7px 9px rgba(255, 255, 255, 0.75);

ombreggiatura-casella: 7px 7px 9px rgba(255, 255, 255, 0.75);

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

Nota: La visibilità: nascosto; la linea necessiterà o di essere cancellata, aggiunta di nuovo o commentata durante la verifica.

Etichetta titolo della finestra di dialogo

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

larghezza: 270px;

colore: #ffffff;

Icona titolo della finestra di dialogo

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

visibilità: nascosto;

Posizione del pulsante Accedi

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

altezza: 25px;

superiore: 100px;

sinistro: 100px;

Posizione del pulsante Annulla

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

altezza: 25px;

superiore: 100px;

sinistro: 200px;


WebFOCUS