YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

File structure

Get an overview of how all source files of Warp 7 based themes are organized.

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 Widgets/Modules.
/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 everytime 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, everytime 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.
This file contains general information on your theme, like the name, release date, directories and module settings. In Joomla it's templateDetails.xml and in WordPress it's theme.xml.
/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.

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!