Each style uses one theme, and you can use multiple styles simultaneously --> so you can use multiple themes in one site.
1. Default Themes
By default, JA T3v3 supports 4 themes named: default
, green
, red
and dark
. You can assign the theme you want for each style.
For each style, you can select any theme to be applied for the style. To use multiple themes in one site, you need to override template.
Read more override template
2. Customize theme
To customize theme, you can use settings of template (Theme Setting tab or ThemeMagic) or customize the Theme LESS files located in: templates/ja_t3v3_blank/assets/less/themes/Theme_Name
. In case you are not in development mode, you customize the Theme CSS file located in: templates/ja_t3v3_blank/assets/css/themes/Theme_Name
Theme LESS files (developed files)
Theme CSS files (compiled files)
Note: After complied, the following files are auto created: bootstrap.css
, bootstrap-responsive.css
, responsive-home.css
and template-responsive.css
3. Create New theme
There are 2 ways to create new theme:
#1: Create manually
Step 1: Create theme folder
In the folder: templates/ja_t3v3_blank/assets/less/themes
, create a theme folder. In this example, we name it: custom-theme
Step 2: Create theme files
Each theme has 3 LESS files: template.less
, variables.less
, variables-custom.less
. We add the files in folder: templates/ja_t3v3_blank/assets/less/themes/custom-theme
#2: Clone a theme folder and theme files
From the list of default theme folders, clone one folder then rename it. Open the folder then customize the theme using the LESS files
.
4. Define the Theme
Now, you will need to compile less to css so that new created theme folder will be compiled to css theme folder.
Now, you will have a theme folder compiled in the folder: templates/ja_t3v3_blank/css/themes/custom-theme
In the back-end, you can select the new created theme for style you want
Notes:
As you can see, each theme has an independent folder. The folder contains all necessary files, it is not overrided from default theme so it will increase the speed of your site.