Freigeben über

Referenzhandbuch für CSS-Vorlagen

  • Artikel

Das Konfigurieren ihres Unternehmensbrandings für den Benutzeranmeldungsprozess bietet eine nahtlose Erfahrung in Ihren Anwendungen, die Microsoft Entra ID als Identitäts- und Zugriffsverwaltungsdienst verwenden. Verwenden Sie dieses CSS-Referenzhandbuch, wenn Sie die CSS-Vorlage als Teil des Anpassen von Unternehmensbranding Prozess verwenden.

HTML-Selektoren

Die folgenden CSS-Formatvorlagen werden zum Standardtext und Linkformatvorlagen für die gesamte Seite. Anwenden von Formatvorlagen für andere Links oder Text setzt CSS-Selektoren außer Kraft.

  • body – Formatvorlagen für die ganze Seite
  • Formatvorlagen für Links:
    • a, a:link – Alle Links
    • a:hover – Wenn die Maus über dem Link ist
    • a:focus – Wenn der Link den Fokus hat
    • a:focus:hover – Wenn der Link den Fokus hat und die Maus über dem Link ist
    • a:active – Wenn auf den Link geklickt wird

Microsoft Entra CSS-Selektoren

Verwenden Sie die folgenden CSS-Selektoren, um die Details der Anmeldeoberfläche zu konfigurieren.

  • .ext-background-image – Container, der das Hintergrundbild in der Standardmäßigen Lightbox-Vorlage enthält

  • .ext-header – Kopfzeile am oberen Rand des Containers

  • .ext-header-logo - Kopfzeilenlogo am oberen Rand des Containers

    Screenshot des Anmeldebildschirms mit hervorgehobenen BEREICHEN

  • .ext-middle – Formatvorlage für den Vollbildhintergrund, der das Anmeldefeld vertikal an der Mitte und horizontal an der Mitte ausgerichtet

  • .ext-vertical-split-main-section – Formatvorlage für den Container des Teilbildschirmhintergrunds in der vorlage für vertikale Geteilte Fenster, die sowohl ein Anmeldefeld als auch einen Hintergrund enthält (Diese Formatvorlage wird auch als ADFS-Vorlage (Active Directory-Verbunddienste) bezeichnet.)

  • .ext-vertical-split-background-image-container – Anmeldefeldhintergrund in der Vorlage "Vertikal geteilt/ADFS"

  • .ext-sign-in-box – Anmeldefeldcontainer

  • .ext-title - Titeltext

    Screenshot des Anmeldefelds mit dem Teil des Felds, der mit der EXT-Anmeldefeldauswahl formatiert ist.

  • .ext-subtitle - Untertiteltext

  • Formatvorlagen für primäre Schaltflächen:

    • .ext-button.ext-primary – Standardformat der primären Schaltfläche
    • .ext-button.ext-primary:hover – Wenn die Maus über die Schaltfläche ist
    • .ext-button.ext-primary:focus – Wenn die Schaltfläche den Fokus hat
    • .ext-button.ext-primary:focus:hover – Wenn die Schaltfläche den Fokus hat und die Maus über die Schaltfläche ist
    • .ext-button.ext-primary:active – Wenn auf die Schaltfläche geklickt wird

    Screenshot des Anmeldefelds, in dem die primäre Schaltfläche

  • Formatvorlagen für sekundäre Schaltflächen:

    • .ext-button.ext-secondary – Sekundäre Schaltflächen
    • .ext-button.ext-secondary:hover – Wenn die Maus über die Schaltfläche ist
    • .ext-button.ext-secondary:focus Wenn die Schaltfläche den Fokus hat
    • .ext-button.ext-secondary:focus:hover – Wenn die Schaltfläche den Fokus hat und die Maus über die Schaltfläche ist
    • .ext-button.ext-secondary:active – Wenn auf die Schaltfläche geklickt wird

    Screenshot des Anmeldefelds im Schritt mit den Anmeldeoptionen, wobei die sekundäre Schaltfläche

  • .ext-error – Fehlertext

    Screenshot des Anmeldefelds mit hervorgehobener Fehlertext.

  • Formatvorlagen für Textfelder:

    • .ext-input.ext-text-box - Textfelder
    • .ext-input.ext-text-box.ext-has-error – Wenn dem Textfeld ein Überprüfungsfehler zugeordnet ist
    • .ext-input.ext-text-box:hover – Wenn sich die Maus über dem Textfeld befindet
    • .ext-input.ext-text-box:focus – Wenn das Textfeld den Fokus hat
    • .ext-input.ext-text-box:focus:hover – Wenn das Textfeld den Fokus hat und die Maus über dem Textfeld liegt

    Screenshot des Anmeldefelds mit hervorgehobenen Beispieltext im Textfeld.

  • .ext-boilerplate-text – Benutzerdefinierter Nachrichtentext unten im Anmeldefeld

  • .ext-promoted-fed-cred-box – Textfeld mit Anmeldeoptionen

    Screenshot des Anmeldefelds mit hervorgehobenem optionalen Textbausteinbereich.

  • Formatvorlagen für die Fußzeile:

    • .ext-footer - Fußzeilenbereich unten auf der Seite
    • .ext-footer-links – Linkbereich in der Fußzeile unten auf der Seite
    • .ext-footer-item – Linkelemente (z. B. "Nutzungsbedingungen" oder "Datenschutz & Cookies") in der Fußzeile unten auf der Seite
    • .ext-debug-item – Debugdetails auslassungspunkte in der Fußzeile am unteren Rand der Seite