Schémas - Personnalisés

Les administrateurs système sont encouragés à créer leurs propres feuilles de style en cascade (*.css) et de les charger en tant que schémas personnalisés utilisables par n'importe quelle organisation du système.

Création d'un schéma personnalisé

La procédure suivante permet de créer et de tester rapidement un schéma personnalisé.

Connectez-vous avec un compte SysAdmin.
Cliquez sur le lien Schemes (Schémas) pour accéder à la liste et à un aperçu des schémas.
Cliquez sur le bouton Open This Scheme (Ouvrir ce schéma) en regard du schéma correspondant à l'apparence qui vous intéresse.
Créez un nouveau fichier texte sur votre ordinateur de bureau et renommez-le myscheme.css.
Copiez le code de la feuille de style de la page Scheme Profile (Profil du schéma), collez-le dans votre nouvelle feuille de style et enregistrez-la.
Apportez les modifications voulues à la feuille de style sur votre ordinateur de bureau et enregistrez-la. La liste des styles css que vous pouvez modifier pour obtenir l'apparence voulue est présentée dans la section Styles reconnus ci-après.
Dans la liste Scheme (Schéma), cliquez sur le lien Add Scheme (Ajouter un schéma), naviguez jusqu'à la feuille de style sur votre ordinateur de bureau, donnez-lui un nom et chargez-la.
Dans la liste Scheme (Schéma), cliquez sur Preview pour afficher un aperçu de votre nouveau schéma et répétez au besoin l'étape 6.

Styles reconnus

Cette section décrit les styles css que vous pouvez modifier pour changer l'apparence d'un schéma. Si un style ne figure pas dans la feuille de style css de votre schéma, il vous suffit de l'ajouter.

Style	Description
`#maintable`	ID du tableau principal renfermant le contenu de chaque page Web. Ce style est notamment utile pour insérer une bordure autour du contenu ou pour lui attribuer une couleur différente de celle appliquée au reste de la page.
`.sectiontitle`	Sous-titres des sections de contenu. Spécifiez une couleur de police (COLOR) pour ce style.
`.userhead`	Couleur d'arrière-plan de la boîte de recherche et de la barre utilisateur située en haut de la page qui contient My Account (Mon compte) et Sign Out (Déconnexion). Spécifiez une couleur d'arrière-plan (BACKGROUND-COLOR) pour ce style. Remarque : spécifiez `#userbar` pour attribuer une couleur différente à la barre utilisateur supérieure.
`a.userhead:link`	Couleur des liens figurant dans la section d'en-tête utilisateur. L'utilisation d'une couleur (COLOR) est obligatoire.
`a.userhead:visited`	Doit être identique à a.userhead:link.
`a.userhead:active`	Doit être identique à a.userhead:link.
`a.userhead:hover`	Doit être identique à a.userhead:link.
`#userbar`	Couleur de la barre utilisateur située en haut de la page qui contient My Account (Mon compte) et Sign Out (Déconnexion).
`#userbar > td`	Couleur des bordures supérieures et inférieures de la barre utilisateur située en haut de la page. Définissez les propriétés BORDER-TOP et BORDER-BOTTOM. Exemple : `{border-top:solid 1px #8CC63F; border-bottom:solid 1px #8CC63F}`
`.listrow1`	Colonnes impaires des tableaux. Définissez uniquement une couleur d'arrière-plan (BACKGROUND-COLOR) pour ce style.
`.listrow2`	Colonnes paires des tableaux. Définissez uniquement une couleur d'arrière-plan (BACKGROUND-COLOR) pour ce style.
`.texttiny`	En-têtes et certaines informations des tableaux. Doit être similaire à `.textsmall`.
`.textsmall`	Applicable à la plupart du texte standard.
`.textnormal`	Contrairement à ce que son nom indique, ce style désigne une taille de texte supérieure à la normale.
`.textbig`	Texte de très grande taille. Doit être similaire à `.textnormal`.
`.userinput`	Couleur et taille de police utilisées dans les zones de saisie utilisateur et les listes déroulantes. Doit être similaire à `.textsmall`.
`.userinputarea`	Zones de texte. Doit être IDENTIQUE à `.userinput`.
`.pageheadingimage`	Affiche/masque les icônes existantes. Voir aussi Marque.
`.bulletimage`	Affiche/masque les bulles d'organisation. Voir aussi Marque.
`BODY`	Corps du document. L'utilisation d'au moins une couleur d'arrière-plan (BACKGROUND-COLOR) est recommandée.
`a:link`	Couleur des liens. L'utilisation d'une couleur (COLOR) est obligatoire.
`a:visited`	Couleur des liens consultés. Spécifiez une couleur de police (COLOR).
`a:active, a: hover`	Couleur des liens survolés à l'aide du pointeur de la souris. Spécifiez une couleur de police (COLOR).
`#signonsubmitcontainer .button.signonbutton`	Couleur du bouton de connexion de la page de connexion. Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la police (COLOR). Vous devez également ajouter `!important` dans le code. Exemple : `#signonsubmitcontainer .button.signonbutton {background-color:red !important;}`
`#signonsubmitcontainer .button.signonbutton:` `hover`	Couleur du bouton de connexion de la page de connexion lorsqu'il est survolé par le pointeur de la souris. Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la police (COLOR). Vous devez également ajouter `!important` dans le code. Exemple : `#signonsubmitcontainer .button.signonbutton:hover {background-color:blue !important;}`
`#signonauthcontainer`	Couleur de la boîte de connexion. Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la bordure (BORDER).
`.signoncontainer a:link`	Style des liens de la page de connexion. Définissez une couleur de police (COLOR) et la mise en forme du texte (TEXT-DECORATION).
`a.alert:link`	Couleur appliquée aux liens « dynamiques » (pour les utilisateurs bloqués, par exemple). L'utilisation d'une couleur (COLOR) est obligatoire. Il est recommandé de conserver la couleur rouge.
`a.alert:visited`	Doit être identique à a.alert:link.
`a.alert:active`	Doit être identique à a.alert:link.
`a.alert:hover`	Doit être identique à a.alert:link.
`.button`	Style de bouton standard. Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la police (COLOR).
`.btnPrimary`	Couleur des boutons principaux, comme Save (Enregistrer), OK, Upload (Charger), Download (Télécharger), Send (Envoyer). Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la police (COLOR).
`.btnSecondary`	Couleur des boutons secondaires, comme Cancel (Annuler) et No (Non), des boutons qui n'entraînent pas d'action immédiate ou des boutons de moindre importance. Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la police (COLOR).
`.tab.selectedtab`	Couleur de l'élément sélectionné dans le volet de navigation gauche. Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la police (COLOR).
`.tab a`	Couleur des boutons du volet de navigation gauche. Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la police (COLOR).
`.tab a:hover` `.tab a:active`	Couleur des boutons du volet de navigation gauche lorsqu'ils sont survolés par le pointeur de la souris. Spécifiez une couleur pour l'arrière-plan (BACKGROUND-COLOR) et la police (COLOR). La couleur de `.tab a:hover` et de `.tab a:active` est généralement la même.