Referenzhandbuch für CSS-Vorlagen

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

  

• .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

  

• .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

  

• 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

  

• .ext-error – 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

  

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

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

  

• 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