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

Il existe plusieurs façons d'inclure votre code Javascript personnalisé dans Joomla. Dans ce tutoriel, nous allons vous expliquer comment les utiliser et quel est le meilleur en fonction du code que vous souhaitez inclure.

Par le gestionnaire de Template

L'administration du template YJSG est fournie avec un onglet Code personnalisé que vous pouvez utiliser pour ajouter vos extraits JavaScript personnalisés dans l'entête ou le pied de page du template.

 

En utilisant JDocument

En joomla vous pouvez utiliser la classe JDocument  pour ajouter des fichiers Javascript personnalisés ou un bloc de code Javascript dans la section head de votre template.
Ce premier exemple montre comment ajouter un fichier Javascript personnalisé dans un template basé sur YJSG.
Pour votre commodité, vous pouvez utiliser le nom de fichier yjsg_custom_params.php pour ajouter des fichiers personnalisés ou des blocs de code.
Ce fichier est situé dans le dossier racine/template/yjsg_template_name/custom/ .

Ajouter un fichier Javascript personnalisé via JDocument / addScript

Commencez par déplacer votre fichier Javascript dans le dossier  racine/template/yjsg_template_name/src/ , ouvrez  yjsg_custom_params.php et ajoutez cette ligne:

exemple:

$document->addScript($yj_site.'src/my_new_js_file.js');

Ajout de fichier personnalisé via l'array $YjsgCustomJS

Cette option est spécifique aux tempaltes basés uniquement sur YJSG et est utilisée pour charger votre fichier Javascript après que tous les scripts du template et les fichiers de la bibliothèque Javascript Joomla aient été chargés.
Pour utiliser $YjsgCustomJS déplacez d'abord votre fichier JavaScript vers le dossier racine/template/yjsg_template_name/src/  , ouvrez yjsg_custom_params.php et ajouter cette ligne:

exemple:

$YjsgCustomJS= array();
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file.js';

Pour ajouter plusieurs fichiers, ajoutez cette ligne dans yjsg_custom_params.php

exemple:

$YjsgCustomJS= array();
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file.js';
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file2.js';

 

Ajout d'un bloc JavaScript dans le head avec JDocument/addScriptDeclaration

Pour ajouter un bloc de code JavaScript, ouvrez yjsg_custom_params.php et ajouter cette ligne

exemple:

$document->addScriptDeclaration("var myVar = 'myValue';");

 

Adding block of Javascript in head with $yjsg_js variable

Un des avantages de l'utilisation de la variable $yjsg_js est que cela charge votre code de bloc Javascript en bas de votre page au lieu de dans le head.

De cette façon, les blocs de code n'encombrent pas le chargement de votre page et c'est beaucoup mieux pour votre SEO du site Web. Pour de meilleures performances et des balises d'entête plus propres $yjsg_js est répercuté à la fin de la page dans layouts/yjsg_footer.php. L'utilisation est très simple et est similaire à JDocument/addScriptDeclaration.
Ajoutez juste la ligne suivante au fichier  yjsg_custom_params.php .

exemple:

$yjsg_js.="var myVar ='my_js_var;'";

Attention: ne pas oublier le point avant l'opérateur =.

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.