Tutoriel Framework YJSG

Pour affiner le balisage et rendre les coins arrondis plus rapides et plus faciles à comprendre, nous avons utilisé de simples classes CSS .addround
avec par défaut 5px border radius.

exemple:

.addround 
{
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #999;
margin:5px;
}

Pour activer les coins arrondis pour votre module allez dans le gestionnaire de template, onglet Mise en page et survolez la position du module, cliquez sur l'icône en haut à gauche, sélectionnez Arrondi (Round) et appuyez sur Sauver.

 

Avec une petite modification CSS, vous pouvez transformer vos angles arrondis par défaut ainsi:

exemple:

.addround
{
background: #40b1e2;
border:none;
box-shadow:inset 0px -100px 100px #329dcc;
color:#fff;
}
.addround .module_title,.addround a
{
color:#fff;
}
.addround a:hover,.addround a:focus
{
color:#121212;
}

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: