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:
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
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.
Nota: Non tutte le immagine richiedono di impostare la trasparenza alfa. Generalmente, il valore sarà tra 50-75%.
L'ultimo passaggio è quello di abilitare la nuova pagina creata. Utilizzare i seguenti passaggi per completare questa attività.
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.
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? |
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.
Nota:
http://server:port/ibi_apps/
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:
|
Colore sfondo pagina (continuo) |
corpo, html (continuo) |
|
Accesso immagine dello sfondo |
.signin-background-image |
|
.signin-box |
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 |
|
Stile della barra dei menu |
.signin-custom-menu-bar |
|
Scheda Stile della barra dei menu |
.signin-menu-bar-separator |
|
Posizione del titolo della cornice |
.signin-custom-frame-title |
|
Stile del titolo della cornice |
.signin-custom-frame-label |
|
Posizione dell'etichetta del nome utente |
.signin-custom-username-label-position |
|
Stile dell'etichetta del nome utente |
.signin-custom-username-label |
|
Posizione del controllo dell'immissione del nome utente |
.signin-custom-username-editbox |
|
Stile del controllo dell'immissione del nome utente |
.signin-custom-username-editbox-input |
|
Posizione etichetta della parola d'ordine |
.signin-custom-password-label-position |
|
Stile etichetta della parola d'ordine |
.signin-custom-password-label |
|
Posizione del controllo dell'immissione della parola d'ordine |
.signin-custom-password-editbox |
|
Stile del controllo dell'immissione della parola d'ordine |
.signin-custom-password-editbox-input |
|
Posizione dell'opzione Memorizza profilo utente |
.signin-custom-remember-me-position |
|
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 |
|
Stile del pulsante Accedi |
.signin-custom-button-signin |
|
.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 |
|
Stile del messaggio di errore |
.signin-custom-error-message |
|
Immagine del messaggio di errore |
.signin-custom-error-image |
|
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 |
|
Barra del titolo della finestra di dialogo |
.signin-custom-change-password-title-position |
|
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 |
|
Posizione del controllo dell'immissione del nome utente |
.signin-custom-change-password_username-editbox-position |
|
Posizione dell'etichetta della vecchia parola d'ordine |
.signin-custom-change-password_old-password-label-position |
|
Posizione del controllo dell'immissione della vecchia parola d'ordine |
.signin-custom-change-password_old-password-editbox-position |
|
Posizione dell'etichetta della nuova parola d'ordine |
.signin-custom-change-password_new-password-label-position |
|
Posizione del controllo dell'immissione della nuova parola d'ordine |
.signin-custom-change-password_new-password-editbox-position |
|
Posizione dell'etichetta della conferma della nuova parola d'ordine |
.signin-custom-change-password_confirm-password-label-position |
|
Posizione del controllo dell'immissione della conferma della nuova parola d'ordine |
.signin-custom-change-password_confirm-password-editbox-position |
|
Posizione del controllo dell'immissione della conferma della nuova parola d'ordine |
.signin-custom-change-password_confirm-password-editbox-position |
|
Posizione del pulsante Accedi |
.signin-custom-change-password-button-signin-position |
|
Posizione del pulsante Annulla |
.signin-custom-change-password-button-cancel-position |
|
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 |
|
Etichetta del titolo della finestra di dialogo |
.signin-custom-user-already-signin-label-position |
|
Icona del titolo della finestra di dialogo |
.signin-custom-user-already-signin-title-image |
|
Posizione del pulsante Accedi |
.signin-custom-user-already-signin-button-signin-position |
|
Posizione del pulsante Annulla |
.signin-custom-user-already-signin-button-cancel-position |
|
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.
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: |
Nota:
http://server:port/ibi_apps/
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. |
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.
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; |
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 |