Understanding the xSwatch4 theme
Themes
28848
4.7 (3 votes)
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!
To access all the pages (), you must be a member of the site.
Registration is therefore compulsory but free!
Template theme.tpl - Body - Start
Here we will detail the beginning of the template body theme.tpl.
Navigation bar
nav-menu.tplCarousel
slider.tpl1. Body - Start
<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}>
*}>
id selector (CSS) with the value of the name of the module used on the displayed page
or "system" for the home page unless [PREFERENCES][General preferences][Module used for your home page] is filled in
Displaying the template that handles the navigation menu (top menu). See "1a. Navigation menu"
Start smarty comment
See "1b. The carousel (slider)"
End of smarty comment
or "system" for the home page unless [PREFERENCES][General preferences][Module used for your home page] is filled in
Displaying the template that handles the navigation menu (top menu). See "1a. Navigation menu"
Start smarty comment
See "1b. The carousel (slider)"
End of smarty comment
1a. Navigation menu
The template nav-menu.tpl is located under the tpl folder of the theme.It makes extensive use of Bootstrap 4 features.
So I invite you to get closer to the associated documentation Navbar and view the Example page provides.
A tutorial dedicated to navigation menu templates will be made soon.
Navigation menus (nav-menu.tpl)
This tutorial is not yet available.
1b. The carousel (slider)
The template slider.tpl is located under the tpl folder of the theme.It consists of a carousel that scrolls 3 images here.
It makes extensive use of the Bootstrap 4 features.
So I invite you to get closer to the associated documentation Carousel and view the Example page provides.
By default, in the template theme.tpl, the carousel is disabled.
To enable it, simply delete the opening comment line as well as the closing line: <{* and *}>.
The result is:
<{if $xoops_page == "index"}>
<{include file="$theme_name/tpl/slider.tpl"}>
<{/if}>
If the page displayed is the home page
then we display the carousel
End of conditional test
then we display the carousel
End of conditional test
A tutorial dedicated to the carousel template will be made soon.
Customizing a carousel
This tutorial is not yet available.
Using WAMP Neard with 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