Understanding the xSwatch4 theme

Themes 28721
Author
Alain
Publication
09/13/2021
09/13/2021
Update
11/03/2021
Rating
4.7 (3 votes)
Level
Advanced
Understanding the xSwatch4 theme

Understanding the xSwatch4 theme 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.


General structure


1. Overall structure theme folder
We will obviously find the xswatch4 folder underneath the themes folder itself located at the root of XOOPS.

The structure of the theme is as follows:

xswatch4

css-cerulean

css-... (list of variants)

css-yeti

css

images

js

language

modules

tpl

README.md

index.php

screenshot.png

shot.gif

style.css

theme.ini

theme.tpl

theme_autorun.php

thumbnail.png



2. Folders css-xxx
Each css-xxx folder corresponds to one of 21 variants of the theme.
These include:
css-cerulean, for the Ceruleanvariant
css-cosmo, for the variant Cosmo
...,
css-united for the United variant,
css-yeti for the variant Yeti,

We do not need to intervene in these files.
We will see later how to choose a variant from a choice of 21 variants.


3. Folder css
This folder contains the stylesheet file xoops.css including.
We will see later how to customise a mycss.css stylesheet without touching the variant stylesheets.


4. Folder images
This folder contains the images associated with the theme.
This is the place to customize one's favicon.png, with the icon right next to the URL.
You can also add your company logo and an image when maintaining the site.


5. Folder js
This folder contains the javascript files needed for the theme to function properly.


6. Folder language
This folder contains the language files for the translation of the elements that make up the theme.


7. Folder modules
This folder contains the Bootstrap 4 overloads of a large number of modules.


8. Folder tpl
This folder contains all the templates that make up the theme except for the main template of the theme, the one that calls all the others.
We will detail each template later.


9. File README.md
This file is as the name suggests a file to be read.
You can find general information about the but also specific information to customize the theme and understand it better.


10. File theme.tlp
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.