Tutoriels sur Framework de Template Helix pour Joomla

Ajouter un preset dans Helix.

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.