theme.tpl - Header-Understanding the xSwatch4 theme-Tutorials

Understanding the xSwatch4 theme

Themes 34782

Author

Alain

Publication

09/13/2021

Update

11/03/2021

Rating: 4.7 (3 votes)

Level

Advanced

Choose the xSwatch4 theme for your website and arrange it exactly as you wish.

This very detailed tutorial will explain how this theme is structured and will guide you step by step to adapt it to your needs.

You do not have access to all of this tutorial.
To access all the pages (), you must be a member of the site.
Registration is therefore compulsory but free!

Introduction Setting up General structure List of variants Choice of variants theme.tpl - Requirements Positioning of blocks theme.tpl - Header theme.tpl - Body - Start theme.tpl - maincontainer theme.tpl - Body - End Customizing CSS file Direct access to blocks Module overloads 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"> 
     
    <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

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

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"> 
     
    <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

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

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