+33 03 83 56 65 20 +33 06 87 42 95 30

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

nouveau style1

 

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

 nouveau style2

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

nouveau style3

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:

nouveau style4

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.

nouveau style5

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:

nouveau style6

Etape 1 - préparer le terrain

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

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

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

		<jdoc:include type="modules" name="nouvelle_position" style="YJsgxhtml" />

attributs du module

name=  nom de la position du module.

style=  sortie chrome du module qui peut être ,  YJsgxhtml  , Yjround YJsgplain .

Étape 3 - Ajouter une nouvelle position de module à votre fichier templateDetails.xml

Sous cette ligne dans  templateDetails.xml  : 

		<position>user25</position>


Ajoutez cet extrait de code XML:

		<position>nouvelle_position</position>

YJsgxhtml sortie chrome du module:

		<div class="yjsquare modidMODULEID"> <div class="h2_holder"> <h2 class="module_title"> Title </h2> </div> <div class="yjsquare_in"> module content... </div></div>

Notez qu'un espace dans le titre du module divisera votre titre et que chaque partie sera entourée d'un span.
De cette façon, vous pouvez en plus styler le titre séparément.

YJsground sortie chrome du module:

		<div class="yjsquare modidMODULEID addround"> <div class="h2_holder"> <h2 class="module_title"> <span class="title_split titlesplit0">Module</span> <span class="title_split titlesplit1">Title</span> </h2> </div> <div class="yjsquare_in"> module content... </div></div>

YJsgplain sortie chrome du module:

		<div class="yjplain modidMODULEID"> module content... </div>

Configuration du menu accordéon

Le Framework de template YJSG est livré avec un menu latéral en accordéon dont vous pouvez profiter.
Pour activer le menu accordéon, accédez à votre gestionnaire de module de menu, onglet nommé Options de menu YJSG et dans les paramètres sélectionnez le type de menu,
Sélectionnez soit Accordéon soit Accordéon sans bascule;

 menu accordeon1

Bascule ou pas bascule ?

La principale différence entre Accordéon et Accordéon sans bascule (no toggle) est que Accordéon sans bascule peut afficher tous les niveaux de menu, mais le niveau sélectionné ne se repliera pas avant l'accordéon précédemment ouvert. Si vous avez choisi Accordéon cela repliera l'accordéon auparavant ouvert mais ne pourra afficher au maximum que les éléments de menus Niveau de fin2 .

 

Cliquez ensuite sur l'onglet Module et sélectionnez le Niveau de fin. Lire les informations ci-dessus pour faciliter votre décision.

menu accordeon2

Votre menu accordéon est configuré. N'oubliez pas de le publier dans la position de module que vous désirez. Lorsque vous cliquez sur l'élément de menu parent, les éléments enfants vont dérouler vers le bas. La démo peut être vue ICI.

menu accordeon3

Stylisation des éléments de menu accordéon

Une fois le menu accordéon activé, il existe peu de noms de classes CSS que vous pouvez utiliser pour styliser vos éléments de menu.
Selon l'état ( ouvert/fermé ) le basculeur ( élément de menu parent ) obtient un nom de classe supplémentaire pour vous aider :

active_yjsgacc: Actif, élément parent ouvert.

inactive_yjsgacc: Inactif, élément parent fermé.

Page 5 sur 6

Contact

Parlons social

Recevoir des nouvelles du site