Aracılığıyla paylaş

CSS şablonu başvuru kılavuzu

  • Makale

Kullanıcı oturum açma işlemi için şirketinizin markasını yapılandırmak, kimlik ve erişim yönetimi hizmeti olarak Microsoft Entra Id kullanan uygulamalarınızda sorunsuz bir deneyim sağlar. CsS şablonunu şirket markasını özelleştirme işleminin bir parçası olarak kullanıyorsanız bu CSS başvuru kılavuzunu kullanın.

HTML seçicileri

Aşağıdaki CSS stilleri, sayfanın tamamı için varsayılan gövde ve bağlantı stilleri haline gelir. Diğer bağlantılar veya metinler için stillerin uygulanması CSS seçicilerini geçersiz kılar.

  • body - Sayfanın tamamı için stiller
  • Bağlantılar için stiller:
    • a, a:link - Tüm bağlantılar
    • a:hover - Fare bağlantının üzerindeyken
    • a:focus - Bağlantıda odak olduğunda
    • a:focus:hover - Bağlantı odaklandığında ve fare bağlantının üzerindeyse
    • a:active - Bağlantıya tıklandığında

Microsoft Entra CSS seçicileri

Oturum açma deneyiminin ayrıntılarını yapılandırmak için aşağıdaki CSS seçicilerini kullanın.

  • .ext-background-image - Varsayılan lightbox şablonunda arka plan görüntüsünü içeren kapsayıcı

  • .ext-header - Kapsayıcının üst kısmındaki üst bilgi

  • .ext-header-logo - Kapsayıcının üst kısmındaki üst bilgi logosu

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

  • .ext-middle - Oturum açma kutusunu dikey olarak ortaya ve yatay olarak ortaya hizalayan tam ekran arka plan stili

  • .ext-vertical-split-main-section- Hem oturum açma kutusu hem de arka plan içeren dikey bölme şablonunda kısmi ekran arka planının kapsayıcısı için stil (Bu stil Active Directory Federasyon Hizmetleri (AD FS) (ADFS) şablonu olarak da bilinir.)

  • .ext-vertical-split-background-image-container - Dikey bölme/ADFS şablonunda oturum açma kutusu arka planı

  • .ext-sign-in-box - Oturum açma kutusu kapsayıcısı

  • .ext-title - Başlık metni

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

  • .ext-subtitle - Alt yazı metni

  • Birincil düğmeler için stiller:

    • .ext-button.ext-primary - Birincil düğme varsayılan stili
    • .ext-button.ext-primary:hover - Fare düğmenin üzerindeyken
    • .ext-button.ext-primary:focus - Düğmenin odağı olduğunda
    • .ext-button.ext-primary:focus:hover - Düğmenin odağı olduğunda ve fare düğmenin üzerindeyse
    • .ext-button.ext-primary:active - Düğmeye tıklandığında

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

  • İkincil düğmeler için stiller:

    • .ext-button.ext-secondary - İkincil düğmeler
    • .ext-button.ext-secondary:hover - Fare düğmenin üzerindeyken
    • .ext-button.ext-secondary:focus Düğmenin odağı olduğunda
    • .ext-button.ext-secondary:focus:hover - Düğmenin odağı olduğunda ve fare düğmenin üzerindeyse
    • .ext-button.ext-secondary:active - Düğmeye tıklandığında

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

  • .ext-error - Hata metni

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

  • Metin kutuları için stiller:

    • .ext-input.ext-text-box - Metin kutuları
    • .ext-input.ext-text-box.ext-has-error - Metin kutusuyla ilişkili bir doğrulama hatası olduğunda
    • .ext-input.ext-text-box:hover - Fare metin kutusunun üzerindeyken
    • .ext-input.ext-text-box:focus - Metin kutusunda odak olduğunda
    • .ext-input.ext-text-box:focus:hover - Metin kutusunda odak olduğunda ve fare metin kutusunun üzerindeyse

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

  • .ext-boilerplate-text - Oturum açma kutusunun altındaki özel ileti metni

  • .ext-promoted-fed-cred-box - Oturum açma seçenekleri metin kutusu

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

  • Alt bilgi stilleri:

    • .ext-footer - Sayfanın en altındaki alt bilgi alanı
    • .ext-footer-links - Sayfanın alt kısmındaki alt bilgideki bağlantılar alanı
    • .ext-footer-item - Sayfanın alt kısmındaki alt bilgide öğeleri ("Kullanım Koşulları" veya "Gizlilik ve tanımlama bilgileri" gibi) bağlama
    • .ext-debug-item - Sayfanın alt kısmındaki alt bilgide hata ayıklama ayrıntıları üç nokta