Sturlly html template

Home / FAQ / Sturlly html template
01. How to change background images in template?

Main demo – index.html, index-agency.html
Hero section background image can be changed under this css class: .header in /css/style.css file.

Testimonials section background image can be changed under this css class: .testimonial in /css/style.css file.

Counter section background image can be changed under this css class: .conter-box in /css/style.css file.

Client logos section background image can be changed under this css class: .client-logos in /css/style.css file.

Footer section background image can be changed under this css class: #footer in /css/style.css file.

For other demo pages, you need to change background images in respective color css file in this folder: /css/colors/

02. How to change icons in template?

We have used Font Awesome icons in this overall template sections. So you just need to change the class in below icon HTML code. You can please check all Font Awesome icons with their class name here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

 <i class="fa fa-phone"></i>
03. How to change Pie Chart counters?

In the below HTML code of Pie Chart, you just need to mention your percentage value (like 35, 50, 80, 90, etc…) in data-percent parameter and same thing in span text also:

 <div class="chart easyPieChart" data-line-width="8" data-percent="70" data-size="200"><span>70%</span></div>
04. How to change timer?

Open up the js/coming-soon.js file and set date and time. Please change “2015/12/15 12:00:00” only.

 /* ------------------------------------------------------------------------ */
 /*	COUNTDOWN
 /* ------------------------------------------------------------------------ */
 $('#counter').countdown('2015/12/15 12:00:00').on('update.countdown', function (event) {
    var $this = $(this).html(event.strftime('' + '<div class="counter-container"><div class="counter-box first"><div class="number">%-D</div><span>Day%!d<span></div>' + '<div class="counter-box"><div class="number">%H</div><span>Hours</span></div>' + '<div class="counter-box"><div class="number">%M</div><span>Minutes</span></div>' + '<div class="counter-box last"><div class="number">%S</div><span>Seconds</span></div></div>'))
});
05. How to disable/remove page loading progress bar?

To remove page loading progress bar simply remove below 2 JS scripts from bottom of the HTML page:

 <script src="js/loader.min.js"></script><br>
 <script src="js/preloader.js"></script>
06. How to make menu links working in google chrome?

After recent Google Chrome browser update suddenly navigation menu items click is not working. If you are facing this issue in your existing website page then please do below change in your menu item HREF in your page HTML code to make it working fine. You just need to add inner-link class in A HREF tag of menu item.

 <a href="#about">About</a>

 Change with below code

 <a href="#about" class="inner-link">About</a>
07. How to make slideshow auto rotate?

Change the interval value to 5000 or less in below code in /js/custom.js file to make it auto sliding.

 $('.carousel').each(function () {
        $(this).carousel({
            //Stop auto sliding 
            //interval: false
            //Auto sliding, define time interval like 5000.
            interval: 5600
        });
        $(this).carousel('pause');
    });
08. How to replicate work portfolio section?

To replicate the portfolio section please follow below steps:

STEP 1: Replicate full section of portfolio (<section id=”grid-gallery” class=”grid-gallery no-padding-top no-padding-bottom”>…</section>) and change id of that section to grid-gallery2

STEP 2: Open this JS file: /js/load-gridgallery.js and add this new line: new CBPGridGallery(document.getElementById(‘grid-gallery2’));

Looking for theme / plugin support?

Looking for theme / plugin customization?