https://www.facebook.com/tr?id=1475801249377226&ev=PixelInitialized
partage

Note de l'utilisateur: 0 / 5

Donnez une note !
0 sur 5 - 0 votes
Merci d'avoir noté cet article.

Pour chaque mise en page vous pouvez charger une feuille de style spécifique. Cette fonctionnalité peut vous être utile lorsque vous avez différents styles pour un template et que vous ne voulez pas les inclure à tous les styles de templates. Cela peut avoir un impact positif sur la vitesse de chargement de votre site.

Étape 1: Créer un fichier LESS

Tout d'abord, vous devez créer un fichier LESS. Le fichier doit se trouver dans le répertoire suivant :

/templates/[nom_du_template]/less/

Étape 2: Charger le fichier créé

Ensuite, éditer un fichier de mise en page à partir du répertoire suivant:

/templates/[nom_du_template]/tpl

Dans la section head, vous devez ajouter le code suivant :

<?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>

Jetez un œil sur l'exemple :

<head>     <?php $this->renderBlock('head'); ?>     <?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>     </head>

Étape 3: Ajouter un fichier LESS à la map LESS

Une fois que vous avez ajouté un nouveau fichier LESS dans la section head, vous devez ajouter ce fichier dans la map LESS. De cette façon, le fichier sera recompilé en CSS quand n'importe quel autre fichier LESS en relation avec le nouveau (par exemple les variables inclus) sera modifié.

Pour ce faire, modifiez le fichier suivant :

/templates/[nom_du_template]/lib/jm_template.php

Ensuite, recherchez le code suivant :

$common_all = array( 'bootstrap_variables.less', 'template_variables.less', 'override/ltr/mixins.less', 'template_mixins.less' ); $this->lessMap['offcanvas.less'] = $common_all; $this->lessMap['djmenu.less'] = $common_all; $this->lessMap['djmenu_fx.less'] = $common_all; $this->lessMap['custom.less'] = $common_all; $this->lessMap['comingsoon.less'] = $common_all;

Au-dessus du code vous devez ajouter votre nouveau fichier LESS comme suit :

$this->lessMap['offcanvas.less'] = $common_all; $this->lessMap['djmenu.less'] = $common_all; $this->lessMap['djmenu_fx.less'] = $common_all; $this->lessMap['custom.less'] = $common_all; $this->lessMap['comingsoon.less'] = $common_all; $this->lessMap['new-layout.less'] = $common_all; //new-layout.less added

Cela signifie que quand l'un de ces fichiers sera modifié, alors le fichier new-layout.less sera compilé en CSS automatiquement :

bootstrap_variables.less, template_variables.less, override/ltr/mixins.less, template_mixins.less

Étape 4: Ajouter des styles

Maintenant, vous pouvez ajouter des styles LESS ou CSS au fichier LESS.
Vous devriez vous rappeler d'importer les variables et mixins si vous voulez profiter d'eux :

/* ====================    VARIABLES import    ==================== */     @import "template_variables.less"; @import "bootstrap_variables.less";    /* ====================    MIXINS import    ==================== */    @import "override/ltr/mixins.less"; @import "../../../plugins/system/jmframework/includes/assets/template/bootstrap/less-ext/mixins-ext.less"; //JM extended mixins @import "template_mixins.less";

 

partage