Personnaliser les Éléments de Page d'Access Portal avec CSS

Pour personnaliser les éléments de la page Access Portal, vous pouvez télécharger un fichier .CSS à partir de votre Firebox. Après avoir modifié le fichier, téléchargez-le sur votre Firebox pour prévisualiser et enregistrer les modifications.

Dans le fichier .CSS, vous pouvez spécifier les paramètres des éléments de page suivants :

  • Liens
  • Boutons
  • Zones de texte
  • Listes déroulantes
  • Fenêtre de connexion
  • Page Applications

Pour personnaliser le titre, les logos d'en-tête et de connexion et l'image d'arrière-plan de la page, consultez la section Personnaliser les Images d'Access Portal.

Les instructions de personnalisation des éléments de la page Access Portal diffèrent sur Fireware v12.1.x. Si votre Firebox exécute Fireware v12.1.x, consultez la section Personnaliser les Éléments de la Page Access Portal avec CSS sur Fireware v12.1.x de la Base de Connaissances WatchGuard.

Télécharger le Fichier .CSS

  1. Sélectionnez Services d'Abonnement > Access Portal.
  2. Sélectionnez l'onglet Personnalisation.

Capture d'écran de la page Personnalisation

  1. À côté de la case Fichier CSS Personnalisé, cliquez sur Téléchargez l'exemple de fichier CSS.
    Le fichier.CSS s'ouvre dans votre navigateur.
  2. Pour modifier le fichier .CSS, enregistrez-le sur votre ordinateur local. Pour de plus amples informations concernant les éléments que vous pouvez modifier, consultez la section Modifier le Fichier CSS dans cette rubrique.

Pour de plus amples informations concernant les éléments que vous pouvez modifier, consultez la section suivante de cette rubrique.

  1. Sélectionnez Services d'Abonnement > Access Portal.
  2. Sélectionnez l'onglet Paramètres de Connexion des Utilisateurs.
  3. Sélectionnez l'onglet Personnalisation.

Capture d'écran de l'onglet Personnalisation

  1. Cliquez sur Affichage.
  2. Sélectionnez un éditeur de texte sur votre ordinateur pour ouvrir le fichier.
  3. Pour modifier le fichier, enregistrez-le sur votre ordinateur local. Pour de plus amples informations concernant les éléments que vous pouvez modifier, consultez la section Modifier le Fichier CSS dans cette rubrique.

Pour de plus amples informations concernant les éléments que vous pouvez modifier, consultez la section suivante de cette rubrique.

Modifier le Fichier .CSS

Pour modifier le fichier .CSS que vous avez enregistré à partir du Firebox, ouvrez-le dans un éditeur de texte. Vous pouvez modifier le style des éléments de cette liste.

Élément Exemple Code CSS
Lien Capture d'écran d'un lien d'application d'Access Portal

a {
   color: #36bed6; /* couleur du texte des liens */
}

Bouton — Secondaire
 Capture d'écran d'un bouton secondaire (standard)

.btn {
   border: 1px solid #97dfeb; /* bordure des boutons (s'applique à tous les boutons)*/
   color: #36bed6; /* couleur du texte des boutons (s'applique uniquement aux boutons secondaires)*/
}

Bouton — Principal
 Capture d'écran d'un bouton principal


.btn.primary { /* les boutons principaux mettent en évidence le bouton sur lequel l'utilisateur doit cliquer (par exemple le bouton de connexion) */

   background: #36bed6; /* couleur de fond des boutons principaux */

   color: #ffffff; /* couleur du texte des boutons principaux */

}

Bouton — Survol

 Capture d'écran d'un bouton sensitif .btn:hover { /* les boutons survolés sont des boutons sur lesquels la souris de l'utilisateur se trouve */

   background: #eaf6fa; /* couleur de fond des boutons survolés */

   color: #36bed6; /* couleur du texte des boutons survolés */

}
Bouton — Actif

 Capture d'écran d'un bouton actif .btn:active { /* les boutons actifs sont les boutons sur lesquels l'utilisateur clique actuellement */

   background-color : #eaf6fa; /* couleur de fond des boutons actifs */

   color: #36bed6; /* couleur du texte des boutons actifs */

}
Bouton — Sélection
 Capture d'écran d'un bouton de sélection .btn:focus { /*les boutons de premier plan sont des boutons sur lesquels l'utilisateur a cliqué ou accédé via la touche tabulation */

   background-color : #eaf6fa; /* couleur de fond des boutons sélectionnés */

   color: #36bed6; /* couleur du texte des boutons sélectionnés */

}
Zone de texte (entrée) Capture d'écran d'une zone de texte input { /* utilisé pour les zones de texte comme le nom d'utilisateur et le mot de passe sur la page de connexion */

   border: 1px solid #97dfeb; /* bordure de la zone de saisie */

}
Liste déroulante Capture d'écran d'une liste déroulante select { /* utilisé pour les listes déroulantes comme la liste de domaines sur la page de connexion */

   background-image : /* contrôle les couleurs de la flèche sur le côté droit de la sélection */

     linear-gradient(55deg, transparent 55%, #36bed6 50%), /* côté gauche de la flèche */

    linear-gradient(125deg, #36bed6 50%, transparent 50%), /* côté droit de la flèche */

     linear-gradient(to bottom, #36bed6, #36bed6), /* bordure gauche de la boite de la flèche */

     linear-gradient(to right, #eaf6fa, #eaf6fa); /* fond de la boite de la flèche */

   border: 1px solid #97dfeb; /* bordure de la sélection */

}
Fenêtre de connexion

Capture d'écran de la page de connexion

#login-window > header {

   background: #b32317; /* couleur de fond derrière le logo sur la page de connexion */

}

#login-window > header > .logo {

  height: 150px; /* hauteur du logo */

  width : 300px; /* largeur du logo */

}
Page Applications Capture d'écran de la page des applications #applications-page > header {

   background : #333333; /* couleur de fond de la barre d'en-tête en haut de la page */

}

#applications-page > header > .logo {

   background : #b32317; /* couleur de fond derrière le logo dans la barre d'en-tête en haut de la page*/

}

#applications-page > #applications .tabs > .tab-bar > .tab {

   background : #36bed6; /* couleur de fond des onglets */

   color: #ffffff; /* couleur du texte des onglets */

}

#applications-page > #applications .tabs > .tab-bar > .tab.active {

   background: #ffffff; /* couleur de fond de l'onglet sélectionné */

   color: #36bed6; /* couleur du texte de l'onglet sélectionné */

}

Charger le Fichier .CSS Modifié

Après avoir modifié le fichier .CSS, vous devez le charger sur votre Firebox.

  1. Sélectionnez Services d'Abonnement > Access Portal.
  2. Sélectionnez l'onglet Personnalisation.
  3. Cochez la case Fichier CSS Personnalisé.
  4. Cliquez sur Choisir un Fichier et accédez au fichier.CSS modifié.

Capture d'écran des paramètres du Fichier CSS personnalisé

  1. Cliquez sur Charger.
    Un message de confirmation s'affiche une fois que le chargement du fichier est terminé.
  2. Cliquez sur Prévisualiser la Page Connexion ou Prévisualiser la Page Application pour prévisualiser vos modifications.
    La page de prévisualisation s'ouvre dans une nouvelle fenêtre.
  3. Cliquez sur Enregistrer.
  1. Sélectionnez Services d'Abonnement > Access Portal.
  2. Sélectionnez l'onglet Personnalisation.
  3. Sélectionnez un Fichier CSS Personnalisé.
  4. Cliquez sur le bouton Charger un Fichier CSS Personnalisé.
  5. Sélectionnez le fichier .CSS modifié et cliquez sur OK.
    La boîte de dialogue Charger un Fichier CSS Personnalisé s'affiche.

Capture d'écran de la boîte de dialogue Télécharger un Fichier CSS Personnalisé

  1. Saisissez l'adresse IP, le nom d'utilisateur et le mot de passe de votre Firebox.
  2. Cliquez sur OK.
    Une boîte de dialogue de confirmation apparaît.

Capture d'écran du message de confirmation de téléchargement du fichier CSS personnalisé

Voir Également

À propos d'Access Portal

Personnaliser l'Apparence d'Access Portal

Configurer Access Portal