Logo Edge Flow

LOGO Flow için farklı login ekranı tasarımı nasıl yapılır

LOGO Flow için farklı login ekranı tasarımı nasıl yapılır

Bazı projelerde Logo Flow giriş ekranında değişiklik yapma ihtiyacı hissede bilirsiniz.

Aşağıdaki Örnekte;

  • Firma Logosu Eklendi
  • Arka Plan Görseli Eklendi.
  • Kullanıcı Adı ve Şifre Üst Kısma Alındı
  • Sabit olan LOGO IDP Login Tipi Gizlendi
LOGO Flow için farklı login ekranı tasarımı nasıl yapılır — görsel 1 LOGO Flow için farklı login ekranı tasarımı nasıl yapılır — görsel 2

Firma Logosunu Eklemek İçin

Dosya yolu
C:\inetpub\wwwroot\Logo Services\v1_0\NAF.Services.Sts\Css\images\logo.png

dosyasını değiştirmeniz gerekmektedir.

Arka Plan Görseli Eklemek İçin

Dosya yolu
C:\inetpub\wwwroot\Logo Services\v1_0\NAF.Services.Sts\Css\images\KeremKUSLoginBG.jpg

dosyası oluşturuldu.

Dosya yolu
C:\inetpub\wwwroot\Logo Services\v1_0\NAF.Services.Sts\Css\material\login.css
C:\inetpub\wwwroot\Logo Services\v1_0\NAF.Services.Sts\Css\material\login.min.css

dosyalarını Notepad++ ile açınız.

Bu iki dosyada .login {background-color: #364150!important;} yer alan kısmı aşağıdaki şekilde değiştiriniz.

CSS
.login {
    background: url(https://alanadiniz/v1_0/NAF.Services.Sts/Css/images/KeremKUSLoginBG.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

Kullanıcı Adı ve Şifre Üst Kısma Almak İçin

Dosya yolu
C:\inetpub\wwwroot\Logo Services\v1_0\NAF.Services.Sts\Views\Account\LoginCredentialPartial.cshtml

dosyalarını Notepad++ ile açınız. div id="loginCredentialContainer" bloguna konumlanınız.

Aşağıdaki gibi UserName & Password form-group larını div style="clear:both;" altına taşıyınız.

LOGO Flow için farklı login ekranı tasarımı nasıl yapılır — görsel 3

Sabit olan LOGO IDP Login Tipini Gizlemek İçin

Dosya yolu
C:\inetpub\wwwroot\Logo Services\v1_0\NAF.Services.Sts\Views\Account\LoginCredentialPartial.cshtml

dosyalarını Notepad++ ile açınız. idpProviderSelect alanına konumlanınız ve hemen üzerinde yer alan div class'ının style kısmını display: none yaparak gizleyiniz.

LOGO Flow için farklı login ekranı tasarımı nasıl yapılır — görsel 4