Template theme.tpl - Requirements

This is the main file that structures the theme.
It is the basis of everything.
Let's have a look at it in detail so that we can see the elements that make it up.

1. HTML

The theme.tpl file is a HTML file.
This means that it is preferable to have some knowledge of HTML to be able to intervene more easily and better understand what you are modifying.

2. Template

The theme.tpl file is a HTML special file for XOOPS, it is a template.

3. CSS

So this is a template, a file for the design of the theme. it makes heavy use of cascading style sheets (CSS, for Cascading Style Sheets).
It is therefore wise to have some knowledge of CSS.

4. Bootstrap V4 (4.6)

In addition, this theme uses a very well known CSS library called Bootstrap, here, version 4.6.
You don't need to know Bootstrap perfectly, the documentation is quite good, just follow it.

We are currently working on the xSwatch5 theme but it is not yet available.

5. Smarty

This template uses smarty, which are variables and functions that will be displayed and executed when the page is called.

Examples of variables:
<{$xoops_sitename}>, <{$xoops_pagetitle}>, <{$xoops_uname}>

Examples of functions:
<{include file="$theme_name/tpl/nav-menu.tpl"}>, <{if $xoops_isuser|default:false}>

Understanding smarty will make it easier to customize your pages.

Understanding smarty in XOOPS
This tutorial is not yet available.

6. Template modifications

By default, for a stable production site, templates are no longer compiled and the system uses "cache" files to save display time.
In development mode and modification of the design, we must change this mode.
Just go to the [Control Panel] then [Preferences] then [General Preferences] and go to the line:

Check templates for modifications?
If this option is enabled, modified templates will be automatically recompiled when they are displayed. You must turn this option off on a production site.

You must set the option to Yes.

6a. Template caching

Sometimes it is necessary to remove the cache so that changes are visible.
It should be deleted in 2 places:

• XOOPS cache:
  [Configuration panel] then [Maintenance] then [Clean cache folder] then select the 3 cache folders (smarty_cache, smarty_compile and xoops_cache) and finally button Submit.
  
  
• Browser cache:
  This differs depending on the browser used.

7. Javascript

We will very partially cover a piece of Javascript code in this tutorial, but rest assured, it is not at all necessary to know Javascript to follow this tutorial.

---