Créer un thème pour EAS ou Epistema LMS
Un article de EpistemaWiki.
Sommaire |
Introduction
Un thème est un ensemble de fichiers destinés à modifier l'apparence de l'application EAS ou Epistema LMS.
Ces fichiers sont des scripts PHP très simples, contenant essentiellement du HTML, et qui "habillent" l'application.
Utilisation
Le thème de l'application peut être choisi pour l'espace candidat/apprenant ou pour l'espace d'administration, via le menu "Administration > Paramètres de l'application > Thème graphique de la plate-forme".
Structure d'une page
Une page typique d'Epistema LMS ou d'EAS comporte trois zones principales : les onglets, la marge, et le contenu :
Les onglets sont affichés via un mécanisme CSS classique basé sur des listes à points (UL), selon le procédé décrit sur cette page : http://www.alistapart.com/articles/slidingdoors2/
Il permet un affichage des onglets sous une forme horizontale ou verticale.
A ces trois zones s'ajoutent bien entendu la zone d'entête (en particulier avec le logo, etc...) et la zone de pied de page (avec le copyright, la version, ...).
Fichiers obligatoires
-
header.phpetfooter.php:header.phpest inclus en premier, puis le contenu de la page est affiché, puis enfinfooter.phpest inclus. -
header_simple.phpetfooter_simple.php: Ces deux fichiers sont inclus en lieu et place deheader.phpetfooter.phpquand une page doit être affichée sans onglets ni bas de page (certaines popup, etc.).
- Le
manifest.php: contient quelques données sur le thème, avec en particulier le nom du thème, l'auteur, le nom de la vignette - La vignette : une copie d'écran du thème, réduite à 250 pixels de large
Fichiers optionnels
A ces fichiers peuvent être ajoutés des feuilles css, des images, des fichiers JavaScripts, les css spécifiques aux onglets.
Onglets
La personnalisation des onglets demande un petit peu de précision. Il est important de lire l'article d'aListApart pour commencer, afin de comprendre comment les onglets fonctionnent : http://www.alistapart.com/articles/slidingdoors2/
Il faut ensuite modifier les images du dossier css_tabs, right_both.gif et left_both.gif qui définissent la portion droite et gauche de chaque "porte d'ascenseur", en version activée et désactivée. bg.gif est l'image de fond appliquée à l'ensemble de la barre d'onglets.
Si la taille des images right_both.gif et left_both.gif est changée, il faudra aussi modifier le fichier css_tabs.css afin que celui prennent en compte le bon décallage à appliquer entre le mode activé et le mode désactivé, et entre la partie droite et la partie gauche. Se référer à l'article pour plus de détails.
Note : les onglets affichent le tableau $GLOBALS['EasyquizzServerTabs'] - si vous souhaitez utiliser une autre forme d'affichage (par exemple un système avec des menus déroulants, etc, le plus simple est de réimplémenter la fonction EchoTabs().
En pratique
La façon la plus simple de développer un thème est de copier un thème existant et de le modifier. S'assurer juste de commencer par modifier le manifest pour y mettre un nouveau nom, puis placer le nouveau thème dans le dossier data/themes de l'application.
