Améliorations YJSG

Dans YJSG, vous pouvez ajouter 7 grilles supplémentaires. Chaque grille peut contenir jusqu'à 5 modules. Veuillez noter qu'ils doivent tous être nommés comme vous le voyez dans l'exemple ci-dessous. La seule variable modifiable est le nom de votre position de module. Vous pouvez nommer vos positions de module tels que . modNames situés dans la fonction  yjsg_print_grid_area  comme vous le désirez.

grilles disponibles:

1. <?php yjsg_print_grid_area('yjsgName=newgrid1|modNames=commevousvoulez'); ?>

2. <?php yjsg_print_grid_area('yjsgName=newgrid2|modNames=commevousvoulez'); ?>

3. <?php yjsg_print_grid_area('yjsgName=newgrid3|modNames=commevousvoulez'); ?>

4. <?php yjsg_print_grid_area('yjsgName=newgrid4|modNames=commevousvoulez'); ?>

5. <?php yjsg_print_grid_area('yjsgName=newgrid5|modNames=commevousvoulez'); ?>

6. <?php yjsg_print_grid_area('yjsgName=newgrid6|modNames=commevousvoulez'); ?>

7. <?php yjsg_print_grid_area('yjsgName=newgrid7|modNames=commevousvoulez'); ?>

Étape 1 - Préparer le terrain

Vous devez d'abord décider où ajouter votre nouvelle position de grille. Ouvrir index.php dans le template et essayez de trouver un endroit approprié pour votre nouvelle grille.
Par exemple, sous le menu principal.

 

 

Étape 2 - Ajoutez l'extrait de code dans index.php

Veuillez ajouter l'extrait de code suivant dans l'espace précédemment déterminé:

balise:

<?php yjsg_print_grid_area('yjsgName=newgrid1|modNames=nouvelle_position',true); ?>

Voir les informations sur la fonction d'impression Grid pour les options de fonction supplémentaires.

Étape 3 - Ajouter de nouvelles positions de module à votre fichier templateDetails.xml

Sous cette ligne dans templateDetails.xml : 

balise:

<position>user25</position>

Ajoutez cet extrait de code XML:

balise:

<position>nouvelle_position1</position>

<position>nouvelle_position2</position>

<position>nouvelle_position3</position>

<position>nouvelle_position4</position>

<position>nouvelle_position5</position>

 

 

Étape 4 - Ajouter de nouveaux paramètres de grille à template-settings.xml

 

Sous cette ligne dans template-settings.xml : 

balise:

<fields name="params" addfieldpath="/plugins/system/yjsg/elements">

Ajouter cet extrait xml: 

balise:

<fieldset name="YJSG_LAYOUT_LABEL">
<field name="yjsg_newgrid1_width" type="yjsgmultitext" default="20|20|20|20|20" labels="nouvelle_position1|nouvelle_position2|nouvelle_position3|nouvelle_position4|nouvelle_position5" customchrome="YJsgxhtml|YJsgxhtml|YJsgxhtml|YJsgxhtml|YJsgxhtml" items="5" size="2" class="serialize_multiple" />
</fieldset>

 

Champ de grille personnalisé expliqué:

• name: variable qui contient vos informations de nouvelle grille.

• default: un tableau de largeurs de modules par défaut.

• labels: descriptions des noms des positions visibles dans le gestionnaire de template.

• customchrome: chrome de module par défaut. Cela peut être YJsgxhtml, YJsground, YJsgblank, YJsgtabs, YJsgaccordion, YJsgslides.

• items: nombre de modules dans la grille.

• size: taille de largeur de l'inputbox.

• class: classe de grille par défaut dans le template admin. Ne le changez pas.

 

Veuillez noter que le nom de la variable name="yjsg_newgrid1_width" doit correspondre à l'attribut de fonction de grille yjsgName=newgrid1 donné plus haut.
Une fois tout cela terminé, votre nouvelle grille sera visible dans le gestionnaire de template sous l'onglet Mise en page. Notez également que la position de la grille dans index.php sera répliquée dans votre onglet Mise en page. Comme vous pouvez le voir dans notre exemple, la nouvelle grille est positionnée sous le menu principal.

 

Étape 5 - Publiez votre module dans la nouvelle position de module

Accédez au gestionnaire du module désiré et publiez le module dans votre nouvelle position de module.

 Résultat:

 

 

 

Étape 1 - ajouter le nom de style à template-settings.xml

Ouvrez la fichier racine/templates/nom_template/template-settings.xml f et trouvez la variable nommée yjsg_get_styles

balisage:

<fieldname="yjsg_get_styles"type="yjsglist"default="blue|40b1e2"label="YJSG_COLOR_LABEL"description="YJSG_COLOR_DESC"yjsgstyles="blue==40b1e2">

<optionvalue="blue|40b1e2">Blue</option>

</field>

Attributs de champ

Les attributs du champ nommé yjsg_get_styles sont importants et contrôlent le stylewitcher ainsi que le logo, le sélecteur de couleur et les paramètres de style dans le gestionnaire de templates. Les valeurs dans les attributs sont séparées par | ou == et vous devez leur prêter une attention particulière.

nom d'attributs du champ yjsg_get_styles:

name: variable qui contient des informations de style.

type: type d'élément yjsglist.

default: style de couleur sélectionnée par défaut et sa couleur de lien.

label: libellé de l'élément pour le gestionnaire de template

description: description de l'élément pour le gestionnaire de templates.

yjsgstyles: all available template styles.

option value: option style name and its default link color.

 

ajouter un nouveau nom de style:

Nous allons maintenant ajouter un nouveau nom de style vert aux noms de style existants afin donc notre nom de champ yjsg_get_styles va être modifié ainsi;

balisage:

<field name="yjsg_get_styles" type="yjsglist" default="blue|40b1e2" label="YJSG_COLOR_LABEL" description="YJSG_COLOR_DESC" yjsgstyles="blue==40b1e2|green==748500">

<option value="blue|40b1e2">Bleu</option>

<option value="green|748500">Vert</option>

</field>

Vous noterez que le nom de l'option n'est pas necesairement le nom du style ( traduction en françasi par exemple.

Le nouveau nom de style de template doit maintenant être visible dans le gestionnaire de templates.

 

Étape 2 - ajouter un nouveau dossier d'images du style

Rendez-vous au dossier d'images racine/templates/nom_template/images copiez le dossier blue et renommez le en green.

 

Étape 3 - ajouter et modifier la nouvelle feuille de style

Puisque nous avons déjà des feuilles de style pour chaque nom de style, allez à site_racine/templates/template_nom/css copiez le fichier blue.css et renommez le en green.css.

Ouvrez green.css et remplacez toutes les instances de images/blue en images/green et toutes les instances du code couleur 40b1e2 en 748500.
Notez que certaines propriétés CSS comme a:hover ou des images d'arrière-plan spécifiques doivent également être modifiées.
Nous n'allons pas entrer dans les détails pour ceux-ci, mais il vous suffit de noter que vous pourriez avoir besoin de les modifier afin d'adapter votre nouveau style de template.
Maintenant, allez au gestionnaire de templates et définissez Green comme style par défaut. Appuyez sur Sauver et allez visitez votre site, les changements ont pris effet:

Changez et remplacez votre logo:

Comme vous pouvez le voir, il ne vous reste plus qu'à changer votre logo pour l'adapter à votre nouveau style. Veuillez ouvrir logo.psd et changer le code de couleur.
Maintenant remplacer le fichier existant nommé logo.png dans le dossier site_racine/templates/template_nom/images/green par le nouveau logo.

Accédez à votre page d'accueil et actualisez. Votre nouveau logo doit être visible.

Si le processus de changement de logo est trop compliqué, vous pouvez envoyer un nouveau fichier de logo par le gestionnaire de templates. Allez dans l'onglet nommé mise en page et téléchargez ou sélectionnez le fichier logo de votre serveur: