Modifier les styles avec CSS
Un article de Claroline Documentation.
Nous allons traiter ici la procédure à suivre pour modifier le layout de la plate-forme Claroline, c'est à dire : adapter la taille, la couleur des bandeaux, du texte, des bordures, la taille du texte, ...
Nous vous recommandons de copier le fichier de style par défaut claroline/css/default.css sous un autre nom claroline/css/monstyle.css et de utiliser monstyle.css ensuite comme style par défaut de la plate-forme (Configuration > Paramètre Généraux > Layout)
Si vous n'êtes pas familier avec le code css, visitez d'abord ce tutoriel : http://www.w3schools.com/css/default.asp ( from http://www.w3schools.com ) qui est une très bonne introduction aux css.
Si vous réalisez une belle feuille de style pour votre campus et voulez la partager avec le reste de la communauté, il est libre pour vous de nous l'envoyer à info@claroline.net, nous nous ferons un plaisir de la proposer sur le site claroline.net (http://www.claroline.net) ou de la placer dans une prochaine version de Claroline.
Des classes de style ont été définies dans la CSS, pour adapter les différents éléments de la page. Celles-ci sont présentées dans l'ordre d'apparition des éléments :
- Les balises principales
- Bannière supérieure
- Ligne du campus
- Ligne utilisateur
- Ligne de cours
- Historique des liens (bread crump, par exemple Claroline > Math > Agenda)
- Corps de la page
- Bannière inférieure
Ensuite les éléments particuliers :
- Les liens d'action, les commandes
- Les tableaux
- Les divers
| Sommaire |
Modifier la mise en page du contenu général de Claroline
/******************************************************************************
MAIN HTML TAGS STYLE
******************************************************************************/
Cette section indiquent l'aspect par défaut du texte (dans le "corps" (body)) et des liens (dans" a") dans Claroline.
C'est également dans "Body" que vous devez indiquer la couleur de fond si vous voulez la changer.
La modification des attributs text-decoration et border de la balise "a|img" affecteront l'aspect des icônes qui précèdent les noms d'outils.
Si vous changez un attribut de la balise body, cela aura des répercussions sur toute la plate-forme.
Modifier la bannière supérieure
/******************************************************************************
CLAROLINE TOP BANNER
******************************************************************************/
Le bannière supérieure est constituée de 4 parties :
- Ligne du campus
- Ligne utilisateur
- Ligne de cours
- Historique des liens (bread crump, par exemple Claroline > Math > Agenda)
Ces parties ne sont montrées que quand cela a du sens, par exemple la bannière utilisateur n'apparaît que lorsqu'on est connecté à la plate-forme.
/*----------------------------------------------------------------------------
CAMPUS LINE
----------------------------------------------------------------------------*/
Cette sous-section définit la ligne du campus où l'on retrouve le nom de la plate-forme et un lien vers l'institution.
background: url(./monstyle/bg_header.jpg) no-repeat top;
permet par exemple de n'afficher qu'une seul image, par exemple le logo de l'institution.
Le positionnement est fait en mettant div avec les identifiants #campusBannerRight and #campusBannerLeft. Les identifiants #siteName et #institution ne prennent plus en compte le positionnement.
/*----------------------------------------------------------------------------
USER LINE
----------------------------------------------------------------------------*/
Cette sous-section définit la ligne relative à l'utilisateur qui lui permet d'afficher la liste de ces cours, son profil, son agenda.
Le positionnement est fait en mettant div avec les identifiants #userBannerRight et #userBannerLeft.
/*----------------------------------------------------------------------------
COURSE LINE
----------------------------------------------------------------------------*/
Cette sous-section définit la ligne relative au cours.
Le positionnement est fait en mettant div avec les identifiants #courseBannerRight et #courseBannerLeft. Les propriétés pour #course et #courseToolList ne sont plus nécessaires.
/*----------------------------------------------------------------------------
BREAD CRUMB TRAIL
----------------------------------------------------------------------------*/
Cette sous-section définit l'historique des liens qui se trouve juste au-dessous de la bannière.
Modifier le corps de la page
/******************************************************************************
CLAROLINE BODY
******************************************************************************/
Cette section permet de changer le corps de la page (cad les bannières supérieure ou inférieure).
Mofidier l'aspect de la bannière inférieure
/******************************************************************************
CLAROLINE FOOTER
******************************************************************************/
La classe .claroFooter est utilisée pour définir tout ce qui tout la bannière inférieure.
Dans la version 1.8, l'identifiant #footer a été renommé #campusFooter. Trois nouveaux conteneurs div ont été ajoutés : #campusFooterRight, #campusFooterLeft et #campusFooterCenter.
Modifier l'aspect des tableaux
/******************************************************************************
CLAROLINE TABLE
******************************************************************************/
Cette section permet de modifier les tableaux HTML qui sont utilisés partout dans Claroline pour afficher la liste des utilisateurs, des documents, des cours,...
La classe superHeader permet de modifier la ligne au-dessus des colonnes du tableau. La classe headerX permet de modifier les titres de colonnes. La classe headerY permet de modifier les titres de lignes.
Modifier l'aspect des divers éléments
/******************************************************************************
VARIOUS CLAROLINE CSS CLASS
******************************************************************************/
Warning messages layout
La classe .claroMessageBox permet de définir l'aspect des messages qui sont affichés dans le haut du corps de la page.
Les éléments invisibles
La classe .invisible définit l'aspect des éléments masqué à l'apprenant, par exemple les outils du cours qui sont déactivés.
Mise en évidence d'un élément
Principalement utilisée dans l'outil Exercice, la classe .correct permet de mettre l'élément correct en évidence. A contrario, la classe .error met en évidence l'élément erroné.
La classe .highlight permet de mettre un élément en évidence, par exemple Aujourd'hui dans l'agenda.
La classe .required met en évidence l'élément requis dans un formulaire.
Modifier l'aspect du menu à droite de la page d'accueil
La classe .claroRightMenu définit le fond et les liens du menu de droite de la page d'accueil.
Message d'aide
La classe .HelpText définit la mise en page des pop-up d'aide qui s'affiche lorsqu'on clique sur le point d'interrogation.
Mise en page avec onglet
L'identifiant #navlist définit la mise en page par onglet.
