« Créer un thème basé sur Boost » : différence entre les versions

Dernière version du 21 octobre 2021 à 08:13

Nouveauté
Moodle 3.2

Ceci est un tutoriel pour créer un nouveau thème à partir de Moodle 3.2.

Depuis Moodle 3.2 un nouveau thème principal appelé "Boost" constitue un excellent point de départ pour les utilisateurs souhaitant créer un thème Moodle utilisant toutes les dernières fonctionnalités disponibles pour les thèmes de Moodle.

Pour commencer

Qu'est-ce qu'un thème? Un thème dans Moodle est un type de plugin qui peut être développé. Les thèmes affichent la structure de chaque page et permettent de personnaliser n'importe quelle page dans Moodle.

Ce tutoriel est basé sur un thème de travail nommé "theme_photo". Vous pouvez le télécharger ou consulter le code source correspondant ici: https://github.com/damyon/moodle-theme_photo

Choisir un nom

Votre nouveau thème aura besoin d'un nom. Choisissez quelque chose de court et simple à retenir et assurez-vous que ce n'est pas un nom qui a déjà été utilisé par quelqu'un d'autre. Une recherche rapide sur moodle.org/plugins peut vous éviter beaucoup de travail en renommant des choses plus tard.

Appelons notre nouvel exemple de thème "photo" car nous ajouterons quelques paramètres pour autoriser les "photos" à divers endroits dans Moodle.

Fichiers de départ

Comme tout plugin, les thèmes doivent commencer par la structure de base d'un plugin Moodle. Voir https://docs.moodle.org/dev/Tutorial#The_skeleton_of_your_plugin pour un aperçu des fichiers communs à tous les plugins de Moodle.

En suivant ce guide, nous pouvons commencer à créer notre thème. Nous créons d’abord le dossier du nouveau thème sous le dossier "/ theme /" du répertoire racine de Moodle.

/theme/photo/

Nous devons maintenant ajouter des fichiers correspondant à tout plugin standard de Moodle. Le premier est version.php

/theme/photo/version.php

<?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.                                                               
defined('MOODLE_INTERNAL') || die();                                                                                                
                                                                                                                                    
// This is the version of the plugin.                                                                                               
$plugin->version = '2016102100';                                                                                                    
                                                                                                                                    
// This is the version of Moodle this plugin requires.                                                                              
$plugin->requires = '2016070700';                                                                                                   
                                                                                                                                    
// This is the component name of the plugin - it always starts with 'theme_'                                                        
// for themes and should be the same as the name of the folder.                                                                     
$plugin->component = 'theme_photo';                                                                                                 
                                                                                                                                    
// This is a list of plugins, this plugin depends on (and their versions).                                                          
$plugin->dependencies = [                                                                                                           
    'theme_boost' => '2016102100'                                                                                                   
];

Nous avons également besoin d'un fichier de langue afin que toutes nos chaînes puissent être traduites dans différentes langues. Le nom de ce fichier est le nom du composant de notre plugin et il se trouve dans le dossier lang / en / de notre plugin. Nous pouvons inclure des traductions de notre plugin, mais nous pouvons également fournir des traductions via le site Web https://lang.moodle.org/ une fois que notre plugin a été publié dans la base de données de plugins à l' adresse http://www.moodle.org/plugins/ .

/theme/photo/lang/en/theme_photo.php

<?php
// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.                                                               
defined('MOODLE_INTERNAL') || die();                                                                                                
                                                                                                                                    
// A description shown in the admin theme selector.                                                                                 
$string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.';                
// The name of our plugin.                                                                                                          
$string['pluginname'] = 'Photo';                                                                                                    
// We need to include a lang string for each block region.                                                                          
$string['region-side-pre'] = 'Right';

Fichiers spécifiques au thème

Les plugins de thème ont un peu plus de fichiers standard à définir.

Les thèmes nécessitent un fichier favicon à afficher dans la barre d'adresse. Voir [ Favicon ].

pix/favicon.ico

(Fichier image non montré).

Les thèmes nécessitent également l'affichage d'un exemple de capture d'écran dans le sélecteur de thèmes.

pix/screenshot.jpg

Les thèmes nécessitent un fichier lib.php. Ce fichier contient les rappels utilisés par différentes API dans Moodle. Initialement, ce fichier peut être vide, mais à mesure que nous ajouterons des fonctionnalités à notre thème, nous devrons y ajouter quelques fonctions.

lib.php

<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.                                                               
defined('MOODLE_INTERNAL') || die();

// We will add callbacks here as we add features to our theme.

La configuration du thème va se faire dans un fichier appelé config.php. C'est l'un des fichiers les plus importants de notre thème. Une fois ce fichier ajouté, nous serons prêts à tester notre thème pour la première fois..

config.php

<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.                                                               
defined('MOODLE_INTERNAL') || die();

// $THEME is defined before this page is included and we can define settings by adding properties to this global object.            
                                                                                                                                    
// The first setting we need is the name of the theme. This should be the last part of the component name, and the same             
// as the directory name for our theme.                                                                                             
$THEME->name = 'photo';                                                                                                             
                                                                                                                                    
// This setting list the style sheets we want to include in our theme. Because we want to use SCSS instead of CSS - we won't        
// list any style sheets. If we did we would list the name of a file in the /style/ folder for our theme without any css file      
// extensions.                                                                                                                      
$THEME->sheets = [];                                                                                                                
                                                                                                                                    
// This is a setting that can be used to provide some styling to the content in the TinyMCE text editor. This is no longer the      
// default text editor and "Atto" does not need this setting so we won't provide anything. If we did it would work the same         
// as the previous setting - listing a file in the /styles/ folder.                                                                 
$THEME->editor_sheets = [];                                                                                                         
                                                                                                                                    
// This is a critical setting. We want to inherit from theme_boost because it provides a great starting point for SCSS bootstrap4   
// themes. We could add more than one parent here to inherit from multiple parents, and if we did they would be processed in        
// order of importance (later themes overriding earlier ones). Things we will inherit from the parent theme include                 
// styles and mustache templates and some (not all) settings.                                                                       
$THEME->parents = ['boost'];                                                                                                        
                                                                                                                                    
// A dock is a way to take blocks out of the page and put them in a persistent floating area on the side of the page. Boost         
// does not support a dock so we won't either - but look at bootstrapbase for an example of a theme with a dock.                    
$THEME->enable_dock = false;                                                                                                        
                                                                                                                                    
// This is an old setting used to load specific CSS for some YUI JS. We don't need it in Boost based themes because Boost           
// provides default styling for the YUI modules that we use. It is not recommended to use this setting anymore.                     
$THEME->yuicssmodules = array();                                                                                                    
                                                                                                                                    
// Most themes will use this rendererfactory as this is the one that allows the theme to override any other renderer.               
$THEME->rendererfactory = 'theme_overridden_renderer_factory';                                                                      
                                                                                                                                    
// This is a list of blocks that are required to exist on all pages for this theme to function correctly. For example               
// bootstrap base requires the settings and navigation blocks because otherwise there would be no way to navigate to all the        
// pages in Moodle. Boost does not require these blocks because it provides other ways to navigate built into the theme.            
$THEME->requiredblocks = '';   

// This is a feature that tells the blocks library not to use the "Add a block" block. We don't want this in boost based themes because
// it forces a block region into the page when editing is enabled and it takes up too much room.
$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;

Prêt... partez !

Si vous avez suivi ces étapes, vous êtes maintenant sur le point d’installer et de tester votre nouveau thème. Essayez-le maintenant en allant sur la page des notifications de l'administrateur pour installer le nouveau plug-in, puis en choisissant votre nouveau thème dans le sélecteur de thèmes.

[Theme selector]

Lorsque vous choisissez le nouveau thème, vous constaterez qu’il a exactement le même aspect que Boost. À ce stade, avec notre configuration minimale - nous héritons presque de tout de notre thème parent, y compris les styles et les modèles. Cependant nous n'héritons pas de la totalité des paramètres de notre thème parent. Si vous choisissez un préréglage différent dans Boost, il n'est pas appliqué dans ce thème enfant.

Note: assurez-vous que votre fichier config.php contient $ THEME-> hidefromselector = false; (ou au moins défini sur false) ou bien votre thème n'apparaîtra pas dans le sélecteur de thèmes.

Et si je veux aussi les paramètres ?

Cette section est incluse pour plus de détails - mais il n’est pas recommandé que les thèmes utilisent les paramètres du thème parent. Pour savoir comment dupliquer les paramètres du thème parent afin qu'ils fonctionnent de manière indépendante, passez à Dupliquez les paramètres de Boost : #Duplicate the settings from Boost.

Si je veux que les paramètres de Boost s'appliquent également au thème enfant, j'ai besoin d'en savoir un peu plus sur la façon dont chacun des paramètres de Boost est appliqué pour les faire fonctionner dans mon thème enfant.

Premier paramètre - preset.

Le fichier "preset" est le fichier utilisé comme fichier principal pour la compilation scss. Dans Boost, cela est contrôlé par la valeur de configuration du thème:

theme_boost/config.php

$THEME->scss = function($theme) {
    return theme_boost_get_main_scss_content($theme);
};

theme_boost/lib.php

function theme_boost_get_main_scss_content($theme) {                                                                                
    global $CFG;                                                                                                                    
                                                                                                                                    
    $scss = '';                                                                                                                     
    $filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;                                                 
    $fs = get_file_storage();                                                                                                       
                                                                                                                                    
    $context = context_system::instance();                                                                                          
    if ($filename == 'default.scss') {                                                                                              
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');                                        
    } else if ($filename == 'plain.scss') {                                                                                         
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');                                          
    } else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_boost', 'preset', 0, '/', $filename))) {              
        $scss .= $presetfile->get_content();                                                                                        
    } else {                                                                                                                        
        // Safety fallback - maybe new installs etc.                                                                                
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');                                        
    }                                                                                                                               
                                                                                                                                    
    return $scss;                                                                                                                   
}

Le but de cette fonction est de rechercher un paramètre de thème "prédéfini" et d'extraire le fichier du stockage interne de Moodles ou du dossier / preset /. La fonction renvoie ensuite le contenu de ce fichier.

Cela ne fonctionne pas automatiquement pour notre thème enfant car nous n'avons pas de paramètre nommé "preset" dans notre thème enfant et ce code ne recherche pas le paramètre parents du thème. Si nous le voulions, nous pourrions le faire dans notre thème enfant :

config.php

// Ce paramètre définit le fichier scss principal pour notre thème à compiler. Nous pourrions le définir sur un fichier statique dans le dossier scss ou sur une fonction qui renvoie le SCSS en fonction des paramètres du thème.
$THEME->scss = function($theme) {

    // Il faut appeler une fonction de notre fichier lib.php du thème parent pour récupérer le contenu du fichier SCSS principal qui sera basé sur la configuration du thèmes parent, pas la nôtre. 
    $parentconfig = theme_config::load('boost');
    // Nous devons charger la configuration pour notre thème parent car c'est là que le paramètre prédéfini est défini. 
    return theme_boost_get_main_scss_content($parentconfig);
};

Paramètres 2+3 brandcolor + scsspre

La façon dont ces paramètres fonctionnent est qu’ils génèrent un bloc de SCSS à ajouter au fichier scss principal. En boost ils fonctionnent comme ça :

theme_boost/config.php

$THEME->prescsscallback = 'theme_boost_get_pre_scss';

theme_boost/lib.php

function theme_boost_get_pre_scss($theme) {                                                                                         
    global $CFG;                                                                                                                    
                                                                                                                                    
    $scss = '';                                                                                                                     
    $configurable = [                                                                                                               
        // Config key => [variableName, ...].                                                                                       
        'brandcolor' => ['brand-primary'],                                                                                          
    ];                                                                                                                              
                                                                                                                                    
    // Prepend variables first.                                                                                                     
    foreach ($configurable as $configkey => $targets) {                                                                             
        $value = isset($theme->settings->{$configkey}) ? $theme->settings->{$configkey} : null;                                     
        if (empty($value)) {                                                                                                        
            continue;                                                                                                               
        }                                                                                                                           
        array_map(function($target) use (&$scss, $value) {                                                                          
            $scss .= '$' . $target . ': ' . $value . ";\n";                                                                         
        }, (array) $targets);                                                                                                       
    }                                                                                                                               
                                                                                                                                    
    // Prepend pre-scss.                                                                                                            
    if (!empty($theme->settings->scsspre)) {                                                                                        
        $scss .= $theme->settings->scsspre;                                                                                         
    }                                                                                                                               
                                                                                                                                    
    return $scss;                                                                                                                   
}

Ce que fait ce code est:

Une boucle sur une liste de paramètres de thème mappés à une variable SCSS et création de certains SCSS pour initialiser cette variable à partir du paramètre. Dans Boost, il n'y a qu'un * brandprimary - mais si nous voulions exposer plus de variables d'amorçage en tant que paramètres de thème, nous pourrions utiliser cette fonction comme modèle dans notre thème enfant et ajouter d'autres paramètres au tableau $ configurable. Ajout de tous les SCSS bruts du paramètre de thème scsspre Renvoyer le tout en tant que chaîne à ajouter avant le fichier scss principal. Si vous voulez que ce code fonctionne dans votre thème enfant, utilisez les paramètres de Boost :

config.php

// This is a function that returns some SCSS as a string to prepend to the main SCSS file.                                          
$THEME->prescsscallback = 'theme_photo_get_pre_scss';

lib.php

// Function to return the SCSS to prepend to our main SCSS for this theme.
// Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
function theme_photo_get_pre_scss($theme) {
    // Load the settings from the parent.                                                                                           
    $theme = theme_config::load('boost');                                                                                           
    // Call the parent themes get_pre_scss function.                                                                                
    return theme_boost_get_pre_scss($theme);                         
}

Paramètre 4 scss (post)

Le paramètre final de Boost est un champ de texte brut qui ajoute du SCSS à la fin du fichier SCSS principal. C'est un endroit utile pour ajouter des règles de style car elles remplaceront les styles précédemment définis avec la même spécificité. Il est appliqué dans Boost par les lignes suivantes :

theme_boost/config.php

$THEME->extrascsscallback = 'theme_boost_get_extra_scss';

theme_boost/lib.php

function theme_boost_get_extra_scss($theme) {                                                                                       
    return !empty($theme->settings->scss) ? $theme->settings->scss : '';                                                            
}

Cela ne fait que renvoyer la valeur du paramètre sous forme de chaîne.

Pour que ce paramètre s'applique également à notre thème enfant, nous utilisons un code similaire aux sections précédentes.

config.php

// Il s'agit d'une fonction qui renvoie certains SCSS sous forme de chaîne à ajouter au fichier SCSS principal.                                          
$THEME->extrascsscallback = 'theme_photo_get_extra_scss';

lib.php

// Fonction pour renvoyer le SCSS à ajouter à notre SCSS principal pour ce thème. 
// Notez que le nom de la fonction commence par le nom du composant car il s'agit d'une fonction globale et nous ne voulons pas de conflits d'espace de noms. 
function theme_photo_get_extra_scss($theme) {
    // /Charge les paramètres à partir du parent.                                                                                           
    $ theme  = theme_config :: load ( 'boost' ) ;                                                                                            
    // Appelez la fonction get_extra_scss de thèmes parent.                                                                                
    return theme_boost_get_extra_scss ($ thème ) ;                                                                                 
                        
}

Dupliquer les paramètres de Boost

Il s'agit de la méthode recommandée pour étendre Boost car votre thème enfant ne sera pas affecté par les modifications des paramètres Boost et les deux thèmes pourront être utilisés séparément.

Tout ce qui doit être fait est de créer des paramètres de thème dans le thème enfant qui correspondent à chacun des paramètres du thème parent. Vous devrez ajouter des chaînes de langue correspondantes pour chacun de ces paramètres dans le fichier de langue.

Cet exemple montre comment procéder. Nous réutilisons la belle apparence du theme_boost_admin_settingspage_tabs de Boost et créons des versions dupliquées de chacun des paramètres.

settings.php

<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.                                                               
defined('MOODLE_INTERNAL') || die();                                                                                                
                                                                                                                                    
// This is used for performance, we don't need to know about these settings on every page in Moodle, only when                      
// we are looking at the admin settings pages.                                                                                      
if ($ADMIN->fulltree) {                                                                                                             
                                                                                                                                    
    // Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.                         
    $settings = new theme_boost_admin_settingspage_tabs('themesettingphoto', get_string('configtitle', 'theme_photo'));             
                                                                                                                                    
    // Each page is a tab - the first is the "General" tab.                                                                         
    $page = new admin_settingpage('theme_photo_general', get_string('generalsettings', 'theme_photo'));                             
                                                                                                                                    
    // Replicate the preset setting from boost.                                                                                     
    $name = 'theme_photo/preset';                                                                                                   
    $title = get_string('preset', 'theme_photo');                                                                                   
    $description = get_string('preset_desc', 'theme_photo');                                                                        
    $default = 'default.scss';                                                                                                      
                                                                                                                                    
    // We list files in our own file area to add to the drop down. We will provide our own function to                              
    // load all the presets from the correct paths.                                                                                 
    $context = context_system::instance();                                                                                          
    $fs = get_file_storage();                                                                                                       
    $files = $fs->get_area_files($context->id, 'theme_photo', 'preset', 0, 'itemid, filepath, filename', false);                    
                                                                                                                                    
    $choices = [];                                                                                                                  
    foreach ($files as $file) {                                                                                                     
        $choices[$file->get_filename()] = $file->get_filename();                                                                    
    }                                                                                                                               
    // These are the built in presets from Boost.                                                                                   
    $choices['default.scss'] = 'default.scss';                                                                                      
    $choices['plain.scss'] = 'plain.scss';                                                                                          
                                                                                                                                    
    $setting = new admin_setting_configselect($name, $title, $description, $default, $choices);                                     
    $setting->set_updatedcallback('theme_reset_all_caches');                                                                        
    $page->add($setting);                                                                                                           
                                                                                                                                    
    // Preset files setting.                                                                                                        
    $name = 'theme_photo/presetfiles';                                                                                              
    $title = get_string('presetfiles','theme_photo');                                                                               
    $description = get_string('presetfiles_desc', 'theme_photo');                                                                   
                                                                                                                                    
    $setting = new admin_setting_configstoredfile($name, $title, $description, 'preset', 0,                                         
        array('maxfiles' => 20, 'accepted_types' => array('.scss')));                                                               
    $page->add($setting);     

    // Variable $brand-color.                                                                                                       
    // We use an empty default value because the default colour should come from the preset.                                        
    $name = 'theme_photo/brandcolor';                                                                                               
    $title = get_string('brandcolor', 'theme_photo');                                                                               
    $description = get_string('brandcolor_desc', 'theme_photo');                                                                    
    $setting = new admin_setting_configcolourpicker($name, $title, $description, '');                                               
    $setting->set_updatedcallback('theme_reset_all_caches');                                                                        
    $page->add($setting);                                                                                                           
                                                                                                                                    
    // Must add the page after definiting all the settings!                                                                         
    $settings->add($page);                                                                                                          
                                                                                                                                    
    // Advanced settings.                                                                                                           
    $page = new admin_settingpage('theme_photo_advanced', get_string('advancedsettings', 'theme_photo'));                           
                                                                                                                                    
    // Raw SCSS to include before the content.                                                                                      
    $setting = new admin_setting_configtextarea('theme_photo/scsspre',                                                              
        get_string('rawscsspre', 'theme_photo'), get_string('rawscsspre_desc', 'theme_photo'), '', PARAM_RAW);                      
    $setting->set_updatedcallback('theme_reset_all_caches');                                                                        
    $page->add($setting);                                                                                                           
                                                                                                                                    
    // Raw SCSS to include after the content.                                                                                       
    $setting = new admin_setting_configtextarea('theme_photo/scss', get_string('rawscss', 'theme_photo'),                           
        get_string('rawscss_desc', 'theme_photo'), '', PARAM_RAW);                                                                  
    $setting->set_updatedcallback('theme_reset_all_caches');                                                                        
    $page->add($setting);                                                                                                           
                                                                                                                                    
    $settings->add($page);                                                                                                          
}

lang/en/theme_photo.php

<?php

// Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.

// This line protects the file from being accessed by a URL directly.                                                               
defined('MOODLE_INTERNAL') || die();
// The name of the second tab in the theme settings.                                                                                
$string['advancedsettings'] = 'Advanced settings';                                                                                  
// The brand colour setting.                                                                                                        
$string['brandcolor'] = 'Brand colour';                                                                                             
// The brand colour setting description.                                                                                            
$string['brandcolor_desc'] = 'The accent colour.';     
// A description shown in the admin theme selector.                                                                                 
$string['choosereadme'] = 'Theme photo is a child theme of Boost. It adds the ability to upload background photos.';                
// Name of the settings pages.                                                                                                      
$string['configtitle'] = 'Photo settings';                                                                                          
// Name of the first settings tab.                                                                                                  
$string['generalsettings'] = 'General settings';                                                                                    
// The name of our plugin.                                                                                                          
$string['pluginname'] = 'Photo';                                                                                                    
// Preset files setting.                                                                                                            
$string['presetfiles'] = 'Additional theme preset files';                                                                           
// Preset files help text.                                                                                                          
$string['presetfiles_desc'] = 'Preset files can be used to dramatically alter the appearance of the theme. See <a href=https://docs.moodle.org/dev/Boost_Presets>Boost presets</a> for information on creating and sharing your own preset files, and see the <a href=http://moodle.net/boost>Presets repository</a> for presets that others have shared.';
// Preset setting.                                                                                                                  
$string['preset'] = 'Theme preset';                                                                                                 
// Preset help text.                                                                                                                
$string['preset_desc'] = 'Pick a preset to broadly change the look of the theme.';                                                  
// Raw SCSS setting.                                                                                                                
$string['rawscss'] = 'Raw SCSS';                                                                                                    
// Raw SCSS setting help text.                                                                                                      
$string['rawscss_desc'] = 'Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet.';       
// Raw initial SCSS setting.                                                                                                        
$string['rawscsspre'] = 'Raw initial SCSS';                                                                                         
// Raw initial SCSS setting help text.                                                                                              
$string['rawscsspre_desc'] = 'In this field you can provide initialising SCSS code, it will be injected before everything else. Most of the time you will use this setting to define variables.';
// We need to include a lang string for each block region.                                                                          
$string['region-side-pre'] = 'Right';

Nous n'en sommes pas encore là, vous le remarquerez si vous essayez de télécharger un fichier de préréglage puis de le choisir. La fonction "theme_boost_get_main_scss_content" de Boost s'attend à ce que les fichiers prédéfinis soient stockés dans une zone de fichiers uniquement pour theme_boost. Nous devons donc ajouter cette fonction à notre propre thème et l’ajuster.

config.php

// C'est la fonction qui retourne la source SCSS pour le fichier principal dans notre thème. Nous remplaçons la version boost car           
// nous souhaitons autoriser la sélection dans la liste des préconfigurations de préréglages chargés dans notre propre zone de fichier de thème.                                  
$THEME->scss = function($theme) {                                                                                                   
    return theme_photo_get_main_scss_content($theme);                                                                               
};

lib.php

function theme_photo_get_main_scss_content($theme) {                                                                                
    global $CFG;                                                                                                                    
                                                                                                                                    
    $scss = '';                                                                                                                     
    $filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;                                                 
    $fs = get_file_storage();                                                                                                       
                                                                                                                                    
    $context = context_system::instance();                                                                                          
    if ($filename == 'default.scss') {                                                                                              
        // We still load the default preset files directly from the boost theme. No sense in duplicating them.                      
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');                                        
    } else if ($filename == 'plain.scss') {                                                                                         
        // We still load the default preset files directly from the boost theme. No sense in duplicating them.                      
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');                                          
                                                                                                                                    
    } else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_photo', 'preset', 0, '/', $filename))) {              
        // This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).                
        $scss .= $presetfile->get_content();                                                                                        
    } else {                                                                                                                        
        // Safety fallback - maybe new installs etc.                                                                                
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');                                        
    }                                                                                                                                       
                                                                                                                                    
    return $scss;                                                                                                                   
}

Arrêtez-vous et essayez-le

Voyons maintenant, ce qui fonctionne et ce qui ne fonctionne pas. Eh bien - tout devrait fonctionner et vous devriez avoir un tout nouveau thème adaptant boost avec vos propres pages de paramètres. Lorsque Boost obtient des mises à jour pour les correctifs de bogues, votre nouveau thème héritera de ces correctifs, comme il hérite de tous les modèles SCSS et modèles de thème. De plus, votre nouveau thème acceptera les fichiers prédéfinis et supportera toutes les nouvelles fonctionnalités et paramètres de Boost.

Pour aller plus loin

Maintenant que nous avons notre très bon point de départ, nous pouvons commencer à modifier ou à ajouter des fonctionnalités, à personnaliser les modèles et à imprimer ou à peaufiner le SCSS

Ajouter de nouveaux paramètres

À partir de ce point du didacticiel, nous allons commencer à ajouter des fonctionnalités à notre thème afin de l'étendre et de le rendre génial!

Commençons par un nouveau paramètre pour définir une image d’arrière-plan sur la page de connexion. Comme vous l'avez vu précédemment, notre thème définit sa liste de paramètres dans un fichier nommé settings.php. Voir Paramètres de l'administrateur pour plus d'informations sur l'ajout de paramètres d'administrateur à n'importe quel plugin. Vous trouverez tous les types de paramètres d’administrateur dans lib / adminlib.php. Dans notre cas, nous voudrons ajouter un paramètre permettant à un administrateur de télécharger un fichier image. Il s'agit de "admin_setting_configstoredfile" and we add it to our theme by adding this code to the settings.php file (inside the "if ($ADMIN->fulltree) {" condition.

settings.php

    // Login page background setting.                                                                                               
    // We use variables for readability.                                                                                            
    $name = 'theme_photo/loginbackgroundimage';                                                                                     
    $title = get_string('loginbackgroundimage', 'theme_photo');                                                                     
    $description = get_string('loginbackgroundimage_desc', 'theme_photo');                                                          
    // This creates the new setting.                                                                                                
    $setting = new admin_setting_configstoredfile($name, $title, $description, 'loginbackgroundimage');                             
    // This means that theme caches will automatically be cleared when this setting is changed.                                     
    $setting->set_updatedcallback('theme_reset_all_caches');                                                                        
    // We always have to add the setting to a page for it to have any effect.                                                       
    $page->add($setting);

Nous devons également ajouter de nouvelles chaînes de langue à notre fichier de langue.

"lang/en/theme_photo.php"

// Background image for login page.                                                                                                 
$string['loginbackgroundimage'] = 'Login page background image';                                                                    
// Background image for login page.                                                                                                 
$string['loginbackgroundimage_desc'] = 'An image that will be stretched to fill the background of the login page.';

Nous avons maintenant un nouveau paramètre qui nous permet de télécharger un fichier - mais il ne fait rien pour l'instant. Nous devons mettre à jour le thème pour définir le fond de cette image sur la page de connexion.

Afin de changer le SCSS de notre thème, nous allons ajouter 2 fichiers SCSS supplémentaires et les inclure avant et après notre scss principal.

Nous avons déjà une fonction dans notre fichier lib.php qui récupère le SCSS principal pour notre thème. C’est un bon point pour inclure des fichiers SCSS supplémentaires. Nous pouvons ajouter 2 lignes à la fin de cette fonction pour y parvenir.

lib.php

function theme_photo_get_main_scss_content($theme) {                                                                                
    global $CFG;                                                                                                                    
                                                                                                                                    
    $scss = '';                                                                                                                     
    $filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;                                                 
    $fs = get_file_storage();                                                                                                       
                                                                                                                                    
    $context = context_system::instance();                                                                                          
    if ($filename == 'default.scss') {                                                                                              
        // We still load the default preset files directly from the boost theme. No sense in duplicating them.                      
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');                                        
    } else if ($filename == 'plain.scss') {                                                                                         
        // We still load the default preset files directly from the boost theme. No sense in duplicating them.                      
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');                                          
                                                                                                                                    
    } else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_photo', 'preset', 0, '/', $filename))) {              
        // This preset file was fetched from the file area for theme_photo and not theme_boost (see the line above).                
        $scss .= $presetfile->get_content();                                                                                        
    } else {                                                                                                                        
        // Safety fallback - maybe new installs etc.                                                                                
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');                                        
    }                                                                                                                               
                                                                                                                                    
    // Pre CSS - this is loaded AFTER any prescss from the setting but before the main scss.                                        
    $pre = file_get_contents($CFG->dirroot . '/theme/photo/scss/pre.scss');                                                         
    // Post CSS - this is loaded AFTER the main scss but before the extra scss from the setting.                                    
    $post = file_get_contents($CFG->dirroot . '/theme/photo/scss/post.scss');                                                       
                                                                                                                                    
    // Combine them together.                                                                                                       
    return $pre . "\n" . $scss . "\n" . $post;                                                                                      
}

scss/pre.scss

// Pre SCSS for the theme.

scss/post.scss

// Post SCSS for the theme.

Pourquoi utilisons-nous "pre et "post" SCSS ?

SCSS / SASS est un langage puissant pour la création de CSS. Il supporte les variables, les fonctions, les boucles comme php. Pour de nombreuses informations et une introduction à SCSS, consultez wikipedia sur Sass Sass on wikipedia.

Pre SCSS Dans Boost, nous utilisons plusieurs variables lors de la création de règles de style.

Lors de la déclaration d'une variable dans SCSS, il est recommandé de la définir comme suit:

$mycoolcolour: #FF0 !default;

Cela signifie que si cette variable n'est pas déjà définie, définissez-la sur la valeur hexadécimale '# FF0';

Donc, en définissant cette variable dans certains PRE scss, nous pouvons remplacer la valeur par défaut de cette variable partout où elle est utilisée. Boost est construit avec le framework CSS Bootstrap 4 (Alpha 4) C’est un framework qui utilise SCSS pour fournir de nombreuses mises en page et composants extrêmement utiles qui peuvent être réutilisés sans ajouter de règles CSS spécifiques pour styliser chaque page. Étant donné que bootstrap utilise systématiquement des variables, nous pouvons facilement personnaliser bon nombre de ces composants en définissant la valeur des variables avant d'inclure les fichiers Bootstrap SCSS.

De nombreuses variables sont disponibles dans /theme/boost/scss/bootstrap/_variables.scss - à titre d'exemple, nous pouvons modifier l'aspect de tous les boutons et champs de saisie avec cette seule variable :

$border-radius: 8px;

Post SCSS

Post SCSS est utile pour définir des règles CSS complètes. Comme ils sont inclus en dernier, ils remplacent tous les sélecteurs précédents ayant la même spécificité Specificity.

Astuces pour personnaliser Moodle avec SCSS (ou CSS)

Il est pratique de savoir que Moodle ajoute des classes à chaque page, ce qui vous permet de cibler une page spécifique ou un ensemble de pages avec des règles de style.

Si vous inspectez une page moodle et regardez la balise body, vous verrez une longue liste de classes, par exemple :

<body id="page-course-view-weeks" class="format-weeks  path-course path-course-view safari dir-ltr lang-en yui-skin-sam yui3-skin-sam damyon-per-in-moodle-com--stable_master pagelayout-course course-11 context-497 category-1 drawer-open-left jsenabled">

Vous pouvez voir dans cet exemple que chaque page reçoit un identifiant. Ceci est une représentation simplifiée de la page en cours dans la navigation. Dans cet exemple, nous examinons la page du cours et ce cours utilise le format des semaines.

Les classes de la balise body peuvent également être utilisées pour cibler une page ou un ensemble de pages.

```
format-weeks
```
The course format
```
path-course path-course-view
```
The parts of the bread-crumb leading up to the current page (The current page is what goes in the id)
```
safari
```
Some server side guessing of the browser type - it's not accurate so I would not rely on it
```
dir-ltr
```
The direction of the current language for the page ( dir-rtl for RTL languages )
```
lang-en
```
The current language of the page
```
yui*
```
Legacy yui classes - ignore these
```
damyon-per-in-moodle-com--stable_master
```
The current hostname for the site + the site name
```
pagelayout-course
```
The layout type for the current page
```
course-11
```
The id of the current course
```
context-497
```
The current context id
```
category-1
```
The category for the current course
```
drawer-open-left
```
Added / removed when the navigation drawer is opened / closed in Boost
```
jsenabled
```
True if the browser supports javascript

A propos de Body id et de classes Read about Body id and classes.

IDans notre exemple, la mise en page est la plus utile ici car nous avons une mise en page spécifique pour les pages de connexion. Nous pouvons maintenant créer une règle qui applique une image d'arrière-plan uniquement pour vous connecter à des pages à l'aide de "body.pagelayout-login".

Comment fait-on référence à une image dans le SCSS ?

Nous pouvons maintenant ajouter une règle au fichier post.scss qui définira l’image d’arrière-plan de la page de connexion. Nous devons d’abord savoir comment construire une URL vers les images d’arrière-plan à partir de notre feuille de style.

Dans les feuilles de style de Moodle, nous pouvons utiliser une balise pix spéciale pour faire référence aux images de notre thème. La règle pour attacher l'image de fond ressemble à ceci : scss/post.scss

body.pagelayout-login {                                                                                                             
    background-image: url([[pix:theme_photo|loginbackgroundimage]]);                                                                
    background-size: cover;                                                                                                         
}

Il y a 2 parties importantes dans cette balise (le bit entre crochets). Le premier est "theme_photo". Dans ce cas, nous transmettons un nom de composant, le code de desserte d'image dans theme_config :: resol_image_location () recherchera alors un fichier image à plusieurs emplacements. L'un d'eux est dans "$ CFG-> dataroot / pix_plugins / $ type / $ plugin / $ image". Nous pouvons l'utiliser pour nous assurer que l'image est correctement traitée en copiant le fichier enregistré dans le paramètre dans cet emplacement chaque fois qu'il est mis à jour. (Il existe un moyen alternatif de le faire en implémentant pluginfile.php dans notre thème - ce que vous pouvez lire dans l’ API de fichier ).

Si nous venions de passer la valeur "theme", le code de desserte de l'image aurait recherché l'image dans le dossier "pix" de notre thème.

Nous avons donc besoin de cette dernière modification pour copier le fichier image dans notre racine de données chaque fois que le paramètre est modifié.

Dans le fichier de paramètres, nous allons mettre à jour le rappel vers une nouvelle fonction que nous définirons dans notre fichier lib.php.

settings.php

    // Login page background setting.                                                                                               
    // We use variables for readability.                                                                                            
    $name = 'theme_photo/loginbackgroundimage';                                                                                     
    $title = get_string('loginbackgroundimage', 'theme_photo');                                                                     
    $description = get_string('loginbackgroundimage_desc', 'theme_photo');                                                          
    // This creates the new setting.                                                                                                
    $setting = new admin_setting_configstoredfile($name, $title, $description, 'loginbackgroundimage');                             
    // This function will copy the image into the data_root location it can be served from.                                         
    $setting->set_updatedcallback('theme_photo_update_settings_images');                                                            
    // We always have to add the setting to a page for it to have any effect.                                                       
    $page->add($setting);

lib.php

function theme_photo_update_settings_images($settingname) {                                                                         
    global $CFG;                                                                                                                    
                                                                                                                                    
    // The setting name that was updated comes as a string like 's_theme_photo_loginbackgroundimage'.                               
    // We split it on '_' characters.                                                                                               
    $parts = explode('_', $settingname);                                                                                            
    // And get the last one to get the setting name..                                                                               
    $settingname = end($parts);                                                                                                     
                                                                                                                                    
    // Admin settings are stored in system context.                                                                                 
    $syscontext = context_system::instance();                                                                                       
    // This is the component name the setting is stored in.                                                                         
    $component = 'theme_photo';                                                                                                     
                                                                                                                                    
    // This is the value of the admin setting which is the filename of the uploaded file.                                           
    $filename = get_config($component, $settingname);                                                                               
    // We extract the file extension because we want to preserve it.                                                                
    $extension = substr($filename, strrpos($filename, '.') + 1);                                                                    
                                                                                                                                    
    // This is the path in the moodle internal file system.                                                                         
    $fullpath = "/{$syscontext->id}/{$component}/{$settingname}/0{$filename}";                                                      
    // Get an instance of the moodle file storage.                                                                                  
    $fs = get_file_storage();                                                                                                       
    // This is an efficient way to get a file if we know the exact path.                                                            
    if ($file = $fs->get_file_by_hash(sha1($fullpath))) {                                                                           
        // We got the stored file - copy it to dataroot.                                                                            
        // This location matches the searched for location in theme_config::resolve_image_location.                                 
        $pathname = $CFG->dataroot . '/pix_plugins/theme/photo/' . $settingname . '.' . $extension;                                 
                                                                                                                                    
        // This pattern matches any previous files with maybe different file extensions.                                            
        $pathpattern = $CFG->dataroot . '/pix_plugins/theme/photo/' . $settingname . '.*';                                          
                                                                                                                                    
        // Make sure this dir exists.                                                                                               
        @mkdir($CFG->dataroot . '/pix_plugins/theme/photo/', $CFG->directorypermissions, true);                                      
                                                                                                                                    
        // Delete any existing files for this setting.                                                                              
        foreach (glob($pathpattern) as $filename) {                                                                                 
            @unlink($filename);                                                                                                     
        }                                                                                                                           
                                                                                                                                    
        // Copy the current file to this location.                                                                                  
        $file->copy_content_to($pathname);                                                                                          
    }                                                                                                                               
                                                                                                                                    
    // Reset theme caches.                                                                                                          
    theme_reset_all_caches();                                                                                                       
}

Je ne le montrerai pas ici - mais il est maintenant facile d'ajouter un nouveau paramètre d'image d'arrière-plan pour chaque type de disposition. Je peux réutiliser ce callback theme_photo_update_settings_images pour chacune d'entre elles - il ne me reste donc qu'à ajouter le paramètre au fichier settings.php, à ajouter la règle SCSS au fichier scss / post.scss et à ajouter les chaînes lang au fichier de langue. .

C'est tout pour ce tutoriel, mais il y a plus de documents more Themes docs sur les thèmes à parcourir.

Voir aussi

Page originale :

dev:Creating a theme based on boost (en anglais)

FAQ des thèmes
Développement de thèmes (en anglais)
Themes white paper (en anglais), par Gavin Henrick

Documentation

« Créer un thème basé sur Boost » : différence entre les versions

Dernière version du 21 octobre 2021 à 08:13

Sommaire

Pour commencer

Choisir un nom

Fichiers de départ

Fichiers spécifiques au thème

Prêt... partez !

Et si je veux aussi les paramètres ?

Dupliquer les paramètres de Boost

Arrêtez-vous et essayez-le

Pour aller plus loin

Ajouter de nouveaux paramètres

Pourquoi utilisons-nous "pre et "post" SCSS ?

Astuces pour personnaliser Moodle avec SCSS (ou CSS)

Comment fait-on référence à une image dans le SCSS ?

Voir aussi

@@ Ligne 1 : / Ligne 1 : @@
+{{Moodle 3.2}}
+{{Template:Themes}}
 Ceci est un tutoriel pour créer un nouveau thème à partir de Moodle 3.2.
@@ Ligne 12 : / Ligne 15 : @@
 Appelons notre nouvel exemple de thème "photo" car nous ajouterons quelques paramètres pour autoriser les "photos" à divers endroits dans Moodle.
 === Fichiers de départ ===
@@ Ligne 19 : / Ligne 21 : @@
 En suivant ce guide, nous pouvons commencer à créer notre thème. Nous créons d’abord le dossier du nouveau thème sous le dossier "/ theme /" du répertoire racine de Moodle.
-<code>
+<syntaxhighlight lang="php">
 /theme/photo/
-</code>
+</syntaxhighlight>
 Nous devons maintenant ajouter des fichiers correspondant à tout plugin standard de Moodle. Le premier est version.php
@@ Ligne 27 : / Ligne 29 : @@
 ''/theme/photo/version.php''
-<code php>
+<syntaxhighlight lang="php"><?php
-<?php
 // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.
@@ Ligne 50 : / Ligne 50 : @@
 ];
-</code>
+</syntaxhighlight>
 Nous avons également besoin d'un fichier de langue afin que toutes nos chaînes puissent être traduites dans différentes langues. Le nom de ce fichier est le nom du composant de notre plugin et il se trouve dans le dossier lang / en / de notre plugin. Nous pouvons inclure des traductions de notre plugin, mais nous pouvons également fournir des traductions via le site Web https://lang.moodle.org/ une fois que notre plugin a été publié dans la base de données de plugins à l' adresse http://www.moodle.org/plugins/ .
@@ Ligne 56 : / Ligne 56 : @@
 ''/theme/photo/lang/en/theme_photo.php''
-<code php>
+<syntaxhighlight lang="php"><?php
-<?php
 // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.
@@ Ligne 70 : / Ligne 68 : @@
 // We need to include a lang string for each block region.
 $string['region-side-pre'] = 'Right';
-</code>
+</syntaxhighlight>
 === Fichiers spécifiques au thème ===
@@ Ligne 77 : / Ligne 75 : @@
 Les thèmes nécessitent un fichier favicon à afficher dans la barre d'adresse. Voir [ Favicon ].
-pix / favicon.ico
+''pix/favicon.ico''
 (Fichier image non montré).
@@ Ligne 83 : / Ligne 81 : @@
 Les thèmes nécessitent également l'affichage d'un exemple de capture d'écran dans le sélecteur de thèmes.
-pix / screenshot.jpg
+''pix/screenshot.jpg''
 Les thèmes nécessitent un fichier lib.php. Ce fichier contient les rappels utilisés par différentes API dans Moodle. Initialement, ce fichier peut être vide, mais à mesure que nous ajouterons des fonctionnalités à notre thème, nous devrons y ajouter quelques fonctions.
 ''lib.php''
-<code php>
+<syntaxhighlight lang="php"><?php
-<?php
 // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.
@@ Ligne 97 : / Ligne 94 : @@
 // We will add callbacks here as we add features to our theme.
-</code>
+</syntaxhighlight>
 La configuration du thème va se faire dans un fichier appelé config.php. C'est l'un des fichiers les plus importants de notre thème. Une fois ce fichier ajouté, nous serons prêts à tester notre thème pour la première fois..
@@ Ligne 103 : / Ligne 100 : @@
 ''config.php''
-<code php>
+<syntaxhighlight lang="php"><?php
-<?php
 // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.
@@ Ligne 152 : / Ligne 148 : @@
 // it forces a block region into the page when editing is enabled and it takes up too much room.
 $THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;
-</code>
+</syntaxhighlight>
 === Prêt... partez ! ===
@@ Ligne 165 : / Ligne 161 : @@
 </div>
-=== ET si je veux aussi les paramètres ? ===
+=== Et si je veux aussi les paramètres ? ===
 <div class="warningbox">
@@ Ligne 173 : / Ligne 169 : @@
 Si je veux que les paramètres de Boost s'appliquent également au thème enfant, j'ai besoin d'en savoir un peu plus sur la façon dont chacun des paramètres de Boost est appliqué pour les faire fonctionner dans mon thème enfant.
-'''Premier réglage - preset.'''
+'''Premier paramètre - preset.'''
 Le fichier "preset" est le fichier utilisé comme fichier principal pour la compilation scss. Dans Boost, cela est contrôlé par la valeur de configuration du thème:
 ''theme_boost/config.php''
-<code php>
+<syntaxhighlight lang="php">
 $THEME->scss = function($theme) {
      return theme_boost_get_main_scss_content($theme);
 };
-</code>
+</syntaxhighlight>
 ''theme_boost/lib.php''
-<code php>
+<syntaxhighlight lang="php">
 function theme_boost_get_main_scss_content($theme) {
      global $CFG;
@@ Ligne 206 : / Ligne 202 : @@
      return $scss;
 }
-</code>
+</syntaxhighlight>
 Le but de cette fonction est de rechercher un paramètre de thème "prédéfini" et d'extraire le fichier du stockage interne de Moodles ou du dossier / preset /. La fonction renvoie ensuite le contenu de ce fichier.
@@ Ligne 213 : / Ligne 209 : @@
 ''config.php''
-<code php>
+<syntaxhighlight lang="php">
 // Ce paramètre définit le fichier scss principal pour notre thème à compiler. Nous pourrions le définir sur un fichier statique dans le dossier scss ou sur une fonction qui renvoie le SCSS en fonction des paramètres du thème.
 $THEME->scss = function($theme) {
@@ Ligne 222 : / Ligne 218 : @@
      return theme_boost_get_main_scss_content($parentconfig);
 };
-</code>
+</syntaxhighlight>
 '''Paramètres 2+3 brandcolor + scsspre'''
@@ Ligne 229 : / Ligne 225 : @@
 ''theme_boost/config.php''
-<code php>
+<syntaxhighlight lang="php">
 $THEME->prescsscallback = 'theme_boost_get_pre_scss';
-</code>
+</syntaxhighlight>
 ''theme_boost/lib.php''
-<code php>
+<syntaxhighlight lang="php">
 function theme_boost_get_pre_scss($theme) {
      global $CFG;
@@ Ligne 261 : / Ligne 257 : @@
      return $scss;
 }
-</code>
+</syntaxhighlight>
 Ce que fait ce code est:
@@ Ligne 271 : / Ligne 267 : @@
 ''config.php''
-<code php>
+<syntaxhighlight lang="php">
 // This is a function that returns some SCSS as a string to prepend to the main SCSS file.
 $THEME->prescsscallback = 'theme_photo_get_pre_scss';
-</code>
+</syntaxhighlight>
 ''lib.php''
-<code php>
+<syntaxhighlight lang="php">
 // Function to return the SCSS to prepend to our main SCSS for this theme.
 // Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
@@ Ligne 286 : / Ligne 282 : @@
      return theme_boost_get_pre_scss($theme);
 }
-</code>
+</syntaxhighlight>
-'''Setting 4 scss (post)'''
+'''Paramètre 4 scss (post)'''
-The final setting from Boost is a raw text field which adds SCSS to the end of the main SCSS file. This is a useful place to add style rules as they will override previously defined styles with the same specificity. It is applied in Boost by the following lines:
+Le paramètre final de Boost est un champ de texte brut qui ajoute du SCSS à la fin du fichier SCSS principal. C'est un endroit utile pour ajouter des règles de style car elles remplaceront les styles précédemment définis avec la même spécificité. Il est appliqué dans Boost par les lignes suivantes :
 ''theme_boost/config.php''
-<code php>
+<syntaxhighlight lang="php">
 $THEME->extrascsscallback = 'theme_boost_get_extra_scss';
-</code>
+</syntaxhighlight>
 ''theme_boost/lib.php''
-<code php>
+<syntaxhighlight lang="php">
 function theme_boost_get_extra_scss($theme) {
      return !empty($theme->settings->scss) ? $theme->settings->scss : '';
 }
-</code>
+</syntaxhighlight>
-This is just returning the value of the setting as a string.
+Cela ne fait que renvoyer la valeur du paramètre sous forme de chaîne.
-To make this setting apply in our child theme too - we use similar code to the previous sections.
+Pour que ce paramètre s'applique également à notre thème enfant, nous utilisons un code similaire aux sections précédentes.
 ''config.php''
-<code php>
+<syntaxhighlight lang="php">
-// This is a function that returns some SCSS as a string to prepend to the main SCSS file.
+// Il s'agit d'une fonction qui renvoie certains SCSS sous forme de chaîne à ajouter au fichier SCSS principal.
 $THEME->extrascsscallback = 'theme_photo_get_extra_scss';
-</code>
+</syntaxhighlight>
 ''lib.php''
-<code php>
+<syntaxhighlight lang="php">
-// Function to return the SCSS to append to our main SCSS for this theme.
+// Fonction pour renvoyer le SCSS à ajouter à notre SCSS principal pour ce thème.
-// Note the function name starts with the component name because this is a global function and we don't want namespace clashes.
+// Notez que le nom de la fonction commence par le nom du composant car il s'agit d'une fonction globale et nous ne voulons pas de conflits d'espace de noms.
 function theme_photo_get_extra_scss($theme) {
-     // Load the settings from the parent.
+     // /Charge les paramètres à partir du parent.
-     $theme = theme_config::load('boost');
+     $ theme  = theme_config :: load ( 'boost' ) ;
-     // Call the parent themes get_extra_scss function.
+     // Appelez la fonction get_extra_scss de thèmes parent.
-     return theme_boost_get_extra_scss($theme);
+     return theme_boost_get_extra_scss ($ thème ) ;
 }
-</code>
+</syntaxhighlight>
-=== Duplicate the settings from Boost  ===
+=== Dupliquer les paramètres de Boost  ===
-This is the recommended way to extend boost as your child theme will not be affected by changes to the Boost settings, and both themes can be in use with different settings applied.
+Il s'agit de la méthode recommandée pour étendre Boost car votre thème enfant ne sera pas affecté par les modifications des paramètres Boost et les deux thèmes pourront être utilisés séparément.
-All that needs to happen is to create theme settings in the child theme that match each of the settings in the parent theme. You will need to add matching language strings for each of these settings in the language file.
+Tout ce qui doit être fait est de créer des paramètres de thème dans le thème enfant qui correspondent à chacun des paramètres du thème parent. Vous devrez ajouter des chaînes de langue correspondantes pour chacun de ces paramètres dans le fichier de langue.
-This example shows how to do it - We are re-using the nice looking theme_boost_admin_settingspage_tabs class from boost and creating duplicate versions of each of the settings.
+Cet exemple montre comment procéder. Nous réutilisons la belle apparence du theme_boost_admin_settingspage_tabs de Boost et créons des versions dupliquées de chacun des paramètres.
 ''settings.php''
-<code php>
+<syntaxhighlight lang="php"><?php
-<?php
 // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.
@@ Ligne 415 : / Ligne 411 : @@
      $settings->add($page);
 }
-</code>
+</syntaxhighlight>
 ''lang/en/theme_photo.php''
-<code php>
+<syntaxhighlight lang="php"><?php
-<?php
 // Every file should have GPL and copyright in the header - we skip it in tutorials but you should not skip it for real.
@@ Ligne 457 : / Ligne 452 : @@
 // We need to include a lang string for each block region.
 $string['region-side-pre'] = 'Right';
-</code>
+</syntaxhighlight>
-We aren't quite there yet as you will notice if you try and upload a preset file and then choose it. The "theme_boost_get_main_scss_content" function from Boost is expecting the preset files to be stored in a file area for theme_boost only. We need to add this function to our own theme and tweak it.
+Nous n'en sommes pas encore là, vous le remarquerez si vous essayez de télécharger un fichier de préréglage puis de le choisir. La fonction "theme_boost_get_main_scss_content" de Boost s'attend à ce que les fichiers prédéfinis soient stockés dans une zone de fichiers uniquement pour theme_boost. Nous devons donc ajouter cette fonction à notre propre thème et l’ajuster.
 ''config.php''
-<code php>
+<syntaxhighlight lang="php">
-// This is the function that returns the SCSS source for the main file in our theme. We override the boost version because
+// C'est la fonction qui retourne la source SCSS pour le fichier principal dans notre thème. Nous remplaçons la version boost car
-// we want to allow presets uploaded to our own theme file area to be selected in the preset list.
+// nous souhaitons autoriser la sélection dans la liste des préconfigurations de préréglages chargés dans notre propre zone de fichier de thème.
 $THEME->scss = function($theme) {
      return theme_photo_get_main_scss_content($theme);
 };
-</code>
+</syntaxhighlight>
 ''lib.php''
-<code php>
+<syntaxhighlight lang="php">
 function theme_photo_get_main_scss_content($theme) {
      global $CFG;
@@ Ligne 497 : / Ligne 492 : @@
      return $scss;
 }
-</code>
+</syntaxhighlight>
-=== Stop and try it out ===
+=== Arrêtez-vous et essayez-le ===
-So now what is working and what isn't. Well - everything should be working and you should have a nice new theme extending boost with it's own settings pages. When Boost gets updates for bug fixes your new theme will inherit those fixes as it inherits all the SCSS and templates from theme boost. In addition your new theme will accept preset files and supports all the same features and settings as boost, ready to add more.
+Voyons maintenant, ce qui fonctionne et ce qui ne fonctionne pas. Eh bien - tout devrait fonctionner et vous devriez avoir un tout nouveau thème adaptant boost avec vos propres pages de paramètres. Lorsque Boost obtient des mises à jour pour les correctifs de bogues, votre nouveau thème héritera de ces correctifs, comme il hérite de tous les modèles SCSS et modèles de thème. De plus, votre nouveau thème acceptera les fichiers prédéfinis et supportera toutes les nouvelles fonctionnalités et paramètres de Boost.
-== Take it further ==
+== Pour aller plus loin ==
-Now we have our very nice starting point we can start changing or adding features, customising templates and output or tweaking the SCSS.
+Maintenant que nous avons notre très bon point de départ, nous pouvons commencer à modifier ou à ajouter des fonctionnalités, à personnaliser les modèles et à imprimer ou à peaufiner le SCSS
-=== Add some new settings ===
+=== Ajouter de nouveaux paramètres ===
-From this point in the tutorial we will start adding features to our theme to extend it and make it AWESOME!
+À partir de ce point du didacticiel, nous allons commencer à ajouter des fonctionnalités à notre thème afin de l'étendre et de le rendre génial!
-Lets start with a new setting to set a background image on the login page. As you saw earlier, our theme defines it's list of settings in a file called settings.php. See [[Admin settings]] for more information about adding admin settings to any plugin. All of the different kinds of admin settings can be found in lib/adminlib.php. In our case we will want to add a setting which allows an admin to upload an image file. This is an "admin_setting_configstoredfile" and we add it to our theme by adding  this code to the settings.php file (inside the "if ($ADMIN->fulltree) {" condition.
+Commençons par un nouveau paramètre pour définir une image d’arrière-plan sur la page de connexion. Comme vous l'avez vu précédemment, notre thème définit sa liste de paramètres dans un fichier nommé settings.php. Voir Paramètres de l'administrateur pour plus d'informations sur l'ajout de paramètres d'administrateur à n'importe quel plugin. Vous trouverez tous les types de paramètres d’administrateur dans lib / adminlib.php. Dans notre cas, nous voudrons ajouter un paramètre permettant à un administrateur de télécharger un fichier image. Il s'agit  de "admin_setting_configstoredfile" and we add it to our theme by adding  this code to the settings.php file (inside the "if ($ADMIN->fulltree) {" condition.
 ''settings.php''
-<code php>
+<syntaxhighlight lang="php">
      // Login page background setting.
      // We use variables for readability.
@@ Ligne 524 : / Ligne 519 : @@
      // We always have to add the setting to a page for it to have any effect.
      $page->add($setting);
-</code>
+</syntaxhighlight>
-We also need to add new lang strings to our language file.
+Nous devons également ajouter de nouvelles chaînes de langue à notre fichier de langue.
 "lang/en/theme_photo.php"
-<code php>
+<syntaxhighlight lang="php">
 // Background image for login page.
 $string['loginbackgroundimage'] = 'Login page background image';
 // Background image for login page.
 $string['loginbackgroundimage_desc'] = 'An image that will be stretched to fill the background of the login page.';
-</code>
+</syntaxhighlight>
-Now we have a new setting that lets us upload a file - but it doesn't actually do anything yet. We need to update the theme to set this image background on the login page.
+Nous avons maintenant un nouveau paramètre qui nous permet de télécharger un fichier - mais il ne fait rien pour l'instant. Nous devons mettre à jour le thème pour définir le fond de cette image sur la page de connexion.
-In order to change the SCSS for our theme we will add 2 additional SCSS files and include them before and after our main scss.
+Afin de changer le SCSS de notre thème, nous allons ajouter 2 fichiers SCSS supplémentaires et les inclure avant et après notre scss principal.
-We already have a function in our lib.php file which fetches the main SCSS for our theme. This is a good point to include additional SCSS files. We can add 2 lines to the end of this function to achieve this.
+Nous avons déjà une fonction dans notre fichier lib.php qui récupère le SCSS principal pour notre thème. C’est un bon point pour inclure des fichiers SCSS supplémentaires. Nous pouvons ajouter 2 lignes à la fin de cette fonction pour y parvenir.
 ''lib.php''
-<code php>
+<syntaxhighlight lang="php">
 function theme_photo_get_main_scss_content($theme) {
      global $CFG;
@@ Ligne 575 : / Ligne 570 : @@
      return $pre . "\n" . $scss . "\n" . $post;
 }
-</code>
+</syntaxhighlight>
 ''scss/pre.scss''
-<code scss>
+<syntaxhighlight lang="scss">
 // Pre SCSS for the theme.
-</code>
+</syntaxhighlight>
 ''scss/post.scss''
-<code scss>
+<syntaxhighlight lang="scss">
 // Post SCSS for the theme.
-</code>
+</syntaxhighlight>
-==== Why do we use pre and post SCSS? ====
+==== Pourquoi utilisons-nous "pre et "post" SCSS ? ====
-SCSS/SASS is a powerful language for creating CSS. It supports variables, functions, loops just like php. For lots of information and an introduction to SCSS read about [https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass on wikipedia].
+SCSS / SASS est un langage puissant pour la création de CSS. Il supporte les variables, les fonctions, les boucles comme php. Pour de nombreuses informations et une introduction à SCSS, consultez wikipedia sur Sass [https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass on wikipedia].
 '''Pre SCSS'''
+Dans Boost, nous utilisons plusieurs variables lors de la création de règles de style.
-In Boost we use many variables when creating style rules.
+Lors de la déclaration d'une variable dans SCSS, il est recommandé de la définir comme suit:
+<syntaxhighlight lang="scss">
-When declaring a variable in SCSS - it is best practice to define it like this:
-<code scss>
 $mycoolcolour: #FF0 !default;
-</code>
+</syntaxhighlight>
-What this means is - if this variable is not defined already - set it to the hex value '#FF0';
+Cela signifie que si cette variable n'est pas déjà définie, définissez-la sur la valeur hexadécimale '# FF0';
-So by setting this variable in some PRE scss we can override the default the value of this variable everywhere it is used. Boost is built with the [https://v4-alpha.getbootstrap.com/ Bootstrap 4 (Alpha 4)] CSS Framework. This is a framework which uses SCSS to provide many extremely useful layouts and components which can be reused without adding specific CSS rules to style every page. Because bootstrap consistently uses variables we can customise many of these components easily by setting the value of the variables before we include the Bootstrap SCSS files.
+Donc, en définissant cette variable dans certains PRE scss, nous pouvons remplacer la valeur par défaut de cette variable partout où elle est utilisée. Boost est construit avec le framework CSS [https://v4-alpha.getbootstrap.com/ Bootstrap 4 (Alpha 4)] C’est un framework qui utilise SCSS pour fournir de nombreuses mises en page et composants extrêmement utiles qui peuvent être réutilisés sans ajouter de règles CSS spécifiques pour styliser chaque page. Étant donné que bootstrap utilise systématiquement des variables, nous pouvons facilement personnaliser bon nombre de ces composants en définissant la valeur des variables avant d'inclure les fichiers Bootstrap SCSS.
-Many variables are available in /theme/boost/scss/bootstrap/_variables.scss - as an example we can change the look of all buttons and input fields with this one variable:
+De nombreuses variables sont disponibles dans /theme/boost/scss/bootstrap/_variables.scss - à titre d'exemple, nous pouvons modifier l'aspect de tous les boutons et champs de saisie avec cette seule variable :
-<code scss>
+<syntaxhighlight lang="scss">
 $border-radius: 8px;
-</code>
+</syntaxhighlight>
 '''Post SCSS'''
-Post SCSS is useful for defining full CSS rules. Because they are included last, they override any previous matching selector with the same [https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Specificity Specificity].
+Post SCSS est utile pour définir des règles CSS complètes. Comme ils sont inclus en dernier, ils remplacent tous les sélecteurs précédents ayant la même spécificité [https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Specificity Specificity].
-=== Tips for customising Moodle with SCSS (or CSS) ===
+=== Astuces pour personnaliser Moodle avec SCSS (ou CSS) ===
-Some handy things to know when you are new to theming is that Moodle adds some classes to every page that helps you target a specific page or set of pages with some style rules.
+Il est pratique de savoir que Moodle ajoute des classes à chaque page, ce qui vous permet de cibler une page spécifique ou un ensemble de pages avec des règles de style.
-If you inspect a moodle page and look at the body tag you will see a long list of classes e.g.
+Si vous inspectez une page moodle et regardez la balise body, vous verrez une longue liste de classes, par exemple :
-<code html>
+<syntaxhighlight lang="html">
 <body id="page-course-view-weeks" class="format-weeks  path-course path-course-view safari dir-ltr lang-en yui-skin-sam yui3-skin-sam damyon-per-in-moodle-com--stable_master pagelayout-course course-11 context-497 category-1 drawer-open-left jsenabled">
-</code>
+</syntaxhighlight>
-You can see from this example that each page gets an id. This is a simplified representation of the current page in the navigation. In this example we are looking at the course page and this course is using the weeks format.
+Vous pouvez voir dans cet exemple que chaque page reçoit un identifiant. Ceci est une représentation simplifiée de la page en cours dans la navigation. Dans cet exemple, nous examinons la page du cours et ce cours utilise le format des semaines.
-The classes on the body tag can also be used to target a page or set of pages.
+Les classes de la balise body peuvent également être utilisées pour cibler une page ou un ensemble de pages.
-* <code>format-weeks</code> The course format
+* <syntaxhighlight lang="php">format-weeks</syntaxhighlight> The course format
-* <code>path-course path-course-view</code> The parts of the bread-crumb leading up to the current page (The current page is what goes in the id)
+* <syntaxhighlight lang="php">path-course path-course-view</syntaxhighlight> The parts of the bread-crumb leading up to the current page (The current page is what goes in the id)
-* <code>safari</code> Some server side guessing of the browser type - it's not accurate so I would not rely on it
+* <syntaxhighlight lang="php">safari</syntaxhighlight> Some server side guessing of the browser type - it's not accurate so I would not rely on it
-* <code>dir-ltr</code> The direction of the current language for the page ( dir-rtl for RTL languages )
+* <syntaxhighlight lang="php">dir-ltr</syntaxhighlight> The direction of the current language for the page ( dir-rtl for RTL languages )
-* <code>lang-en</code> The current language of the page
+* <syntaxhighlight lang="php">lang-en</syntaxhighlight> The current language of the page
-* <code>yui*</code> Legacy yui classes - ignore these
+* <syntaxhighlight lang="php">yui*</syntaxhighlight> Legacy yui classes - ignore these
-* <code>damyon-per-in-moodle-com--stable_master</code> The current hostname for the site + the site name
+* <syntaxhighlight lang="php">damyon-per-in-moodle-com--stable_master</syntaxhighlight> The current hostname for the site + the site name
-* <code>pagelayout-course</code> The layout type for the current page
+* <syntaxhighlight lang="php">pagelayout-course</syntaxhighlight> The layout type for the current page
-* <code>course-11</code> The id of the current course
+* <syntaxhighlight lang="php">course-11</syntaxhighlight> The id of the current course
-* <code>context-497</code> The current context id
+* <syntaxhighlight lang="php">context-497</syntaxhighlight> The current context id
-* <code>category-1</code> The category for the current course
+* <syntaxhighlight lang="php">category-1</syntaxhighlight> The category for the current course
-* <code>drawer-open-left</code> Added / removed when the navigation drawer is opened / closed in Boost
+* <syntaxhighlight lang="php">drawer-open-left</syntaxhighlight> Added / removed when the navigation drawer is opened / closed in Boost
-* <code>jsenabled</code> True if the browser supports javascript
+* <syntaxhighlight lang="php">jsenabled</syntaxhighlight> True if the browser supports javascript
-[https://docs.moodle.org/dev/Themes_overview#.3Cbody.3E_CSS_id_and_classes Read about Body id and classes].
+A propos de Body id et de classes [https://docs.moodle.org/dev/Themes_overview#.3Cbody.3E_CSS_id_and_classes Read about Body id and classes].
-In our example the page layout is the most useful here as we have a specific page layout for login pages. We can now craft a rule that applies a background image only to login pages using "body.pagelayout-login".
+IDans notre exemple, la mise en page est la plus utile ici car nous avons une mise en page spécifique pour les pages de connexion. Nous pouvons maintenant créer une règle qui applique une image d'arrière-plan uniquement pour vous connecter à des pages à l'aide de "body.pagelayout-login".
-=== How do we refer to an image in SCSS ? ===
+=== Comment fait-on référence à une image dans le SCSS ? ===
-So now we can add a rule to the post.scss which will set the background image for the login page. First we need to know how to construct a url to the background images from our stylesheet.
+Nous pouvons maintenant ajouter une règle au fichier post.scss qui définira l’image d’arrière-plan de la page de connexion. Nous devons d’abord savoir comment construire une URL vers les images d’arrière-plan à partir de notre feuille de style.
-In stylesheets in Moodle we can use a special pix tag to refer to images from our theme. The rule to attach the background image looks like this:
+Dans les feuilles de style de Moodle, nous pouvons utiliser une balise pix spéciale pour faire référence aux images de notre thème. La règle pour attacher l'image de fond ressemble à ceci :
 ''scss/post.scss''
-<code scss>
+<syntaxhighlight lang="scss">
 body.pagelayout-login {
      background-image: url([[pix:theme_photo|loginbackgroundimage]]);
      background-size: cover;
 }
-</code>
+</syntaxhighlight>
+Il y a 2 parties importantes dans cette balise (le bit entre crochets). Le premier est "theme_photo". Dans ce cas, nous transmettons un nom de composant, le code de desserte d'image dans theme_config :: resol_image_location () recherchera alors un fichier image à plusieurs emplacements. L'un d'eux est dans "$ CFG-> dataroot / pix_plugins / $ type / $ plugin / $ image". Nous pouvons l'utiliser pour nous assurer que l'image est correctement traitée en copiant le fichier enregistré dans le paramètre dans cet emplacement chaque fois qu'il est mis à jour. (Il existe un moyen alternatif de le faire en implémentant pluginfile.php dans notre thème - ce que vous pouvez lire dans l’ API de fichier ).
-There are 2 important parts to this tag (the bit in square brackets). The first is "theme_photo". In this case we are passing a component name, the image serving code in theme_config::resolve_image_location() will then look for an image file in several locations. One of these is in "$CFG->dataroot/pix_plugins/$type/$plugin/$image". We can use this to make sure the image gets served correctly by copying the file saved in the setting to this location every time it is updated. (There is an alterative way we could do this by implementing pluginfile.php in our theme - which you can read about in the [[File API]] ).
+Si nous venions de passer la valeur "theme", le code de desserte de l'image aurait recherché l'image dans le dossier "pix" de notre thème.
-If we had just passed the value "theme" the image serving code would have looked for the image in the "pix" folder of our theme.
+Nous avons donc besoin de cette dernière modification pour copier le fichier image dans notre racine de données chaque fois que le paramètre est modifié.
-So - we need this final change to copy the image file into our dataroot each time the setting is changed.
+Dans le fichier de paramètres, nous allons mettre à jour le rappel vers une nouvelle fonction que nous définirons dans notre fichier lib.php.
-In the settings file we will update the callback to a new function which we will define in our lib.php.
 ''settings.php''
-<code php>
+<syntaxhighlight lang="php">
      // Login page background setting.
      // We use variables for readability.
@@ Ligne 676 : / Ligne 670 : @@
      // We always have to add the setting to a page for it to have any effect.
      $page->add($setting);
-</code>
+</syntaxhighlight>
 ''lib.php''
-<code php>
+<syntaxhighlight lang="php">
 function theme_photo_update_settings_images($settingname) {
      global $CFG;
@@ Ligne 727 : / Ligne 721 : @@
      theme_reset_all_caches();
 }
-</code>
+</syntaxhighlight>
+Je ne le montrerai pas ici - mais il est maintenant facile d'ajouter un nouveau paramètre d'image d'arrière-plan pour chaque type de disposition. Je peux réutiliser ce callback theme_photo_update_settings_images pour chacune d'entre elles - il ne me reste donc qu'à ajouter le paramètre au fichier settings.php, à ajouter la règle SCSS au fichier scss / post.scss et à ajouter les chaînes lang au fichier de langue. .
+C'est tout pour ce tutoriel, mais il y a plus de documents  [[:Category:Themes| more Themes docs]] sur les thèmes à parcourir.
+== Voir aussi ==
-I won't show it here - but it is now easy to add a new background image setting for every layout type. I can re-use this theme_photo_update_settings_images callback for each one - so all I have to do is add the setting to the settings.php file, add the SCSS rule to the scss/post.scss file and add the lang strings to the language file.
+Page originale :
+* [[:dev:Creating a theme based on boost]] (en anglais)
-Thats it for this tutorial, but there are [[:Category:Themes| more Themes docs]] to browse.
+* [[FAQ des thèmes]]
+* [[:dev:Theme development|Développement de thèmes]] (en anglais)
+* [http://www.slideshare.net/ghenrick/a-look-at-moodle-2-themes Themes white paper] (en anglais), par Gavin Henrick
-[[Category:Themes]]
+[[Catégorie:Thèmes]]
-[[en:Creating a theme based on boost]]
+[[en:Themes]]
+[[eu:Itxurak]]
+[[de:Designs]]
+[[ja:テーマ]]

Documentation

« Créer un thème basé sur Boost » : différence entre les versions

Dernière version du 21 octobre 2021 à 08:13

Pour commencer

Choisir un nom

Fichiers de départ

Fichiers spécifiques au thème

Prêt... partez !

Et si je veux aussi les paramètres ?

Dupliquer les paramètres de Boost

Arrêtez-vous et essayez-le

Pour aller plus loin

Ajouter de nouveaux paramètres

Pourquoi utilisons-nous "pre et "post" SCSS ?

Astuces pour personnaliser Moodle avec SCSS (ou CSS)

Comment fait-on référence à une image dans le SCSS ?

Voir aussi

« Créer un thème basé sur Boost » : différence entre les versions