Eine Anmeldeseite erstellen und anpassen

In diesem Abschnitt:

Mit einem Vorgang, der aus drei Schritten besteht, können Sie eine Anmeldeseite erstellen und anpassen, die spezifisch ist für Ihre Firma oder Organisation. Zu den drei Schritten gehören:

  1. Die neue angepasste Anmeldeseite entwerfen und aktivieren
  2. Die Textlabels einstellen
  3. Die CSS-Datei bearbeiten, um Seitenelemente zu positionieren und zu stylen

Diese Schritte werden im Detail in dem Technical Support Center beschrieben. Spezifische Informationen und einen Leitfaden für die Erstellung einer angepassten Anmeldeseite finden Sie unter https://techsupport.informationbuilders.com

Nach oben
x
Die neue angepasste Anmeldeseite entwerfen und aktivieren

Vorgehensweise:

Die enthaltene angepasste Anmeldeseite, die in der folgenden Abbildung zu sehen ist, besteht aus einem Hintergrundbild, das eine Dialogbox enthält für die Anmeldeinformationen.

Das Hintergrundbild ist in einer div class zentriert, wodurch etwas Platz um das Bild herum vorhanden ist. Um Ihre Seite zu entwerfen, siehe Die Seite entwerfen.
x
Vorgehensweise: Die Seite entwerfen
  1. Entscheiden Sie, ob Sie ein Hintergrundbild verwenden werden, eine Farbe (einfarbig oder Farbverlauf) oder beides.
  2. Erstellen Sie ein Modell in der Bildbearbeitungssoftware, das überlappende PNG-Dateien oder PSD-Dateien handhaben kann, wie z. B. Adobe® Fireworks® bzw. Adobe® Photoshop®. Es kann die Open Source-Software GIMP verwendet werden, um die Datei .psd zu bearbeiten.
    1. Öffnen Sie das bereitgestellte Musterbild mit mehreren Layers.
    2. Ersetzen Sie das Hintergrundbild im Layer Angepasster Hintergrund durch Ihr Bild oder Ihre Farben.
    3. Stellen Sie die Alphatransparenz auf den gewünschten Prozentanteil ein.

      Hinweis: Es ist nicht für alle Bilder nötig, Alphatransparenz einzustellen. Im Allgemeinen bewegt sich der Wert zwischen 50-75%.

    4. Passen Sie wenn nötig die Größe des Zeichenbereichs so an, dass Ihr Bild hinein passt.
    5. Passen Sie das Formular an, wie es beschrieben wird in Das Formular anpassen.
    6. Exportieren Sie Ihr Bild als ein .gif oder .png, um die Transparenz beizubehalten.
    7. Platzieren Sie Ihr Bild in \ibi\WebFOCUS81\config\web_resource\signin\images.
x
Vorgehensweise: Das Formular anpassen
  1. Für den Formularhintergrund:
    1. Ändern Sie die Hintergrundfarbe des Objekts Formularbereichhintergrund im Formular-Layer, damit sie zu Ihrem Farbschema passt.
    2. Positionieren Sie den Formularhintergrund wie gewünscht. Je nachdem, welchen Text Sie bearbeiten, müssen Sie im nächsten Schritt eventuell die Größe dieser Box anpassen.
  2. Für die Formularelemente:
    1. Bestimmen Sie, ob das Feature Benutzer-ID speichern in Ihrer Installation verwendet wird. Wenn dies der Fall ist, aktivieren Sie das Element Benutzer-ID speichern im Formular-Layer.
    2. Ändern Sie den Text wie nötig im Formular-Layer.
    3. Stylen und positionieren Sie alle Formularelemente im Formular-Layer.
  3. Für die Fehlermeldung:
    1. Aktivieren Sie den Unter-Layer Meldung.
    2. Stylen und positionieren Sie den Hintergrund und den Text der Fehlermeldung.
  4. Deaktivieren Sie den Formular-Layer, da diese Elemente bei der Ausführung erzeugt werden.
x
Vorgehensweise: Die neue angepasste Anmeldeseite aktivieren

Der letzte Schritt ist es, die neue Seite zu aktivieren, die Sie erstellt haben. Verwenden Sie die folgenden Schritte, um den Task durchzuführen.

  1. Melden Sie sich bei WebFOCUS mit einem Administratorkonto an.
  2. Starten Sie die WebFOCUS-Administrationskonsole.
  3. Klicken Sie auf Konfiguration, und klicken Sie dann auf Anwendungseinstellungen.
  4. Klicken Sie auf Sicherheit.
  5. Stellen Sie IBI_Customized_Signin_Page auf true ein, wie es in der folgenden Abbildung zu sehen ist.

  6. Klicken Sie auf Speichern.
  7. Melden Sie sich bei WebFOCUS ab.
Nach oben
x
Die Textlabels einstellen

Vorgehensweise:

WebFOCUS bietet Ihnen die Möglichkeit, den Text aller Labels auf der Anmeldeseite zu ändern. Sie können auch bis zu zwei angepasste Links in die Menüleiste aufnehmen.
x
Vorgehensweise: Den Text und Links einstellen
  1. Navigieren Sie zu \ibi\WebFOCUS81\config\web_resource\signing\.
  2. Bearbeiten Sie in einem Texteditor wie Notepad ++ die Datei customsignin.xml.
  3. Ändern Sie den Text in den gewünschten Elementen.

    In den folgenden Tabellen finden Sie das Element, den XML-Tag-Namen und den Defaultwert für das Element (der geändert werden kann). Der Wert, den Sie eingeben, enthält den XML CDATA-Wrapper nicht.

    Hinweis: Wenn Sie Ihre Änderungen in diesem Abschnitt oder dem CSS-Abschnitt nicht sehen, kann es sein, dass Sie den Zwischenspeicher in Ihrem Browser leeren müssen.

    Elemente der Hauptseite

    XML-Tag

    Defaultwert

    Seitentitel

    <signin_custom_page_title>

    BI-Portal-Anmeldung

    Menüpunkt 1 Text

    <signin_menu_button1>

    menu1

    Menüpunkt 1 Link

    <signin_menu_button1_link>

    http://www.informationbuilders.com/

    Menüpunkt 2 Text

    <signin_menu_button2>

    menu2

    Menüpunkt 2 Link

    <signin_menu_button2_link>

    http://www.informationbuilders.com/

    Rahmentitel (Formularbereich)

    <signin_custom_frame_title>

    Melden Sie sich beim BI-Portal an

    Benutzername-Label

    <signin_user_name_label>

    Benutzername:

    Kennwort-Label

    <signin_password_label>

    Kennwort:

    Anmelde-Button-Text

    <signin_button>

    Anmelden

    Benutzer-ID speichern-Option

    <remember_me_checkbox>

    Benutzer-ID auf diesem Computer speichern

    Kennwort ändern-Dialogelemente

    XML-Tag

    Defaultwert

    Titeltext

    <signin_custom_change_password_frame_title>

    Kennwort ändern

    Benutzername-Label

    <signin_change_password_user_name_label>

    Benutzername

    Altes Kennwort-Label

    <signin_change_password_old_password_label>

    Altes Kennwort

    Neues Kennwort-Label

    <signin_change_password_new_password_label>

    Neues Kennwort

    Kennwort bestätigen-Label

    <signin_change_password_confirm_password_label>

    Neues Kennwort bestätigen

    Anmelde-Button-Text

    <signin_change_password_sigin_button>

    Anmelden

    Abbrechen-Button-Text

    <signin_change_password_cancel_button>

    Abbrechen

    Bereits angemeldet-Dialogelemente

    XML-Tag

    Defaultwert

    Titeltext

    <signin_custom_user-already-signin_frame_title>

    Benutzer ist bereits angemeldet

    Meldungstext

    <signin_custom_user-already-signin_message>

    Es besteht für diesen Benutzer bereits eine aktive Session. Würden Sie gerne mit der Anmeldung fortfahren und die andere Session abbrechen?
x
Die CSS-Datei bearbeiten, um Seitenelemente zu positionieren und zu stylen

Vorgehensweise:

Sie haben viel Flexibilität, wenn Sie das Layout der angepassten Anmeldeseite gestalten. Styling und Positionierung werden exklusiv in CSS vorgenommen.
x
Vorgehensweise: Das CSS bearbeiten
  1. Navigieren Sie zu \ibi\WebFOCUS81\config\web_resource\signin\
  2. Bearbeiten Sie in einem Texteditor wie Notepad ++ die Datei customsignin.css.
  3. Bearbeiten Sie die gewünschten Elemente.

    Hinweis:

    • Um an einem beliebigen Punkt zu testen, speichern Sie und gehen Sie zu 
      http://server:port/ibi_apps/
    • Stellen Sie sicher, dass der Zoom Ihres Browsers auf 100% eingestellt ist.
    • Positionierungs- und Styling-Informationen für alle Elemente können eingeholt werden, indem Sie das entsprechende Element in Ihrer Bildverarbeitungssoftware auswählen. Es kann sein, dass Sie die Positionierung leicht anpassen müssen.
    • Bild-URLs entsprechen dem Verzeichnis, das die CSS-Datei enthält (\ibi\WebFOCUS81\config\web_resource\signin\). Die URL zu diesem Verzeichnis lautet 
      http://server:port/ibi_apps/web_resource/signin.

    Die folgende Tabelle enthält die Elemente, die Sie bearbeiten können, ihre their CSS-Klassennamen und vorgeschlagene Attribute, die Sie ändern können, wenn gewünscht.

    Elemente der Hauptseite

    CSS-Klasse oder HTML-Tag

    Vorgeschlagene Änderungen

    Seitenhintergrundfarbe

    Hauptteil, html

    Entweder Farbverlauf oder Einfarbig:

    • Farbverlauf
      • Ersetzen Sie alle Instanzen von #064e96 mit Ihrer Anfangsfarbe.
      • Ersetzen Sie alle Instanzen von # ff7200 mit Ihrer Endfarbe.
    • Einfarbig
      • Löschen Sie die untersten acht Codezeilen im Hauptteil, html class, welche lauten:

      • 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*/

    Seitenhintergrundfarbe (Fortsetzung)

    Hauptteil, html (Fortsetzung)

    • Einfarbig (Fortsetzung)

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

      • Ändern Sie die Farbe im verbliebenen Hintergrundattribut in Ihre gewünschte Farbe.

    Anmeldungs-Hintergrundbild

    .signin-background-image

    • Das Bild ändern
    • Breite auf die Bildbreite einstellen
    • Höhe auf die Bildhöhe einstellen

    .signin-box
    • Breite auf die Bildbreite einstellen
    • Höhe auf die Bildhöhe einstellen

    Hinweis: Oben und links kann verwendet werden, um das Bild und alle Steuerungen wenn gewünscht relativ zu zentrieren.

    Menübalken-Position

    .signin-custom-menu-bar-position
    • Oben einstellen
    • Links einstellen

    Menübalken-Styling

    .signin-custom-menu-bar
    • Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Menübalkentrennlinie-Styling

    .signin-menu-bar-separator
    • Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.
    • Um die Trennlinie zu verbergen, stellen Sie Farbe auf transparent ein.

    Rahmentitelposition

    .signin-custom-frame-title
    • Oben einstellen
    • Links einstellen

    Rahmentitel-Styling

    .signin-custom-frame-label
    • Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Benutzername-Label-Position

    .signin-custom-username-label-position
    • Oben einstellen
    • Links einstellen

    Benutzername-Label-Styling

    .signin-custom-username-label
    • Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Benutzername-Eingabesteuerung-Position

    .signin-custom-username-editbox
    • Oben einstellen
    • Links einstellen

    Benutzername-Eingabesteuerung-Styling

    .signin-custom-username-editbox-input
    • Dies steuert Styling. Sie sollten hier Hintergrundfarben anwenden.

    Kennwort-Label-Position

    .signin-custom-password-label-position
    • Oben einstellen
    • Links einstellen

    Kennwort-Label-Styling

    .signin-custom-password-label
    • Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Kennwort-Eingabesteuerung-Position

    .signin-custom-password-editbox
    • Oben einstellen
    • Links einstellen

    Kennwort-Eingabesteuerung-Styling

    .signin-custom-password-editbox-input
    • Dies steuert Styling. Sie sollten hier Hintergrundfarben anwenden.

    Position der Option Benutzer-ID speichern

    .signin-custom-remember-me-position
    • Oben einstellen
    • Links einstellen

    Styling der Option Benutzer-ID speichern

    signin-custom-remember-me

    Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Anmelden-Button-Label-Styling

    .signin-button-label

    Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Anmelde-Button-Position

    .signin-custom-button-signin-position
    • Oben einstellen
    • Links einstellen

    Anmelden-Button-Styling

    .signin-custom-button-signin
    • Rahmenradius, Größe und Farbe einstellen
    • Schriftart einstellen

    .signin-button, .button

    		 

    Hinweis: Wenn Sie die Größe von Objekten anpassen müssen, verwenden Sie dieselbe Klasse, für die Sie die Position einstellen.

    Fehlermeldung-Elemente

    CSS-Klasse oder HTML-Tag

    Vorgeschlagene Änderungen

    Fehlermeldung-Position

    .signin-custom-error-position
    • Oben einstellen
    • Links einstellen

    Fehlermeldung-Styling

    .signin-custom-error-message
    • Stellen Sie das gewünschte Styling ein, wie z. B. Rahmenradius, Schriftartfamilie, Größe, Farbe usw.

    Fehlermeldung-Bild

    .signin-custom-error-image
    • Das Bild einstellen
    • Unkommentieren Sie die Zeile :visibility: hidden;, um das Bild zu verbergen, aber den Platz beizubehalten, den es einnimmt. Verwenden Sie display: none;, um das Bild zu entfernen, einschließlich des Platzes, den es einnimmt.

    Das Styling der Elemente in den folgenden zwei Tabellen wurde übernommen von den Hauptseitenelementen. Dies bedeutet, dass die Buttons, Labels und Steuerungen mit der Hauptseite übereinstimmen.

    Kennwort ändern-Dialogelemente

    CSS-Klasse oder HTML-Tag

    Vorgeschlagene Änderungen

    Dialog-Styling und -Position

    .signin-custom-change-password-position
    • Oben einstellen
    • Links einstellen
    • Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Dialogtitelleiste

    .signin-custom-change-password-title-position
    • Hintergrundfarbe einstellen

    Dialogtitel-Label

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

    Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Dialogtitel-Symbol

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

    Stellen Sie das Bild ein.

    Benutzername-Label-Position

    .signin-custom-change-password_username-label-position
    • Oben einstellen
    • Links einstellen

    Benutzername-Eingabesteuerung-Position

    .signin-custom-change-password_username-editbox-position
    • Oben einstellen
    • Links einstellen

    Altes Kennwort-Label-Position

    .signin-custom-change-password_old-password-label-position
    • Oben einstellen
    • Links einstellen

    Altes Kennwort-Eingabesteuerung-Position

    .signin-custom-change-password_old-password-editbox-position
    • Oben einstellen
    • Links einstellen

    Neues Kennwort-Label-Position

    .signin-custom-change-password_new-password-label-position
    • Oben einstellen
    • Links einstellen

    Neues Kennwort-Eingabesteuerung-Position

    .signin-custom-change-password_new-password-editbox-position
    • Oben einstellen
    • Links einstellen

    Neues Kennwort bestätigen-Label-Position

    .signin-custom-change-password_confirm-password-label-position
    • Oben einstellen
    • Links einstellen

    Neues Kennwort bestätigen-Eingabesteuerung-Position

    .signin-custom-change-password_confirm-password-editbox-position
    • Oben einstellen
    • Links einstellen

    Neues Kennwort bestätigen-Eingabesteuerung-Position

    .signin-custom-change-password_confirm-password-editbox-position
    • Oben einstellen
    • Links einstellen

    Anmelde-Button-Position

    .signin-custom-change-password-button-signin-position
    • Oben einstellen
    • Links einstellen

    Abbrechen-Button-Position

    .signin-custom-change-password-button-cancel-position
    • Oben einstellen
    • Links einstellen

    Benutzer bereits angemeldet-Dialogelemente

    CSS-Klasse oder HTML-Tag

    Vorgeschlagene Änderungen

    Dialog-Styling und -Position

    .signin-custom-user-already-signin-position
    • Oben einstellen
    • Links einstellen
    • Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.

    Dialogtitel-Label

    .signin-custom-user-already-signin-label-position
    • Stellen Sie das gewünschte Styling ein, wie z. B. Schriftartfamilie, Größe, Farbe usw.
    • Wenn Sie kein Symbol verwenden, können Sie links ausrichten.

    Dialogtitel-Symbol

    .signin-custom-user-already-signin-title-image
    • Das Bild einstellen
    • Löschen Sie die Zeile visibility: hidden;, um das Bild anzuzeigen.

    Anmelde-Button-Position

    .signin-custom-user-already-signin-button-signin-position
    • Oben einstellen
    • Links einstellen

    Abbrechen-Button-Position

    .signin-custom-user-already-signin-button-cancel-position
    • Oben einstellen
    • Links einstellen
x
Vorgehensweise: Die Textlabels einstellen

Nachfolgend sehen Sie eine exemplarische Vorgehensweise, in der das Beispielbild verwendet wird, um eine angepasste Anmeldeseite zu implementieren. Hierbei wird davon ausgegangen, dass Sie bereits die Design- und Aktivieren-Schritte durchgeführt haben.

  1. Navigieren Sie zu \ibi\WebFOCUS81\config\web_resource\signin\.
  2. Bearbeiten Sie in einem Texteditor wie Notepad ++ die Datei customsignin.xml.
  3. Ändern Sie den Text in den folgenden Elementen.

    Hinweis: In der folgenden Tabelle sind nur die Elemente zu sehen, die sich im Beispiel geändert haben. Geben Sie den Wert in die XML-Datei ein, der in der Spalte Beispielwert zu sehen ist.

    Elemente der Hauptseite

    XML-Tag

    Beispielwert

    Seitentitel

    <signin_custom_page_title>

    Information Builders-Anmeldung

    Menüpunkt 1 Text

    <signin_menu_button1>

    Summit 2013

    Menüpunkt 1 Link

    <signin_menu_button1_link>

    http://www.informationbuilders.com/summit

    Menüpunkt 2 Text

    <signin_menu_button2>

    IBI

    Rahmentitel (Formularbereich)

    <signin_custom_frame_title>

    Information Builders-Anmeldung

    Benutzername-Label

    <signin_user_name_label>

    Kundenname

    Kennwort-Label

    <signin_password_label>

    Kennwort

    Benutzer-ID speichern-Option

    <remember_me_checkbox>

    Benutzer-ID speichern

    Hinweis: Die Option Benutzer-ID speichern ist per Default nicht aktiviert, ist aber in den Beispieldateien eingestellt, falls Sie sie aktivieren.

    Dialog ändern-Elemente

    XML-Tag

    Beispielwert

    Benutzername-Label

    <signin_change_password_user_name_label>

    Kundenname:
  4. Starten Sie WebFOCUS in einem Browser. Es wird folgender Bildschirm angezeigt:

x
Vorgehensweise: Die CSS-Datei bearbeiten
  1. Navigieren Sie zu \ibi\WebFOCUS81\config\web_resource\signin\.
  2. Bearbeiten Sie in einem Texteditor wie Notepad ++ die Datei customsignin.css.
  3. Bearbeiten Sie die gewünschten Elemente.

    Hinweis:

    • Um an einem beliebigen Punkt zu testen, speichern Sie und gehen Sie zu 
      http://server:port/ibi_apps/
    • Stellen Sie sicher, dass der Zoom Ihres Browsers auf 100% eingestellt ist.
    • Positionierungs- und Styling-Informationen für alle Elemente können eingeholt werden, indem Sie das entsprechende Element in Ihrer Bildverarbeitungssoftware auswählen. Es kann sein, dass Sie die Positionierung leicht anpassen müssen.
    • Bild-URLs entsprechen dem Verzeichnis, das die CSS-Datei enthält (\ibi\WebFOCUS80\config\web_resource\signin\). Die URL zu diesem Verzeichnis lautet 
      http://server:port/ibi_apps/web_resource/signin.

    Die folgenden Tabellen enthalten die Änderungen, die Sie vornehmen müssen, um die Anmeldeseite und zwei Dialogboxen zu stylen. Vor jeder Tabelle befindet sich ein Screenshot davon, was Sie sehen sollten, wenn Sie diese Änderungen vornehmen.

    Elemente der Hauptseite

    CSS-Klasse oder HTML-Tag

    Werte, die hinzugefügt, geändert oder gelöscht werden sollen

    Seitenhintergrundfarbe

    Hauptteil, html

    background: #000000;

    Löschen Sie alle Farbverlaufslinien.

    Anmeldungs-Hintergrundbild

    .signin-background-image

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

    Breite: 960px;

    Höhe: 638px;

    .signin-box

    Breite: 960px;

    Höhe: 638px;

    Menübalken-Position

    .signin-custom-menu-bar-position

    Oben: 220px;

    Links: 475px;

    Menübalken-Styling

    .signin-custom-menu-bar

    Farbe: #ffffff;

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

    Menübalkentrennlinie-Styling

    .signin-menu-bar-separator

    color: #ffffff;

    Diese Klasse befindet sich unten in der CSS-Datei.

    Rahmentitelposition

    .signin-custom-frame-title

    Oben: 245px;

    Links: 370px;

    Rahmentitel-Styling

    .signin-custom-frame-label

    color: #ffffff;

    Benutzername-Label-Position

    .signin-custom-username-label-position

    text-align: left;

    top: 275px;

    left: 370px;

    Benutzername

    .signin-custom-

    color: #ffffff;

    Benutzername-Eingabesteuerung-Position

    .signin-custom-username-editbox

    width: 221px;

    top: 295px;

    left: 370px;

    Hinweis: Um alle Ränder richtig anzuzeigen, muss die Breite wenigstens 5px betragen.

    Benutzername-Eingabesteuerung-Styling

    .signin-custom-username-editbox-input

    width: 216px;

    Kennwort-Label-Position

    .signin-custom-password-label-position

    text-align: left;

    top: 330px;

    left: 370px;

    Kennwort-Label-Styling

    .signin-custom-password-label

    color: #ffffff;

    Delete font-size:12px;

    Kennwort-Eingabesteuerung-Position

    .signin-custom-password-editbox

    width: 221px;

    top: 350px;

    left: 370px;

    Hinweis: Die Breite ist 5px mehr als die Breite der Steuerung, um alle Ränder anzuzeigen.

    Kennwort-Eingabesteuerung-Styling

    .signin-custom-password-editbox-input

    width: 216px;

    Position der Option Benutzer-ID speichern

    .signin-custom-remember-me-position

    width: 216px;

    top: 388px;

    left: 490px;

    Hinweis: Oben ist 2px weniger als der Wert in der Grafik, aufgrund von HTML-Rendering. Breite und links entsprechen den Eingabesteuerungen, wobei die rechte Textausrichtung mit dem rechten Rand ausgerichtet ist.

    Styling der Option Benutzer-ID speichern

    signin-custom-remember-me

    color: #ffffff;

    font-size:12px;

    Anmelde-Button-Position

    .signin-custom-button-signin-position

    color: #ffffff;

    Anmelden-Button-Styling

    .signin-custom-button-signin

    color: #ffffff;

    border: 1px solid #223AA7;

    border-radius: 10px;

    Anmelden-Button-Styling

    a.signin-custom-button-signin

    background-color: #223AA7;

    width: 96px;

    Löschen Sie die Hintergrundlinie.

    Löschen Sie die rechte Auffüllung Linie.

    a.signin-custom-button-signin span

    padding: 3px 0px 3px 0px;

    Löschen Sie die Linienhöhe Linie.

x
Fehlermeldung

In der folgenden Abbildung und der Tabelle finden Sie Informationen darüber, wie Fehlermeldungen gelöst werden.

Fehlermeldung-Elemente

CSS-Klasse oder HTML-Tag

Vorgeschlagene Änderungen

Fehlermeldung-Hintergrund-Styling & -Position

.signin-custom-error-position

width: 340px;

height: 27px;

top: 240px;

left: 310px;

background-color: #ff0000;

border: 1px solid #ff0000;

border-radius: 10px;

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

Fehlermeldung-Text-Styling & -Position

.signin-custom-error-message

color: #ffffff;

font-size: 11px;

top: 5px;

width: 340px;

text-align: center;

Delete left: 20;

Hinweis: Oben ist die Differenz zwischen der Oberkante der Box und der Oberkante des Texts in Ihrer Bildbearbeitungssoftware. Breite hier muss übereinstimmen mit der Breite der obigen Klasse.

Fehlermeldung-Bild

.signin-custom-error-image

display: none;

Hinweis: Dies wurde getan, um kein Bild zu haben.

Hinweis: Wenn Sie die Größe von Objekten anpassen müssen, verwenden Sie dieselbe Klasse, für die Sie die Position einstellen.
x
Dialogbox Kennwort ändern

Das Styling von Elementen in der Dialogbox Kennwort ändern und der Dialogbox Bereits angemeldet wird übernommen von den Elementen auf der Hauptseite. Dies bedeutet, dass die Buttons, Labels und Steuerungen mit der Hauptseite übereinstimmen.

In der folgenden Abbildung und der Tabelle finden Sie Informationen darüber, wie Kennwörter geändert werden.

Kennwort ändern-Dialogelemente

CSS-Klasse oder HTML-Tag

Vorgeschlagene Änderungen

Dialog-Styling und -Position

.signin-custom-change-password-position

top: 220px;

left: 353px;

background-color: #565352;

color: #ffffff;

border: 1px solid transparent;

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

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

Hinweis: Die Zeile visibility: hidden; muss beim Testen gelöscht, erneut hinzugefügt oder auskommentiert werden.

Dialogtitelleiste

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

background-color: #223AA7;

Dialogtitel-Symbol

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

visibility: hidden;

Anmelde-Button-Position

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

height: 25px;

top: 190px;

left: 100px;

Abbrechen-Button-Position

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

height: 25px;

top: 190px;

left: 200px;
x
Bereits angemeldet-Dialogbox

In der folgenden Abbildung und der Tabelle finden Sie Informationen darüber, wie Sie mit der Bereits angemeldet-Dialogbox arbeiten.

Bereits angemeldet-Dialogelemente

CSS-Klasse oder HTML-Tag

Vorgeschlagene Änderungen

Dialog-Styling und -Position

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

height: 130px;

top: 305px;

left: 332px;

background-color: #565352;

border: 1px solid transparent;

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

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

Hinweis: Die Zeile visibility: hidden; muss beim Testen gelöscht, erneut hinzugefügt oder auskommentiert werden.

Dialogtitel-Label

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

width: 270px;

color: #ffffff;

Dialogtitel-Symbol

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

visibility: hidden;

Anmelde-Button-Position

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

height: 25px;

top: 100px;

left:100px;

Abbrechen-Button-Position

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

height: 25px;

top: 100px;

left: 200px;
WebFOCUS