Freigeben über

Referenzleitfaden für CSS-Vorlagen

  • Artikel

Das Konfigurieren des Unternehmensbrandings für den Benutzeranmeldungsprozess bietet eine nahtlose Erfahrung in Ihren Anwendungen, die Microsoft Entra ID als Identitäts- und Zugriffsverwaltungsdienst verwenden. Verwenden Sie diesen CSS-Referenzleitfaden, wenn Sie die CSS-Vorlage als Teil des Anpassungsprozesses für das Unternehmensbranding verwenden.

HTML-Selektoren

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

  • body – Stile für die gesamte Seite
  • Stile für Links:
    • a, a:link – Alle Links
    • a:hover – Wenn die Maus auf den Link zeigt
    • a:focus – Wenn der Link den Fokus hat
    • a:focus:hover – Wenn der Link den Fokus hat und die Maus auf den Link zeigt
    • 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 Lightbox-Standardvorlage enthält

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

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

    Screenshot of the sign-in screen with the .ext-header and .ext-header-logo areas highlighted.

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

  • .ext-vertical-split-main-section – Formatvorlage für den Container des Hintergrunds des Teilbildschirms in der vertikalen geteilten Vorlage, die sowohl ein Anmeldefeld als auch einen Hintergrund enthält (Diese Formatvorlage wird auch als Active Directory-Verbunddienste (AD FS)-Vorlage bezeichnet.)

  • .ext-vertical-split-background-image-container – Anmeldefeldhintergrund in der Vorlage für vertikale Aufteilung/AD FS

  • .ext-sign-in-box – Anmeldefeldcontainer

  • .ext-title – Titeltext

    Screenshot of the sign-in box, with the portion of the box that is styled with the .ext-sign-in-box selector.

  • .ext-subtitle – Untertiteltext

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

    • .ext-button.ext-primary – Standardformatvorlage der primären Schaltfläche
    • .ext-button.ext-primary:hover – Wenn die Maus auf die Schaltfläche zeigt
    • .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 auf die Schaltfläche zeigt
    • .ext-button.ext-primary:active – Wenn auf die Schaltfläche geklickt wird

    Screenshot of the sign-in box with the primary - Next - button highlighted.

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

    • .ext-button.ext-secondary – Sekundäre Schaltflächen
    • .ext-button.ext-secondary:hover – Wenn die Maus auf die Schaltfläche zeigt
    • .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 auf die Schaltfläche zeigt
    • .ext-button.ext-secondary:active – Wenn auf die Schaltfläche geklickt wird

    Screenshot of the sign-in box at the Sign-in options step, with the secondary - Back - button highlighted.

  • .ext-error – Fehlertext

    Screenshot of the sign-in box with error text highlighted.

  • Formatvorlagen für Textfelder:

    • .ext-input.ext-text-box – Textfelder
    • .ext-input.ext-text-box.ext-has-error – Wenn dem Textfeld ein Validierungsfehler zugeordnet ist
    • .ext-input.ext-text-box:hover – Wenn die Maus auf das Textfeld zeigt
    • .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 auf das Textfeld zeigt

    Screenshot of the sign-in box with the text box with sample text highlighted.

  • .ext-boilerplate-text – Benutzerdefinierter Nachrichtentext im unteren Bereich des Anmeldefelds

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

    Screenshot of the sign-in box with the optional boilerplate text area highlighted.

  • Formatvorlagen für die Fußzeile:

    • .ext-footer – Fußzeilenbereich unten auf der Seite
    • .ext-footer-links – Linkbereich in der Fußzeile im unteren Bereich der Seite
    • .ext-footer-item – Linkelemente (z. B. „Nutzungsbedingungen“ oder „Datenschutz & Cookies“) in der Fußzeile im unteren Bereich der Seite
    • .ext-debug-item – Auslassungspunkte für Debugdetails in der Fußzeile im unteren Bereich der Seite