Settings

The general theme section allows you to control the behavior and the overall appearance of your theme.


Style

The style section contains the customizer. Hit the Customizer button to add your own style or to modify an existing style. After the customizer is loaded, you can easily customize colors, fonts, margins and even more settings of the theme. The customizer saves only the modified variables and automatically compiles them into CSS.

For further information, please take a look at our Customizer tutorial.


Development

1. Less Developer Mode

Check the first option and the browser automatically compiles your Less files via JavaScript every time you load a page. This provides an appropriate testing environment. It's not recommended to enable developer mode on the live site as the constant process of compiling is highly inefficient.

2. Dynamics Styles

The second option enables the browser to load styles by URL. This is useful, if you want to test different styles for your website. Disable this option, when your website goes live.

3. Compile Less to CSS

To finish your Less modifications, hit the Compile Less button and all your changes will be compiled into the final CSS.

Important Make sure, you aren't developing in the /styles/STYLE-NAME/css folders, because these folders will be overridden as soon as you hit the Compile Less button.


Compression

To optimize page load time, choose one of the following compression options.

Setting Description
None All files will be loaded separately and fully sized.
Combination + Minify This option will minimize and combine CSS and JavaScript files into one single file.
Combination + Minify + Data URIs Data URI embeds image data directly into the document, thus reducing the HTTP requests for your image files. This applies only to images that have a maximum size of 10kB.
Combination + Minify + Data URIs + Gzip Gzip allows a faster data transfer through compressed data packages, instead of dealing with large data volumes by sending them separately.

Responsive

The viewport meta tag controls the layout on mobile browsers. If it's not set, the default width on mobile is 980px and the site will look the same as on desktops.


Bootstrap

By checking this option, you disable Bootstrap. This reduces the page loading time, when you only use the Joomla blog and articles.


Content

Enable or disable the To-top scroller and the Warp branding.


Social Buttons

To enable the users to share articles with others, activate the Social buttons option. It inserts small widgets below your articles. These are loaded via JavaScript from Twitter, Facebook or Google+.


Modules

Set the default module styles for the specific positions.

Note This style will be overwritten as soon as you select a style for a single module in the module settings.


Additional Scripts

Here you can insert additional scripts like the Google Analytics tracking code below, for example. It will be added before the closing body tag in the theme.

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

For further information, take a look at the Google Analytics tutorial.

Warp Themes Documentation