Tutoriels sur Framework de Template Helix pour Joomla

Ajouter une option de couleur à un des préréglages helix

Les options de couleurs sont limitées dans Helix au nombre de trois.

Pour différentes raisons vous pourriez avoir envie d'ajouter un selecteur permettant à n'importe quel utilisateur de modifier la couleur d'un ou plusieurs éléments.

Le sélecteur couleur de fond ne s'appliquant qu'au conteneur du centre, nous allons créer un autre sélecteur pour le fond de page complet : BODY

Ajouter le selecteur au preset dans templateDetails.xml

Choisissez votre préréglage pour ajouter votre sélecteur, dans notre cas nous le ferons dans monpreset.

Ouvrez pour édition templateDetails.xml de votre template, le fichier se trouve à la racine de votre template.

Dans la zone conernant votre préréglage, en l'occurence <!--Start monpreset--> (mais cela aurait pu être dans <!--Start preset1--> copiez et collez une ligne complète « field name »
modifiez les élements comme suis sur l'exemple, évidemment vous adapterez selon le but final recherché.
Ainsi dans notre cas le nom du champs sera monpreset_body avec une classe « preset-control  monpreset, une couleur par défaut (cela peut être transparent ou vide) et des noms aux chaines de langues afin de pouvoir les internationaliser, (voir le chapitre pour modifier une langue).

Ce qui donne :

<!--Start monpreset-->

<field name="monpreset_body" class="preset-control monpreset" type="color" default="#ffffff" label="HELIX_BODY_COLOR" description="HELIX_BODY_COLOR_DESC" />

<field name="monpreset_bg" class="preset-control monpreset" type="color" default="#ffffff" label="HELIX_BACKGROUND_COLOR" description="HELIX_BACKGROUND_COLOR_DESC" />

<field name="monpreset_text" class="preset-control monpreset" type="color" default="#000000" label="HELIX_TEXT_COLOR" description="HELIX_TEXT_COLOR_DESC" />

<field name="monpreset_major" class="preset-control monpreset" type="color" default="#eb4947" label="HELIX_MAJOR_COLOR" description="HELIX_MAJOR_COLOR_DESC" />

<!--End monpreset-->

 

Sauvez votre fichier, et allez jeter un œil dans votre préréglage.

options preset1

Vous voyez désormais une nouvelle option, non fonctionnelle pour l'instant, mais visible.

Modifier le fichier langue

Les fichiers de langues sont dans le dossier language/votre_langue chez nous, puisque nous avons installé le fichier fr-FR proposé par web54 ce sera langage/fr-FR/fr-Fr/tpl_shaper_helix3.ini

options preset2

Nous allons ajouter les deux chaines et leurs variables :

HELIX_BODY_COLOR="Couleur fond de page"
HELIX_BODY_COLOR_DESC=" définit la couleur de la balise body"

Sauvegardez,vous apercevez maintenant votre texte modifié dans votre préréglage.

options preset3

Déclarer la variable dans index.php

Pour que votre variable fonctionne, il faut la déclarer à un endroit afin que helix la reconnaisse.

Allez dans index.php à la racine du template.

Et trouvez ces lignes :

->lessInit()->setLessVariables(array(

'preset'=>$this->helix3->Preset(),

'bg_color'=> $this->helix3->PresetParam('_bg'),

'text_color'=> $this->helix3->PresetParam('_text'),

'major_color'=> $this->helix3->PresetParam('_major')

))

 

Ajoutez la ligne de décalaration de la variable, sans oublier la virgule à la fin de la ligne précédente, pour obtenir :

->lessInit()->setLessVariables(array(

'preset'=>$this->helix3->Preset(),

'bg_color'=> $this->helix3->PresetParam('_bg'),

'text_color'=> $this->helix3->PresetParam('_text'),

'major_color'=> $this->helix3->PresetParam('_major'),

'body_color'=> $this->helix3->PresetParam('_body')

))

 

Nous avons déclaré la variable body_color qui se verra affecter une valeur selon les changements que nous ferons dans nos préréglages.

Définir les zones à affecter pour la couleur dans un fichier less.

Il ne vous reste plus qu'à définir où vous voulez que votre variable agisse :

 options preset4

Ouvrez votre fichier presets.less pour l'éditer, celui ci se trouve dans le dossier less de votre template helix.

Faites votre déclaration css normalement :

// Couleur body
body {
background: @body_color;
}

 

Ainsi votre balise body aura comme background-color la valeur stockée dans la variable @body_color !!

 

NB : nous avons interféré sur la balise body, mais nous aurions pu le faire sur toute autre balise, et si nous avions voulu que la couleur principale s'applique au body nous aurions pu tout simplement appliquer @major_color à body dans presets.css