Contents

1. Stop slide when one slide image

2. Update twitter in template

3. How to config template color

4. Image Dimension

5. Display past tour dates events

6. Email configuration

7. Visual Composer License

8. Theme And Plugin Update

9. Google Maps Errors For HTML

10. Submenu in Elixir HTML

11. Enable raw html

12. Google Maps Errors

13. How To Order Section (Page)

14. Stop preload in blog and single post

15. Custom Color

1. Stop slide when one slide image

Please open this file:

epic-jellythemes/js/default.js line 200

The default code will look like:

/* Home background slider */
        $("#owl-main").owlCarousel({
            autoPlay: 3500,
            navigation: true,
            goToFirst: true,
            goToFirstSpeed: 2000,
            slideSpeed: 700,
            pagination: true,
            transitionStyle: "fade",
            singleItem: true,

Change it to:

/* Home background slider */
        $("#owl-main").owlCarousel({
            autoPlay: $("#owl-main .item").length>1 ? 3500 : false,
            navigation: true,
            goToFirst: true,
            goToFirstSpeed: 2000,
            slideSpeed: 700,
            pagination: true,
            transitionStyle: "fade",
            singleItem: true,

Then check your site again

2. Update twitter in template

First, please update script in: \muziq\scripts\vendor\twitterFetcher_min.js. Please copy last version of script and paste it in current file from:

https://raw.githubusercontent.com/jasonmayes/Twitter-Post-Fetcher/master/js/twitterFetcher_min.js

Then go to \muziq\scripts\main.js go to Twitter section.

The default code:

function twitterfeed() {  
      var config5 = {
        "id": '702067549920485376',
        "domId": 'twitter-feed',
        "maxTweets": 4,
        "enableLinks": true,
        "showUser": true,
        "showTime": true,
        "dateFunction": '',
        "showRetweet": false,
        "customCallback": handleTweets,
        "showInteraction": false
      };

Change it to:

function twitterfeed() {
      var config5 = {
        "profile": {"screenName": 'type your username here without @'},
        "domId": 'twitter-feed',
        "maxTweets": 4,
        "enableLinks": true,
        "showUser": true,
        "showTime": true,
        "dateFunction": '',
        "showRetweet": false,
        "customCallback": handleTweets,
        "showInteraction": false
      };

3. How to config template color

Please check my screenshot below to understand it.


4. Image Dimension

Please use correct dimension image to fit muziq theme

Events image: 900x2000
Artist image: 680x920
Album cover: 740x740
Gallery big: 740x900
Gallery medium: 740x450
Gallery small: 370x450

5. Display past tour dates events

Please open this file: /sonorama/inc/functions.shortcodes.php

Go to line 166, with the code look like below:

array(
    'key' => '_jellythemes_event_date',
    'value' => $today,
    'compare' => '>=',
    'type' => 'date'
     )
),

Then change the compare value like below:

array(
    'key' => '_jellythemes_event_date',
    'value' => $today,
    'compare' => '!=',
    'type' => 'date'
     )
),

Please check your website now.

6. Email configuration

Update video:

Please make sure you have mail.php file. Then follow the instruction to make it work in our template.

1. Go to contact.html file.

2. In line 146, you will see the form look like below:

<form>
  <div class="form-group inline">
    <input type="text" class="form-control" id="inputName" placeholder="name">
  </div>
  <div class="form-group inline">
    <input type="email" class="form-control" id="inputEmail" placeholder="email address">
  </div>
  <div class="form-group">
    <textarea class="form-control" rows="3" id="inputMessage" placeholder="message"></textarea>
  </div>
  <div class="voffset20"></div>
  <button type="submit" class="btn btn-arrow">Send message</button>
</form>

Then change it to below:

<form action="mail.php" method="post" id="contactform" class="contact-form" novalidate="novalidate">
  <div class="form-group inline">
    <input type="text" class="form-control text name required" name="name" id="name" placeholder="name">
  </div>
  <div class="form-group inline">
    <input type="email" class="form-control text email required" name="email" id="email" placeholder="email address">
  </div>
  <div class="form-group">
    <textarea class="form-control text area required" rows="3" name="message" id="message" placeholder="message"></textarea>
  </div>
  <div class="voffset20"></div>
    <div class="formSent"><p><strong>Your Message Has Been Sent!</strong> Thank you for contacting us.</p></div>
  <button type="submit" class="btn btn-arrow">Enviar mensaje</button>
</form>

3. Add the style below in main.css file.

.formSent {
    margin: 10px;
    text-align: center;
    padding: 0 0px;
    color: #cbc8c8;
    display: none;
}

4. Open main.js file and add the validation script above INTRO SLIDER, check screenshot if you don't understanding it clearly:

/*Validation*/
  $("#contactform").validate({
    submitHandler: function(form) {
      $(form).ajaxSubmit();
      $('.formSent').show();
      $(form).find('input[type=text]').val('');
      $(form).find('input[type=email]').val('');
      $(form).find('textarea').val('');
    }
  });

5. Please download form validate script file in here: Google Drive. Then add this script in folder: scripts/vendor/. The last step is add it in your contact.html file, check screenshot if you don't understanding it clearly:

<script src="scripts/vendor/jquery.form.js"></script>
<script src="scripts/vendor/jquery.validate.js"></script>

7. Visual Composer License

If you have Visual Composer with a theme which you’ve purchased from ThemeForest, then you don’t need to activate it.

Please see this link: http://themeforest.net/forums/thread/visual-composer-licence-key/133679

8. Theme And Plugin Update

Please go to http://themeforest.net/downloads and download latest version of our theme

Please follow this video to update our theme in your website.


9. Google Maps Errors For HTML

You will need put api google key for your google maps to make it work online.

Register google api key here: https://developers.google.com/maps/documentation/javascript/get-api-key.

For Elixir Template:

In the index.html, please search maps.googleapis.com and add your key like this:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=put-your-key-here"></script>

For Uniform Template:

In the index.html, please search maps.googleapis.com and add your key like this:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=put-your-key-here"></script>


10. Submenu in Elixir HTML

The code will look like below:

<nav class="collapse navbar-collapse navbar-right navbar-main-collapse" role="navigation">
    <ul id="nav" class="nav navbar-nav navigation">
        <li class="page-scroll menu-item">
            <a href="#1">Menu title</a>
            <ul class="submenu">
                <li><a href="#sub">This submenu</a></li>
                <li><a href="#sub">This submenu</a></li>
            </ul>
        </li>
    </ul>
</nav>

Please add the css code in the path: template-folder -> css -> elixir.css, please put it in the end of the file:

@media only screen and  (max-width : 768px) {
.navbar-nav > li:hover > .submenu {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 5%;
    top: 20px;
}
.navbar-nav > li > .submenu li {
    margin: 10px 0px;
}
}

Then download the fix file and replace it in: /classic american grill restaurant/js/default.js.

Download link here: https://jellythemes.ticksy.com/?dl=728785

11. Enable raw html

For Sonorama:

Please open file: /sonorama/inc/functions.shortcodes.php

Go to line 300, with the code look like below:

vc_remove_element('vc_raw_html');

Then enable by add // front of this code:

//vc_remove_element('vc_raw_html');

For Solido

Please open file: /solido/inc/functions.shortcodes.php

Go to line 383, with the code look like below:

vc_remove_element('vc_raw_html');

Then enable by add // front of this code:

//vc_remove_element('vc_raw_html');

For Nixon

Please open file: /nixon/inc/functions.shortcodes.php

Go to line 353, with the code look like below:

vc_remove_element('vc_raw_html');

Then enable by add // front of this code:

//vc_remove_element('vc_raw_html');

12. Google Maps Errors

Please create google key here: https://developers.google.com/maps/documentation/javascript/get-api-key

The google maps script will available in:

For Epic - Storm - Build: \inc\functions.frontend.php

For Solido: \solido\footer.php

wp_enqueue_script(
                'gmaps',
                '//maps.googleapis.com/maps/api/js',
                array('jquery'),false,true );

Then add the key like:

wp_enqueue_script(
                'gmaps',
                '//maps.googleapis.com/maps/api/js?key=put-your-key-here',
                array('jquery'),false,true );

For Elixir: \inc\functions.shortcodes.php line 253

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=put-your-key-here"></script>

Then check your website again.

13. How To Order Section (Page)

To order section (page), please using order in Page Attributes. Please check the screenshot below to understand it better.

Image credit: wpbeginner.com

14. Stop preload in blog and single post

You change in header.php:

<header class="ip-header <?php echo ($jellythemes['loader'] ? 'disabled' : ''); ?>">

To:

<header class="ip-header <?php echo ((is_single() || is_home()) ? 'disabled' : ''); ?> <?php echo ($jellythemes['loader'] ? 'disabled' : ''); ?>">

15. Custom Color

Go to

\epic-jellythemes\css\colors\

Create a new file name: custom-color.css and copy style from black.css file to new file.

Then change all the hex color code to your color. The new file will look like below:

#owl-main .owl-controls .owl-page.active span, #owl-main .owl-controls.clickable .owl-page:hover span, .carousel-wrapper.with_pagination.round_inner .owl-theme .owl-controls .owl-page.active span {
    background:your-hex-color-code-here;
    border-color:your-hex-color-code-here;
}
a.close.top {background: url(../../images/close/blacks-close-project.png) no-repeat;}
.ip-header .ip-loader svg path.ip-loader-circle {stroke: your-hex-color-code-here;}
.project-info h4:after {background: your-hex-color-code-here;}
.project-info .btn2 {color: your-hex-color-code-here;}
.section .text strong, a {color:your-hex-color-code-here;}
.section .title {border-color:your-hex-color-code-here;}
#header .menu-item.current a, #header .menu-item a:hover {border-bottom-color:your-hex-color-code-here;}
#header .menu-item.current .sub-menu a {border-bottom-color: transparent;}
#header .menu-item.current .sub-menu a:hover {border-bottom-color: your-hex-color-code-here;}
.options-head {background: your-hex-color-code-here; }
.carousel-wrapper.with_buttons .owl-controls .owl-buttons div,.carousel-wrapper.with_buttons .owl-controls .owl-buttons div.owl-next {background-color: your-hex-color-code-here; }
.carousel-wrapper.full .generic-carousel .owl-item .ulitem li .icon {background: your-hex-color-code-here; }
.carousel-wrapper.with_pagination .owl-controls .owl-page.active span, .carousel-wrapper.with_pagination .owl-controls.clickable .owl-page:hover span {background: your-hex-color-code-here; }
.team-wrapper .team-member .hover .name {color: your-hex-color-code-here;}
.team-wrapper .team-member .hover .hover-border, .post .tags a {border-color:your-hex-color-code-here;}
.folio-filter li a.selected, .folio-filter li a:hover {
    background:your-hex-color-code-here;
    border-color:your-hex-color-code-here;
}
.portfolio-dark-overlay {background:your-hex-color-code-here;}
.section .button:hover, .section .button.playstop, .contact-form .submit, .section .button.inverse, .post .date {border-color:your-hex-color-code-here;}
#footer .thanks, #testimonials, #our-story{background-color: your-hex-color-code-here; }
.slide-sep, .section .ball, .comment-reply-link, #respond input[type=submit] {background: your-hex-color-code-here;}

Then go to:

\epic-jellythemes\inc\theme.options.php

Find color or go to line 820, you will see the code below:

array(
    'id'=>'color',
    'type' => 'select',
    'title' => __('Theme color scheme', 'jellythemes'),
    'subtitle' => __('Select your themes alternative color scheme.', 'jellythemes'),
    'options' => array('blue'=>'Blue',
                        'black'=>'Black',
                        'green'=>'Green',
                        'red'=>'Red',
                        'yellow'=>'Yellow',
                        'purple'=>'Purple',
                        'turquoise'=>'Turquoise',
                        'orange'=>'Orange',
                ),
    'default' => 'red',
),

Add your new custom color in here, it will similar new code below:

array(
    'id'=>'color',
    'type' => 'select',
    'title' => __('Theme color scheme', 'jellythemes'),
    'subtitle' => __('Select your themes alternative color scheme.', 'jellythemes'),
    'options' => array('blue'=>'Blue',
                        'black'=>'Black',
                        'green'=>'Green',
                        'red'=>'Red',
                        'yellow'=>'Yellow',
                        'purple'=>'Purple',
                        'turquoise'=>'Turquoise',
                        'orange'=>'Orange',
                        'custom-color'=>'Custom Color',
                ),
    'default' => 'red',
),

Now, you can change to new color in theme option, please make sure you save it because it will lose when you update our theme.