Attention : vous consultez actuellement la documentation dédiée aux versions 2.x de Moodle. La documentation pour les versions 3.x de Moodle est consultable ici : Eléments de cours : Adapter l'apparence visuelle par défaut.

Eléments de cours : Adapter l'apparence visuelle par défaut

De MoodleDocs

Retour à l'index

Comme les éléments de cours adressent des briques sémantiques à haut niveau du contenu, l'aspect et l'intégration visuelle dans la cohérence du thème environnant est un sujet courant de l'intégrateur.

Il a fallu plusieurs années de maturation pour arriver à un modèle permettant à la fois aux éléments de cours de jouer une version "standard" des contenus, et permettre une intégration visuelle et stylistique totalement flexible. Voici quelques pistes de méthodes techniques pour surcharger la définition originale des éléments de cours, et les intégrer dans un projet éditorial local.

Redéfinition des icônes

Les icônes utilisée par la version originale sont intégrées par des règles de style. Un remplacement des icônes suggère de définir un jeu d'icônes alternatif dans un répertoire approprié du thème actif :

  /pix_plugins/mod/customlabel

est probablement la meilleure position candidate pour poser un jeu d'icônes alternatif et les adresser à partir des règles CSS de remplacement.

Surcharger rapidement les règles de styles originales

La plupart des thèmes de Moodle 2 permettent maintenant de définir des règles CSS additionnelles par l'administration du thème (sans toucher au code de Moodle). Ceci est une première méthode rapide pour reprendre la main sur quelques rendus des Eléments de cours. La documentation des différents types d'éléments vous donnera les références principales des sélecteurs CSS.

Surcharger les feuilles de styles originales par une feuille de style additionnelle

Si les modifications sont importantes, la technique précédente n'est pas gérable très longtemps. Elle permet de glisser quelques corrections mais pas de reprendre une stratégie complète de styling. Dans la technique qui suit, nous pouvons concentrer une feuille de style unique qui prendra la main sur toutes les petites feuilles de style locale de chaque type d'Elément de cours.

Commencez par ajouter un fichier CSS supplémentaire dans le répertoire "style" du thème actif, Disons qu'il s'appelle "customlabels.css".

Enregistrez alors l'utilisaton de cette feuille de style dans le fichier config.php à la racine du thème, le plus souvent, dans le tableau"sheets" :

  $THEME->sheets = array(
   'afterburner_pagelayout',   /** Must come first: page layout **/
   'afterburner_styles',   /** Must come second: default styles **/
   'afterburner_menu',
   'afterburner_blocks',
   'afterburner_mod',
   'afterburner_calendar',
   'afterburner_dock',
   'afterburner_rtl',
   'afterburner_settings',
   'customlabels');

L'exemple précédent complète la configuration du thème "afterburner".

Dans le fichier "customlabels.css", il est alors possible de reprendre le contrôle des couleurs et même des image utilisées pour les icônes.

Pour donner un exemple, changeons l'apparence et l'icône de l'Elément de cours "important", et du même coup, ajoutons le support du format de cours "page". Voici ce que nous ajouterions au fichier CSS :

  /* Important */
  
  #page-region-main td.custombox-header-thumb.important,
  #region-main td.custombox-header-thumb.important{
       background-image: url("/theme/afterburner/pix_plugins/customlabel/icon_important.png") !important; 
       background-repeat: no-repeat;
       height:73px !important;
       width:80px !important;
       min-width:80px !important;
       border-right:1px solid #A0A0A0 !important;
  }
  
  #page-region-pre td.custombox-header-thumb.important,
  #region-pre td.custombox-header-thumb.important,
  #region-post td.custombox-header-thumb.important,
  #page-region-post  td.custombox-header-thumb.important{
  	background-image: url("/theme/afterburner/pix_plugins/customlabel/icon_important_small.png") !important; 
  	background-repeat: no-repeat; 
       height:73px !important;
       width:35px !important;
       min-width:35px !important;
       border-right:1px solid #A0A0A0 !important;
  }
  
  td.custombox-content.important{
       background-color: #ffffff !important;
       background-image: none !important;
       color: #990000 !important;
  }

De cette façon, le chemin de l'icône à utiliser est modifié. Notez que les marqueurs !important doivent être explicites pour que la surcharge fonctionne, car les feuilles locales de composants Moodle sont ajoutées après que les feuilles centrales du style aient été compilées.