Home Forums Porto Template FAQ’s IMPORTANT! How to configure / change settings in the template

This topic contains 0 replies, has 1 voice, and was last updated by  Support 4 years, 2 months ago. This post has been viewed 12960 times

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #10003926

    Support
    Keymaster

    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
    	});
    });

Viewing 1 post (of 1 total)