Création de votre Premier Thème Moodle complet

Alors passons à…

Création d’un nouveau thème

Trouver un thème de base sur lequel créer votre thème Moodle est la première chose que vous devez faire.Il existe cependant différentes façons de le faire; vous pouvez faire une copie du thème standard et le renommer comme vous l’avez fait dans une partie de cet article, ou vous pouvez utiliser un thème parent également basé sur le thème standard.

Le point important ici est que le thème standard fourni avec Moodle est la pierre angulaire du processus de thématisation de Moodle. Chaque autre thème Moodle devrait être basé sur ce thème et décrirait normalement les différences par rapport au thème standard. Bien que cette méthode fonctionne et soit un moyen simple de démarrer avec le thème Moodle, elle pose des problèmes car de nouvelles fonctionnalités pourraient être ajoutées à Moodle, ce qui pourrait entraîner l’affichage ou le fonctionnement incorrect de votre thème. Le thème standard sera toujours mis à jour avant le lancement d’une nouvelle version de Moodle. Donc, si vous choisissez de faire une copie du thème standard et de changer ses styles, il serait préférable de vous assurer que vous utilisez également un thème parent. De cette façon, le thème parent sera votre thème de base avec les modifications que vous apportez à votre copie du thème standard.

Cependant, il existe une autre façon de créer votre premier thème, à savoir créer une copie d’un thème très proche du thème standard, tel que standardwhite, et l’utiliser comme thème. Moodle utilisera ensuite le thème standard comme thème de base et appliquera toutes les modifications que vous apportez au thème blanc standard en haut (parent). Tout ce que nous faisons est de décrire les différences entre les thèmes standard et standardwhite. C’est mieux parce que les développeurs de Moodle apporteront parfois des modifications au thème standard pour être à jour avec les nouvelles fonctionnalités de Moodle. Cela signifie qu’à chaque mise à jour de Moodle, votre dossier de thème standard sera mis à jour automatiquement, évitant ainsi tout problème d’affichage désagréable causé par les mises à jour de Moodle.

La façon dont vous configurez les thèmes Moodle dépend entièrement de vous. Si vous voyez un thème qui correspond presque à ce que vous voulez et qu’il n’y a pas vraiment beaucoup de changements nécessaires, l’utilisation d’un thème parent est logique, car la plupart des styles dont vous avez besoin ont déjà été écrits. Cependant, si vous souhaitez créer un thème complètement différent de tout autre thème ou si vous souhaitez vraiment entrer dans le thème Moodle, il serait préférable d’utiliser une copie de l’une des feuilles standard.

Voyons donc quelles sont les différences lors de l’utilisation de différentes configurations de thèmes, et voyons quel effet ces différentes méthodes ont sur le processus de thématisation.

• Accédez à votre dossier de thème dans C: Program FilesApache Software FoundationApache 2.2htdocstheme.
• Copiez le thème standard en cliquant avec le bouton droit de la souris sur le dossier du thème et en choisissant Copier.
• Collez le thème copié dans le répertoire du thème (le même répertoire dans lequel vous vous trouvez actuellement).
• Renommez la copie du dossier standard en blackandblue ou tout autre nom que vous souhaitez choisir (n’oubliez pas d’utiliser des majuscules ou des espaces).
• Ouvrez votre site Moodle et accédez à Apparence d’administration du site / Thèmes / Sélecteur de thèmes/, puis choisissez le thème blackandblue que vous venez de créer.

Vous avez peut-être remarqué que le thème affiché dans la capture d’écran précédente a un en-tête qui dit Thème noir et bleu. C’est parce que j’ai ajouté ceci au nom complet du site dans la page des paramètres de la première page.

Temps d’action – définition d’un thème parent

1. Ouvrez votre navigateur Web et accédez à votre site Moodle et connectez-vous en tant qu’administrateur.
2. Allez dans le sélecteur Administration|Apparence|Thèmes|Thèmes du site et choisissez votre thème blackandblue s’il n’est pas déjà sélectionné.
3. Accédez à la racine de votre dossier blackandblue, cliquez avec le bouton droit sur la configuration.fichier php, et choisissez Ouvrir avec /WordPad.

4. Vous devez apporter quatre modifications à ce fichier afin de pouvoir utiliser ce thème et un thème parent tout en vous assurant d’utiliser toujours le thème standard par défaut comme base. Voici les changements :

   THEMETHEME- >sheets=array('user_styles'); 
   THEMETHEME->standardsheets= true; 
   parentTHEME->parent='autumn'; 
   THEMETHEME->parentsheets=array('styles'); 

   Regardons chacune de ces instructions, à son tour.

   THEMETHEME- >sheets=array('user_styles');

   Contient les noms de tous les fichiers de feuille de style que vous souhaitez inclure dans celui-ci pour votre thème blackandblue, à savoir user_styles.

   THEMETHEME- >standardsheets=true; 

   Ce paramètre est utilisé pour inclure les feuilles de style du thème standard. S’il est défini sur True, il utilisera toutes les feuilles de style du thème standard. Alternativement, il peut être défini comme un tableau afin de charger des feuilles de style individuelles dans l’ordre requis. Nous avons défini cela sur True, nous utiliserons donc toutes les feuilles de style du thème standard.

   THEMETHEME - >parent='automne';

   Cette variable peut être définie pour utiliser un thème comme thème parent, qui est inclus avant le thème actuel. Cela facilitera la modification d’un autre thème sans avoir à modifier les fichiers réels.

   THEMETHEME- >parentsheets=array('styles'); 

   Cette variable peut être utilisée pour choisir soit toutes les feuilles de style du thème parent, soit des fichiers individuels. Il a été configuré pour inclure les styles.fichier css du thème parent, à savoir l’automne. Comme il n’y a qu’une seule feuille de style dans le thème d’automne, vous pouvez définir cette variable sur True. De toute façon, vous aurez le même résultat.

5. Enregistrez-les en noir et en bleu.php, et actualisez la fenêtre de votre navigateur Web. Vous devriez voir quelque chose de similaire à la capture d’écran suivante. Notez que vos blocs peuvent être différents de ceux ci-dessous, mais vous pouvez l’ignorer.

Que vient-il de se passer?

D’accord, vous avez maintenant une copie du thème standard qui utilise le thème d’automne (par Patrick Malley) comme parent. Vous avez peut-être remarqué que l’en-tête n’est pas correct et que l’en-tête du thème d’automne approprié ne s’affiche pas. Eh bien, c’est parce que vous utilisez essentiellement la copie du thème standard et que l’en-tête de ce thème est celui que vous voyez ci-dessus. Ce ne sont que les fichiers CSS qui sont inclus dans cette hiérarchie, donc les modifications HTML ne seront pas visibles tant que vous n’aurez pas modifié l’en-tête de votre thème standard.fichier html.

Avoir un héros go – choisissez un autre thème parent

Revenez en arrière et jetez un coup d’œil à certains des thèmes sur Moodle.org et téléchargez-en un que vous aimez. Ajoutez ce thème en tant que thème parent à la configuration de votre thème blackandblue.fichier php, mais cette fois, choisissez les feuilles de style que vous souhaitez utiliser à partir de ce thème. Le thème de la rentrée scolaire est un bon pour cet exercice, car ses feuilles de style sont clairement étiquetées. Donc, vous

Copiez les fichiers d’en-tête et de pied de page

Pour montrer que vous utilisez les fichiers CSS du thème d’automne et les fichiers HTML du thème standard, vous pouvez simplement copier l’en-tête.html et pied de page.fichiers html du thème d’automne de Patrick Malley et collez-les dans le dossier de votre thème blackandblue. Ne vous inquiétez pas d’écraser vos fichiers d’en-tête et de pied de page, car vous pouvez toujours les copier à nouveau à partir du dossier de thème standard ac tual.

Temps d’action – copie de l’en-tête.html et pied de page.fichiers html

1. Accédez au dossier du thème d’automne et mettez en surbrillance l’en-tête.html et pied de page.fichiers html en maintenant la touche Ctrl enfoncée et en cliquant sur les deux. Faites un clic droit sur les fichiers sélectionnés et choisissez Copier.
2. Accédez au dossier de votre thème blackandblue, faites un clic droit et choisissez Coller.
3. Retournez dans la fenêtre de votre navigateur et appuyez sur le bouton F5 pour actualiser la page. Vous verrez maintenant le thème complet de l’automne.

Que vient-il de se passer?

Vous avez copié l’en-tête du thème d’automne.html et pied de page.fichiers html dans votre thème blackandblue, afin que vous puissiez voir le thème d’automne complet fonctionner. Vous n’utiliserez probablement pas réellement l’en-tête.html et pied de page.les fichiers html que vous venez de copier, car ce n’était qu’un exemple du fonctionnement du processus de thématisation Moodle.

Vous avez donc maintenant une copie non modifiée du thème standard appelé blackandblue, qui utilise le thème d’automne comme thème parent. Tout ce que vous devez faire maintenant pour apporter des modifications à ce thème est de modifier votre fichier CSS dans le dossier thème blackandblue.

Tâches ménagères du dossier thème

Cependant, vous devez d’abord faire quelques choses, car vous avez une copie exacte du thème standard en dehors de l’en-tête.html et pied de page.fichiers html. Ce dossier copié contient des fichiers dont vous n’avez pas besoin, car le seul fichier que vous avez défini pour votre thème à utiliser était user_styles.fichier css dans la configuration.fichier php plus tôt. C’était le premier changement que vous avez effectué :

THEMETHEME- >sheets=array('user_styles'); 

Le style utilisateur.le fichier css n’existe pas dans le dossier de votre thème blackandblue, vous devrez donc le créer. Vous devrez également supprimer tous les autres fichiers CSS présents, car votre nouveau thème blackandblue n’utilisera qu’une seule feuille de style, à savoir les user_styles.fichier css que vous allez créer dans les sections suivantes.

Temps d’action – création de notre feuille de style

1. Faites un clic droit n’importe où dans votre dossier blackandblue et choisissez Nouveau document texte |.
2. Renommez ce document texte en user_styles.css en cliquant à nouveau avec le bouton droit de la souris et en choisissant Renommer.

Temps d’action – suppression des fichiers CSS dont nous n’avons pas besoin

1. Supprimez les fichiers CSS suivants en les sélectionnant, puis en cliquant avec le bouton droit sur les fichiers sélectionnés et en choisissant Supprimer.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • mise en page de style.css
   • styles_moz.css

   { contexte: #000000;}

   

Que vient-il de se passer ?

Dans les deux dernières tâches, vous avez créé un fichier CSS vide appelé user_style.css dans le dossier de votre thème blackandblue. Vous avez ensuite supprimé tous les fichiers CSS dans le dossier de votre thème blackandblue, car vous n’en aurez plus besoin. N’oubliez pas qu’il ne s’agit que de copies des fichiers CSS du dossier thème standard et que vous avez défini votre thème pour qu’il utilise le thème standard comme base dans la configuration du thème blackandblue.fichier php.

Apportons quelques modifications

Maintenant, vous avez configuré votre thème comme vous le souhaitez, c’est-à-dire que vous utilisez votre propre thème blackandblue en utilisant le thème standard comme base et le thème d’automne comme parent. Passez à autre chose et apportez quelques modifications à votre style utilisateur.fichier css afin que vous puissiez voir quel effet cela a sur votre thème et vérifier que toute votre configuration.les paramètres du fichier php sont corrects. N’oubliez pas que tous les styles actuels sont hérités du thème de l’automne.

Temps d’action – vérifier notre configuration

1. Ouvrez votre site Moodle avec le thème actuel (qui devrait être blackandblue mais ressemble au thème d’automne).
2. Accédez au dossier de votre thème blackandblue, faites un clic droit sur le style utilisateur.fichier css, et choisissez Ouvrir. Ce fichier doit être complètement vide.

3. Tapez la ligne CSS suivante pour l’élément body, puis enregistrez le chier fi :

    body {
    background: #000000;
   }

   

4. Actualisez maintenant la fenêtre de votre navigateur. Vous verrez que le fond est maintenant noir.

   

Remarque : Lorsque vous utilisez Firebug pour identifier les styles utilisés, il peut ne pas toujours être évident où ils se trouvent ou quel style contrôle cet élément de la page. Un exemple de ceci est le code body {background: #000000; } que nous venons de coller dans notre style utilisateur.fichier css. Si nous avions utilisé Firebug pour identifier ce style, nous ne l’aurions pas trouvé. Au lieu de cela, je viens de jeter un coup d’œil au fichier CSS du thème de l’automne. Ce que j’essaie de dire ici, c’est qu’il y aura toujours un élément de fouille et d’essais et erreurs.

Que vient-il de se passer ?

Tout semble bien là, n’est-ce pas? Vous avez ajouté une déclaration de style à votre user_style vide.fichier css pour changer la couleur d’arrière-plan et avoir vérifié les modifications dans votre navigateur. Vous savez maintenant comment fonctionnent les thèmes parents et savez qu’il vous suffit de copier les styles de Firebug dans votre style utilisateur.fichier css et modifiez les déclarations de style qui doivent être modifiées.