Comprendre le thème xSwatch4
Thèmes
28445
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 - Corps - Début
Nous allons ici détailler le début du corps du template theme.tpl.
Barre de navigation
nav-menu.tplCarrousel
slider.tpl1. Corps - Début
<body id="<{$xoops_dirname}>">
<{include file="$theme_name/tpl/nav-menu.tpl"}>
<{* un-comment to enable slider
<{if $xoops_page == "index"}>
<{include file="$theme_name/tpl/slider.tpl"}>
<{/if}>
*}>
Sélecteur id (CSS) ayant pour valeur le nom du module utilisé sur la page affichée
ou "system" pour la page d'accueil sauf si [PREFERENCES][Préférences générales][Module utilisé pour votre page d'accueil] est renseigné
Affichage du template qui gère le menu de navigation (menu du haut). Voir "1a. Menu de navigation"
Début du commentaire smarty
Voir "1b. Le carrousel (slider)"
Fin du commentaire smarty
ou "system" pour la page d'accueil sauf si [PREFERENCES][Préférences générales][Module utilisé pour votre page d'accueil] est renseigné
Affichage du template qui gère le menu de navigation (menu du haut). Voir "1a. Menu de navigation"
Début du commentaire smarty
Voir "1b. Le carrousel (slider)"
Fin du commentaire smarty
1a. Menu de navigation
Le template nav-menu.tpl se situe sous le dossier tpl du thème.Il utilise largement les fonctionnalités Bootstrap 4.
Je vous invite donc à vous rapprocher de la documentation associée Navbar et de visualiser la Page d'exemples fournit.
Un tutoriel dédié aux templates de menus de navigation sera bientôt réalisé.
Menus de navigation (nav-menu.tpl)
Ce tutoriel n'est pas encore disponible.
1b. Le carrousel (slider)
Le template slider.tpl se situe sous le dossier tpl du thème.Il est composé d'un carrousel qui fait défiler ici 3 images.
Il utilise largement les fonctionnalités Bootstrap 4.
Je vous invite donc à vous rapprocher de la documentation associée Carousel et de visualiser la Page d'exemples fournit.
Par défaut, dans le template theme.tpl, le carrousel est désactivé.
Pour l'activer, il suffit de supprimer la ligne ouvrante de commentaire ainsi que la ligne fermante : <{* et *}>.
On obtient ainsi ceci :
<{if $xoops_page == "index"}>
<{include file="$theme_name/tpl/slider.tpl"}>
<{/if}>
Si la page affichée est la page d'accueil
alors on affiche le carrousel
Fin du test conditionnel
alors on affiche le carrousel
Fin du test conditionnel
Un tutoriel dédié au template du carrousel sera bientôt réalisé.
Personnaliser un carrousel
Ce tutoriel n'est pas encore disponible.
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