Comprendre le thème xSwatch4
Thèmes
28327
4.7 (3 votes)
Choisissez le thème xSwatch4 pour votre site web et arrangez-le exactement comme vous le souhaitez.Ce tutoriel très détaillé vous expliquera comment est structuré ce thème et vous guidera pas à pas pour l'adapter à vos besoins.
Vous n'avez pas accès à l'ensemble de ce tutoriel.
Pour accéder à la totalité des pages (), vous devez être membre du site.
L'inscription est donc obligatoire mais gratuite !
Pour accéder à la totalité des pages (), vous devez être membre du site.
L'inscription est donc obligatoire mais gratuite !
Introduction
Mise en place
Structure générale
Liste des variantes
Choix des variantes
theme.tpl - Prérequis
Positionnement des blocs
theme.tpl - Entête
theme.tpl - Corps - Début
theme.tpl - maincontainer
theme.tpl - Corps - Fin
Personnalisation CSS
Accès direct aux blocs
Surcharges de modules
Conclusion
Template theme.tpl - Entête
Nous allons ici détailler l'entête du template theme.tpl.
1. Entête - Début
<!doctype html>
<html lang="<{$xoops_langcode}>">
<head>
<{assign var=theme_name value=$xoTheme->folderName}>
<meta charset="<{$xoops_charset}>">
<meta name="keywords" content="<{$xoops_meta_keywords}>">
<meta name="description" content="<{$xoops_meta_description}>">
<meta name="robots" content="<{$xoops_meta_robots}>">
<meta name="rating" content="<{$xoops_meta_rating}>">
<meta name="author" content="<{$xoops_meta_author}>">
<meta name="copyright" content="<{$xoops_meta_copyright}>">
<meta name="generator" content="XOOPS">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="<{$xoops_url}>/favicon.ico" rel="shortcut icon">
Définit la langue via [PREFERENCES][Préférences générales][Langue par défaut]
Assigne dans theme_name le nom du thème via [PREFERENCES][Préférences générales][Thème par défaut]
Définit les mots-clés via [PREFERENCES][Balises Meta et pied de page][Meta Mots-clés]
Définit la description du site via [PREFERENCES][Balises Meta et pied de page][Meta Description]
Définit la méthode des robots via [PREFERENCES][Balises Meta et pied de page][Meta Robots]
Définit le public concerné via [PREFERENCES][Balises Meta et pied de page][Meta Evaluation]
Définit les auteurs via [PREFERENCES][Balises Meta et pied de page][Meta Auteur]
Définit le copyright via [PREFERENCES][Balises Meta et pied de page][Meta Copyright]
Image utilisée pour le favicon. Ici, le chemin est la racine du site
2. Entête - Variantes
<{* Edit tpl/xswatchCss.tpl to pick the css directory you want to use *}>
<{include file="$theme_name/tpl/xswatchCss.tpl" assign="xswatchCss"}>
<{* Edit tpl/xswatchDarkCss.tpl to pick the css directory you want to use for dark mode *}>
<{include file="$theme_name/tpl/xswatchDarkCss.tpl" assign="xswatchDarkCss"}>
<{* if xswatchDarkCss doesnt set a dark mode theme, just use one for all *}>
<{if $xswatchDarkCss == ''}>
<link rel="stylesheet" type="text/css" href="<{xoImgUrl}><{$xswatchCss}>/xoops.css">
<link rel="stylesheet" type="text/css" href="<{xoImgUrl}><{$xswatchCss}>/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<{xoImgUrl}><{$xswatchCss}>/cookieconsent.css">
<{else}>
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="<{xoImgUrl}><{$xswatchCss}>/xoops.css">
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="<{xoImgUrl}><{$xswatchCss}>/bootstrap.min.css">
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="<{xoImgUrl}><{$xswatchCss}>/cookieconsent.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="<{xoImgUrl}><{$xswatchDarkCss}>/xoops.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="<{xoImgUrl}><{$xswatchDarkCss}>/bootstrap.min.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="<{xoImgUrl}><{$xswatchDarkCss}>/cookieconsent.css">
<{/if}>
Commentaire smarty
Assigne dans xswatchCss la variante claire ou unique choisie dans tpl/xswatchCss.tpl
Commentaire smarty
Assigne dans xswatchDarkCss la variante sombre choisie dans tpl/xswatchDarkCss.tpl
Commentaire smarty
Si xswatchDarkCss est vide
alors on n'utilisera que la variante située dans xswatchCss
sans se soucier du mode clair ou sombre du système
Sinon (cas d'une variante claire et d'une variante sombre)
Quand le système sera en mode clair
on utilisera la variante claire (xswatchCss)
Quand le système sera en mode sombre
on utilisera la variante sombre (xswatchDarkCss)
Fin du test conditionnel
Assigne dans xswatchCss la variante claire ou unique choisie dans tpl/xswatchCss.tpl
Commentaire smarty
Assigne dans xswatchDarkCss la variante sombre choisie dans tpl/xswatchDarkCss.tpl
Commentaire smarty
Si xswatchDarkCss est vide
alors on n'utilisera que la variante située dans xswatchCss
sans se soucier du mode clair ou sombre du système
Sinon (cas d'une variante claire et d'une variante sombre)
Quand le système sera en mode clair
on utilisera la variante claire (xswatchCss)
Quand le système sera en mode sombre
on utilisera la variante sombre (xswatchDarkCss)
Fin du test conditionnel
3. Entête - Fin
<script src="<{$xoops_url}>/browse.php?Frameworks/jquery/jquery.js"></script>
<script src="<{xoImgUrl}>js/bootstrap.bundle.min.js"></script>
<{include file="$theme_name/tpl/cookieConsent.tpl"}>
<{if $xoops_isadmin|default:false}>
<script src="<{xoImgUrl}>js/js.cookie.min.js"></script>
<{/if}>
<link rel="alternate" type="application/rss+xml" title="" href="<{xoAppUrl backend.php}>">
<title><{if $xoops_dirname == "system"}><{$xoops_sitename}><{if $xoops_pagetitle !=''}> - <{$xoops_pagetitle}><{/if}><{else}><{if $xoops_pagetitle !=''}><{$xoops_pagetitle}> - <{$xoops_sitename}><{/if}><{/if}></title>
<{$xoops_module_header}>
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>">
</head>
Utilisation du framework jQuery (Javascript)
Utilisation du framework CSS Bootstrap (Javascript)
Lecture des variables pour la gestion des coockies dans tpl/cookieConsent.tpl
Si l'utilisateur en cours est dans le groupe des Webmasters
alors on lance le script
Fin du test conditionnel
Génération du titre de la page. Voir "3a. Détail sur < title >"
Lancement de scripts
Utilise la feuille de style style.css à la racine du thème
Utilisation du framework CSS Bootstrap (Javascript)
Lecture des variables pour la gestion des coockies dans tpl/cookieConsent.tpl
Si l'utilisateur en cours est dans le groupe des Webmasters
alors on lance le script
Fin du test conditionnel
Génération du titre de la page. Voir "3a. Détail sur < title >"
Lancement de scripts
Utilise la feuille de style style.css à la racine du thème
3a. Détail sur < title >
Pour mieux comprendre la ligne < title >, nous allons la réécrire avec les indentations, cela sera bien plus lisible et compréhensible.Pour rappel, ce titre apparait dans la barre de l'onglet du navigateur.
<title>
<{if $xoops_dirname == "system"}>
<{$xoops_sitename}>
<{if $xoops_pagetitle !=''}>
- <{$xoops_pagetitle}>
<{/if}>
<{else}>
<{if $xoops_pagetitle !=''}>
<{$xoops_pagetitle}> - <{$xoops_sitename}>
<{/if}>
<{/if}>
</title>
Si on est sur une page du module "System" ou bien sur la page d'accueil (aucun module utilisé en page d'accueil)
alors on affiche la valeur de $xoops_sitename via [PREFERENCES][Préférences générales][Titre du site]
Si $xoops_pagetitle existe
alors on affiche aussi la valeur (chaîne de caractères) de cette variable
Fin du test conditionnel
Sinon (on est sur une page d'un module)
Si $xoops_pagetitle existe
alors on affiche la valeur (chaîne de caractères) de cette variable puis la valeur de $xoops_sitename via [PREFERENCES][Préférences générales][Titre du site]
Fin du test conditionnel
Fin du test conditionnel
Template theme.tpl - Header
Here we will detail the template header theme.tpl.
1. Header - Start
<!doctype html>
<html lang="<{$xoops_langcode}>">
<head>
<{assign var=theme_name value=$xoTheme->folderName}>
<meta charset="<{$xoops_charset}>">
<meta name="keywords" content="<{$xoops_meta_keywords}>">
<meta name="description" content="<{$xoops_meta_description}>">
<meta name="robots" content="<{$xoops_meta_robots}>">
<meta name="rating" content="<{$xoops_meta_rating}>">
<meta name="author" content="<{$xoops_meta_author}>">
<meta name="copyright" content="<{$xoops_meta_copyright}>">
<meta name="generator" content="XOOPS">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="<{$xoops_url}>/favicon.ico" rel="shortcut icon">
Sets the language via [PREFERENCES][General Settings][Default language]
Assigns in theme_name the theme name via [PREFERENCES][General Settings][Default theme]
Sets the keywords via [PREFERENCES][Meta tags and footer][Meta Keywords]
Sets the description of the site via [PREFERENCES][Meta Tags and Footer][Meta Description]
Defines the method of robots via [PREFERENCES][Meta Tags and Footer][Meta Robots]
Defines the relevant audience via [PREFERENCES][Meta tags and Footer][Meta Rating]
Sets the authors via [PREFERENCES][Meta tags and Footer][Meta Author]
Sets the copyright via [PREFERENCES][Meta tags and Footer][Meta Copyright]
Image used for the favicon. Here, the path is the root of the site
2. Header - Variants
<{* Edit tpl/xswatchCss.tpl to pick the css directory you want to use *}>
<{include file="$theme_name/tpl/xswatchCss.tpl" assign="xswatchCss"}>
<{* Edit tpl/xswatchDarkCss.tpl to pick the css directory you want to use for dark mode *}>
<{include file="$theme_name/tpl/xswatchDarkCss.tpl" assign="xswatchDarkCss"}>
<{* if xswatchDarkCss doesnt set a dark mode theme, just use one for all *}>
<{if $xswatchDarkCss == ''}>
<link rel="stylesheet" type="text/css" href="<{xoImgUrl}><{$xswatchCss}>/xoops.css">
<link rel="stylesheet" type="text/css" href="<{xoImgUrl}><{$xswatchCss}>/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<{xoImgUrl}><{$xswatchCss}>/cookieconsent.css">
<{else}>
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="<{xoImgUrl}><{$xswatchCss}>/xoops.css">
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="<{xoImgUrl}><{$xswatchCss}>/bootstrap.min.css">
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="<{xoImgUrl}><{$xswatchCss}>/cookieconsent.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="<{xoImgUrl}><{$xswatchDarkCss}>/xoops.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="<{xoImgUrl}><{$xswatchDarkCss}>/bootstrap.min.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="<{xoImgUrl}><{$xswatchDarkCss}>/cookieconsent.css">
<{/if}>
Smarty comment
Assigns in xswatchCss the clear or unique variant chosen in tpl/xswatchCss.tpl
Smarty comment
Assign in xswatchDarkCss the dark variant chosen in tpl/xswatchDarkCss.tpl
Smarty comment
If xswatchDarkCss is empty
then we will only use the variant located in xswatchCss
regardless of whether the system is light or dark
Else (case of a light and a dark variant)
When the system is in clear mode
we will use the clear variant (xswatchCss)
When the system is in dark mode
we will use the dark variant (xswatchDarkCss)
End of conditional test
Assigns in xswatchCss the clear or unique variant chosen in tpl/xswatchCss.tpl
Smarty comment
Assign in xswatchDarkCss the dark variant chosen in tpl/xswatchDarkCss.tpl
Smarty comment
If xswatchDarkCss is empty
then we will only use the variant located in xswatchCss
regardless of whether the system is light or dark
Else (case of a light and a dark variant)
When the system is in clear mode
we will use the clear variant (xswatchCss)
When the system is in dark mode
we will use the dark variant (xswatchDarkCss)
End of conditional test
3. Header - End
<script src="<{$xoops_url}>/browse.php?Frameworks/jquery/jquery.js"></script>
<script src="<{xoImgUrl}>js/bootstrap.bundle.min.js"></script>
<{include file="$theme_name/tpl/cookieConsent.tpl"}>
<{if $xoops_isadmin|default:false}>
<script src="<{xoImgUrl}>js/js.cookie.min.js"></script>
<{/if}>
<link rel="alternate" type="application/rss+xml" title="" href="<{xoAppUrl backend.php}>">
<title><{if $xoops_dirname == "system"}><{$xoops_sitename}><{if $xoops_pagetitle !=''}> - <{$xoops_pagetitle}><{/if}><{else}><{if $xoops_pagetitle !=''}><{$xoops_pagetitle}> - <{$xoops_sitename}><{/if}><{/if}></title>
<{$xoops_module_header}>
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>">
</head>
Using the jQuery framework (Javascript)
Using the Bootstrap CSS framework (Javascript)
Reading variables for coockies management in tpl/cookieConsent.tpl
If the current user is in the Webmasters group
then we run the script
End of conditional test
Generate the title of the page. See "3a. Detail on < title >"
Launching scripts
Uses the style.css stylesheet at the root of the theme
Using the Bootstrap CSS framework (Javascript)
Reading variables for coockies management in tpl/cookieConsent.tpl
If the current user is in the Webmasters group
then we run the script
End of conditional test
Generate the title of the page. See "3a. Detail on < title >"
Launching scripts
Uses the style.css stylesheet at the root of the theme
3a. Detail on < title >
To better understand the line < title >, we will rewrite it with indentations, it will be much more readable and understandable.As a reminder, this title appears in the browser tab bar.
<title>
<{if $xoops_dirname == "system"}>
<{$xoops_sitename}>
<{if $xoops_pagetitle !=''}>
- <{$xoops_pagetitle}>
<{/if}>
<{else}>
<{if $xoops_pagetitle !=''}>
<{$xoops_pagetitle}> - <{$xoops_sitename}>
<{/if}>
<{/if}>
</title>
If we are on a page of the "System" module or on the home page (no module used on the home page)
then we display the value of $xoops_sitename via [PREFERENCES][General preferences][Site name]
If $xoops_pagetitle exists
then we display also the value (string) of that variable
End of conditional test
Otherwise (we are on a page of a module)
If $xoops_pagetitle exists
then we display the value (string) of this variable then the value of $xoops_sitename via [PREFERENCES][General preferences][Site name]
End of conditional test
End of conditional test
Utiliser WAMP Neard associé à XOOPS
Intégrer le système de votes de xmsocial dans son module
Utiliser les icones Font Awesome dans des applications de bureau
Configurer le captcha de XOOPS
Intégrer les médias sociaux de xmsocial dans son module
Intégrer le module xmdoc dans son module