IMPORTANT! How to configure / change settings in the template

[Support]

It’s possible to change the JS settings by extending the defaults from the template, that way is so much easier to update the theme changing only one JS file.
Here are a few samples on how to do that:

Changing Settings

1) Changing the “scroll to top” icon:
(js/custom.js)

$.extend(theme.PluginScrollToTop.defaults, {
	iconClass: 'fa fa-chevron-up'
});

2) Changing the “word rotate” default delay:
(js/custom.js)

$.extend(theme.PluginWordRotate.defaults, {
	delay: 3000
});

You can find all the defaults of the plugins and partials in the file js/theme.js as you can see here:

Changing Plugins Options

The template includes a very simple way to configure the elements that are initialized automatically, such as the sliders, you just need to put the settings in the “data-plugin-options” attribute, as you can see below:

<div class="slider" data-plugin-revolution-slider data-plugin-options='{"startheight": 700}'>

It works the same way for most of the plugins included in the template: owlCarousel, Word Rotate, Twitter Feed, etc…

If you want to disable the auto initialization you can just add a class “manual” or remove the data-plugin-* attribute:

<div class="slider manual" id="myRevolutionSlider>

So now you can initialize that using the standard JS mode:

$(document).ready(function() {
	$('#myRevolutionSlider').revolution({
		delay:9000,
		startwidth:960,
		...
		...
	});
});

Remove/Disable a Plugin or Partial

If you want to remove/disable a plugin or partial that has a “initialize” function completely, follow this example:
(js/custom.js)

theme.PluginScrollToTop.initialize = function() {};

You can find all the available plugins and partials in the file js/theme.init.js as you can see here:

Manually Initializing a Plugin

Some of the plugins/elements are initialized automatically, if you want to disabled that and call the plugin via Javascript, follow these steps:

FROM (HTML):

<div class="owl-carousel" data-plugin-options='{"items": 6, "singleItem": false, "autoPlay": true}'>

TO (HTML):

<div class="owl-carousel manual" id="owl-example">

(Javascript):

$(document).ready(function() {
	$("#owl-example").owlCarousel({
		"items": 6,
		"singleItem": false,
		"autoPlay": true
	});
});

---

[Author]

Posts