Blog de Florent Appointaire

Blog sur les technologies Microsoft (Windows Server, System Center, Azure, Windows Azure Pack/Azure Stack, etc;)

[WAP] Personnaliser l’interface de connexion

Si vous n’utilisez pas l’authentification via ADFS, vous aurez accès à l’interface suivante pour vous connecter:

image

Commençons donc par modifier cette interface qui est contenu dans le site MgmSvc-AuthSite. Naviguez donc dans ce dossier, dans le dossier content:

image

Ici, éditez le fichier OnPremMain.css. C’est lui qui contient le design de l’interface de connexion. Ici, j’ai modifié le fichier de tel façon à avoir:

  • la partie login/signup en orange
  • la partie langue avec un fond orange
  • la partie “Service Management – Authentication” en texte et en couleur
  • la partie Login en orange
  • les hyperliens en orange
  • le boutton “Submit” sur fond orange
  • le copyright en orange
  • un fond bleu

Voici donc les différentes classes à éditer:

/*Modifie en haut la partie Login/Signup*/
.kt-login-signup-actionbar a[aria-selected="true"] {
    border-top: 4px solid #f79727;
    color: #f79727;
}

/*Modifie le backgroup du menu de langue*/
.kt-login-language.selected .kt-login-language-val {
    background-color: #f79727;
}

.kt-login-language .kt-login-language-selector {
    display: none;
    position: absolute;
    z-index: 12;
    right: 0;
    width: 230px;
    background-color: #f79727;
    padding: 15px 5px 15px 5px;
}

/*Modifie le titre  Service Management Authentication en orange*/
.kt-login-logo {
    color: #f79727;
    position: absolute;
    top: 70px;
    left: 20px;
}

/*Modifie la couleur du titre Login*/
.kt-form-title {
    color: #f79727;
    margin-top: 30px;
    font-size: 32px;
}

/*Modifie la partie hyperlien*/
a:visited {
    color: #F79727;
    text-decoration: none;
}

/*Modifie le fond du bouton submit*/
.kt-login-area ul.form-buttons button.kt-default-button {
    background-color: #f79727;
}

/*Modifie la couleur du copyright*/
.kt-copyright {
    bottom: 8px;
    color: #f79727;
    font-size: 8pt;
    left: 15px;
    position: absolute;
    text-align: center;
    width:340px;
}

/*Modifie le fond de la partie login*/
.kt-login-area {
    background-color: #00539E;
    color: #333;   
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 390px;
    z-index:4;
}

Editez maintenant le fichier _LoginHeader.cshtml, situé dans C:\inetpub\MgmtSvc-AuthSite\Content\ThirdPartyTheme\Views comme ceci pour afficher du texte à la place d’une image:

<div class="kt-login-logo">
    <p>DevoTeam Service Management - Authentication</p>
    <!--<img src="@Context.GetContentUrl("~/Content/Images/katal_logo_bk_onPrem.png")" alt="DevoTeam Service Management - Authentication" title="DevoTeam Service Management - Authentication" />-->
</div>

Faites un iisreset et actualisez votre page de login. Vous devriez avoir ceci:

image

Modifions maintenant la partie de gauche, où il y a les différentes images. Editez le fichier CSS OnPremMain.ccs de tel façonà avoir un fond blanc avec les écritures noir.

/*Modifie pour avoir un fond blanc*/
body {
    background: #FFFFFF /*url(/Content/Images/shimmer-background.jpg) left bottom no-repeat*/;
    background-attachment: fixed;
    border: 0;
    margin: 0;
    font-family: "Segoe UI";
    font-size: 12pt;
    height: auto;
}

/*Modifie pour avoir les écritures en noir*/
.kt-introduction {
    color: #000000;
}

.kt-offering-value {
    margin-top: 15px;
    color: #000000;
}

Une fois que vous avez enregistré, vous devriez avoir ceci:

SNAGHTML60a2d1b

Pour modifier le logo en haut à droite par une image personnalisé, il suffit de définir l’image, de la redimensionner et de la stocker. Une fois ceci fait, modifies le fichier le fichier _LoginMain.cshtml, situé dans C:\inetpub\MgmtSvc-AuthSite\Content\ThirdPartyTheme\Views. Attention, il peut être necessaire de modifier votre CSS et modifies la class kt-hero par le nouveau chemin de l’image, dans mon cas:

<div class="kt-hero">
    <img src="/Content/Custom/Devoteam_Logo.jpg" alt="DevoTeam"/>
</div>

image

Centrons maintenant notre logo. Dans le css OnPremMain.css, cherchez .kt-hero et modifiez comme ceci:

.kt-hero {
    position: fixed;
    top: 50%;
    right: 50%;
}

Pour supprimer ou modifier le text, ouvrez le fichier _LoginMain.cshtml, situé dans C:\inetpub\MgmtSvc-AuthSite\Content\ThirdPartyTheme\Views  et modifiez le suivant votre choix. pour ma part, j’ai laisse que ceci, pour supprimer le texte:

@using Microsoft.WindowsAzure.Server.CommonPortalStrings;
<div class="kt-hero">
    <img src="/Content/Custom/Devoteam_Logo.jpg" alt="DevoTeam"/>
</div>

image

Voici notre nouvel interface après avoir effectué le modifications:

image

Il est également possible de changer les logos ainsi que les différentes couleurs, comme celui-ci:

image

Vous l’aurez donc compris, la personnalisation de cette interface est en grande partie faite dans le fichier OnPremMain.css. Dans le prochain tutoriel, nous verrons comment personnaliser la partie management, une fois que l’utilisateur est connecté. 

Facebook Like
Anonymous