https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Helix possède par défaut 4 préréglages

Vous y accédez par l'onglet préréglages / preset (en anglais)

Choisir un préréglage Helix

Dans l'onglet préréglages, vous avez par défaut 4 préréglages.

Si vous cliquez sur un des presets, vos options de styles changent et vos css seront gérées par le fichier : templates/votre template_helix3/css/presets/presetX.css

Les trois valeurs que vous pouvez changer sont

  • la couleur de fond de votre contenu lorsque celui ci est en mode encadré.

  • La couleur de texte

  • La couleur principale qui modifie plusieurs éléments: les boutons, le footer, les liens , certains titres …

Le choix du preset va également modifier votre logo qui se trouve dans le dossier templates/votre_template_helix3/images/presets/presetX

preset1

Modifier la couleur d'une option des préréglages

Une fois choisi un préreglage, vous aurez peut être envie de modifier une des options, changer la couleur de fond de votre template par exemple.

Deux possibilités s'offrent à vous :

Avec l'éditeur de couleur :

preset2

  1. Cliquez sur la couleur

  2. une popup s'ouvre

  3. Choisissez votre palette

  4. Choisissez votre couleur dans la palette

Directement en hexadécimal

Sur le web, la même couleur peut être codée soit en nuances de rouge vert et bleu (rvb ou rgb), soit en hexadécimal, soit directement par leur nom anglais (red, white)

Les couleurs sur Helix sont en hexadécimal.

Nous pouvons saisir le code de 6 chiffres qui commence toujours par un # dans l'espace dédié.

Pour bien choisir le code hexadécimal vous avez des outils qui peuvent vous aider.

N'oubliez pas de sauvegarder et de vider vos caches avant d'aller vérifier vos changements sur le site.

Pour un client, pour créer un template destiné à la vente, ou tout simplement pour vous même, vous aurez peut-être besoin d'ajouter un ou plusieurs preset dans helix, en supplément de vos 4 presets de base.

Suivez les étapes pour comprendre comment sont construits ces préréglages.

Les étapes peuvent être effectuées dans l'ordre que vous voulez, cela n'a pas d'importance.
Par contre elles sont toutes obligatoires si vous voulez arriver à un nouveau préréglage fonctionnel.

Allons-y ! supposons que nous voulions créer un préréglage nommé monpreset.

Modifier le dossier images

Les images apparaissant dans l'onglet des préréglages sont rangées dans le dossier /templates/votretemplate/images/preset/nomdupreset

Créez ou dupliquez le dossier monpreset à l'endroit idoine.

monpreset


Dans ce dossier vous aurez 3 fichiers images

monpreset2

  • logo.png : image du logo

  • logo-arobase-2x.png : image du logo *2 pour affichage retina

  • thumbnail.jpg : la miniature apparaissant dans l'onglet préréglages.

Pour notre exemple nous avons modifié légèrement la vignette miniature, qui est désormais visible dans l'onglet préréglages.

monpreset3

Modifier le fichier templateDetails.xml

Pour afficher les selecteurs de couleurs pour le fond, le texte et la couleur principale prédominante, nous devons le déclarer dans le fichier templateDetails.xml à la racine du template ; ouvrez le pour édition.

Copiez et dupliquez toute la partie concernant le preset4 (par exemple) et transformez tout ce qui est preset4 dans la seconde partie en monpreset.

Ce qui donnera :

 <!--Start Preset4-->

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

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

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

                <!--End Preset4-->



<!--Start monpreset-->

 <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-->

 

Vous pouvez régler vos couleurs par défaut.

À cet instant vous apercevez les selecteurs de couleurs dans l'onglet préréglages quand vous avez choisi le preset monpreset.

Dupliquer le fichier et modifier le fichier css

Il faut maintenant que vos réglages soient appliqués à des css.

Dans le dossier templates/votretemplate/css/presets dupliquez et renommez en monprest.css un fichier css preset existant.

 monpreset4

Vous voici désormais prêt à modifier les couleurs de votre propre préréglage, qui sera effectif sur votre site, il ne vous reste plus qu'à améliorer votre fichier de css pour l'adapter à certains de vos besoins.

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