Understand the file structure of all Warp 7 based themes.
Each Warp 7 theme contains the following files and folders.
| Folder/File | Description |
|---|---|
/css |
Contains all CSS files of the theme. |
/css/custom.css |
Use this file to easily add custom CSS. Though the recommended approach is to create a new style in order to make changes update proof. |
/css/ie8.css |
Fixes basic issues for Microsoft Internet Explorer 8. |
/css/theme.css |
Contains the theme's default CSS. This file is compiled from the less/theme.less file. |
/images |
Contains all image files of the theme. |
/js |
Contains all JavaScript files of the theme. |
/js/theme.js |
Responsible for all JavaScript effects and all JavaScript based functions. |
/layouts |
Contains the core files responsible for the theme's layout. |
/layouts/theme.php |
Provides the complete HTML markup for the base theme layout. For more information, take a look at Theme layout. |
/layouts/theme.config.php |
Includes layout calculations and assembles the theme's CSS and JS files. |
/layouts/widget.php |
Responsible for displaying all widget variations. For more information take a look at Widget Positions. |
/less |
All Less files of your theme are stored in this folder. |
/less/uikit |
Contains all UIkit theme Less files, the frontend framework on which Warp is built. |
/less/bootstrap |
Contains all Bootstrap related Less files (Joomla 3 only). |
/less/theme.less |
Defines the theme style and imports the UIkit theme. This file will be compiled into CSS and saved in the /css folder every time you hit Compile Less in the theme settings. At the same time, all styles will be saved in the /styles/STYLE-NAME/css folder. |
/less/customizer.json |
Defines which customizer parameters will be displayed in default or advanced mode. It groups UIkit variables, sets what can be defined through the color picker, direct input or a select box and adds fonts. |
/less/bootstrap.less |
Imports all Bootstrap related files (Joomla 3 only). Just like the /less/theme.less file it will be compiled into CSS, every time you hit Compile Less in the theme settings. |
/styles |
Here you can find the available style variations and add your own custom style. |
/styles/STYLE-NAME/style.less |
Custom set of Less variables generated through the customizer. Everytime you hit Compile Less in the theme settings these variables will be used to compile the CSS file in /styles/STYLE-NAME/css. If this file is not present no CSS file will be compiled which is great if you want to use completely your own custom CSS. |
/styles/STYLE-NAME/css |
Contains all compiled CSS files of your style, i.e. a theme.css file and for Joomla 3 only an additional bootstrap.css file. All these files are generated and compiled through the customizer. |
/warp |
This folder contains the actual Warp 7 core framework. |
/CHANGELOG.md |
Gives you information on the version number of your Warp theme and all changes that have so far been made. |
/config.xml |
Defines the theme settings. For more information, take a look at Config.xml. |
/config.json |
Stores the saved theme settings. This file will be generated automatically as soon as you save your settings. |
/config.default.json |
A backup of the default theme settings. |
/config.php |
Registers all Less files which should be compiled to CSS. |
theme.xml |
This file contains general information on your theme, like the name, release date, directories and widget settings. |
/warp.php |
This file loads the Warp Framework. |
/favicon.ico |
Will be displayed in your browser bar. To change the favicon, simply replace this file. |
/apple_touch_icon.png |
Will be displayed, if you bookmark your website on mobile devices. To change the icon, simply replace this file. |
