Comprendre le thème xSwatch4

Thèmes 29579
Auteur
Alain
Publication
13-09-2021
13-09-2021
Mise à jour
03-11-2021
Note
4.7 (3 votes)
Niveau
Avancé
Comprendre le thème xSwatch4

Comprendre le thème xSwatch4 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.


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.tpl
Carrousel
slider.tpl


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

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

Un tutoriel dédié au template du carrousel sera bientôt réalisé.
Personnaliser un carrousel
Ce tutoriel n'est pas encore disponible.