File Structure

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 Module 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.
/ 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.
/templateDetails.xml This file contains general information on your theme, like the name, release date, directories and module 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.
Warp Themes Documentation