Accueil > OpenID Connect OAuth Server par DnC > Développer > Ressources pour les développeurs > Stylage des formulaires d’identification

Stylage des formulaires d’identification

OAuthSD offre deux moyens d’apdater les formulaires à la charte graphique d’une organisation :
- my.css féfinit les styles propres à une organisation, qui s’appliqueront à tous les clients inscrits sur le serveur,
- le champ css de la table Clients sera éventuellement utilisé pour attribuer un stylage particulier à une application.

Structure générale des formulaires

Le corps des formulaires présente la structure HTML suivante :

  1. ...
  2. <div id="page" class="(le nom de la méthode)">    
  3.        <div id="top"></div>
  4.         <div id="container">  
  5.             <h3 class="head-title"> ... </h3>
  6.             ...
  7.             <div class="error"> ... </div>
  8.             ...
  9.         </div>
  10.     <div id="bottom">
  11.         ...
  12.     </div>
  13. </div>

Télécharger

Adaptation de la charte graphique

Styles par défaut

Par défaut, les styles des formulaires d’identification sont définis dans la section head de chacun d’eux.

Fichier my.css

S’il existe un fichier /my.css à la racine du serveur, celui-ci est adopté comme feuille de style.

Ce fichier pourra être utilisé pour insérer un logo de l’organisation. Le champ #top est sans doute bien adapté à recevoir une image en background.

Champ css de la table Clients

Qu’il s’agisse de la feuille de style ou du défaut, les styles peuvent être complétés ou surchargés par le contenu du champ css de la table clients. Dans l’exemple ci-dessous, la variable $thecss contient les données de ce champ.

Ces styles intervenant en final, ils l’emportent sur les précédents.

Exemple

Voici par exemple les définitions de styles du formulaire de login :

PHP

  1. // Styles
  2.  
  3. $thecss = ( empty($data['css'])? '' : htmlspecialchars($data['css']) );
  4.  
  5. if ( file_exists('my.css') ) { //[dnc37]
  6.     $style = '<link rel="stylesheet" type="text/css" href="my.css">" .';
  7.     if ( !empty($thecss) ) $style .= $thecss;
  8. } else {
  9.     $style = '
  10.    <style>
  11.    body {font-family: "Century Gothic", Helvetica, Arial, sans-serif !important;}
  12.    #page {margin-left: auto; margin-right: auto; max-width: 360px; padding: 1.5em; border: solid 1px grey; border-radius: 10px; box-shadow: 10px 5px 5px silver;}
  13.    .head-title {text-align: center; background-color: gray; color: white; padding: 0.5em;}
  14.    .error {text_align: center; color : red; background-color : white; padding: 6px;}
  15.    .bouton {margin:15px; cursor:pointer;}
  16.    .tfacode {text-align: center;}
  17.    #champ_login {box-shadow: 10px 5px 5px silver; margin-bottom: 10px;}
  18.    #champ_password {border: none;};
  19.    #btn_reset {float: left;}
  20.    #btn_submit {float: right;}
  21.    #submit {width:100px; font-size: 1.1em;}
  22.    #nologin {clear: both; margin-bottom: 0.5em;}
  23.    #ghostkeys {height: 120px; text-align: center;}
  24.    #ghostkeys > img {box-shadow: 10px 5px 5px silver;}
  25.    #bottom {color : grey; font-size: .8em;}
  26.    #bottom a {color : grey;}
  27.    ' . $thecss . '
  28.    </style>
  29.    ';    
  30.     }

Télécharger

Formulaire d’identification avec GhostKeys