Améliorations YJSG

YJSG est livré avec plus de 400 icônes de polices fournies par FontAwesome que vous pouvez placer avant ou après le titre du module.

Pour configurer ceci, allez dans le gestionnaire de module, cliquez sur l'onglet Options du module Yjsg et cliquez sur n'importe quelle icône que vous désirez. L'icône avant / après la zone de saisie sera remplie automatiquement. Vous pouvez également commencer à taper le nom de l'icône. L'icône que vous recherchez sera placée en haut de la liste.

 

vous pouvez transformer vos titres de module de texte simple en quelque chose comme ceci:

 

Faites-moi glisser ce contenu !

Tous les modèles basés sur YJSG sont fournis avec 3 panneaux coulissants que vous pouvez utiliser pour publier votre contenu. Les panneaux coulissants sont complètement responsives et sont visibles sur tous les appareils. Leurs emplacements sont:

• En-tête supérieur de la page - contient une grille de 5 modules avec comme noms de positions de modules tpan1 - tpan5

• Bas de page en -dessous du footer - ccontient une grille de 5 modules avec comme noms de positions de modules bpan1 - bpan5

• Page côté gauche-contient 1 position de module avec comme nom sidepanel

 

Panneau supérieur

Panneau inférieur

Panneau latéral

 

 

Paramètres des panneaux

Les panneaux peuvent être activés en même temps ou individuellement. Pour activer le panneau coulissant, il suffit de publier votre module dans l'une des positions de module mentionnées ci-dessus. Les paramètres des panneaux, y compris les réglages de largeur pour les modules dans le panneau supérieur et inférieur, peuvent être trouvés dans le gestionnaire de template
dans l'onglet Mise en page.

Style des panneaux

Les panneaux sont très faciles à style et ils ne contiennent pas d'images.  Le style des panneaux par défaut se trouve dans :  site_racine/templates/yjsg_based_template/css/yjsg_layout.css .
La couleur de fond par défaut des panneaux est blanche mais elle peut être modifiée avec quelques règles CSS simples.

/* top panel container */#yjsg_toppanel_slide {background:#0ebcd1;color:#fff;border-bottom:1px solid #098594;}/* top panel open/close button */#yjsg_toppanel_open {background:#0ebcd1;color:#000;border:1px solid #098594;}/* side panel container */#yjsg_sidepanel_slide{}/* side panel open/close button */#yjsg_sidepanel_open{}/* bottom panel container */#yjsg_botpanel_slide{}/* bottom panel open/close button */#yjsg_botpanel_open{}

Le code ci-dessus se traduirait par le style du panneau supérieur suivant

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