instagram facebook twitter

Liquid HTML Documentationv1.0.0

Financial HTML template that suite for forex & stock broker also invesment company.

Getting started

Thank you for purchasing our template.

We are happy that you are one of our customers and we assure you won't be disappointed. We do our best to produce top notch templates with great functionality, premium designs and readable code.

If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form http://themeforest.net/user/indonez

Has been tested on

Chrome

Supported

Firefox

Supported

Opera

Supported

Safari

Supported

Edge

Supported

Changelog

v1.0.0
  • Initial files for ver 1.0.0

Package contents

Once you download the zip folder, unzip it and make sure you have all the folders including dist, documentation, psd and src folder. The main file of this template is under folder dist, and the structure of file that you get should be like below.

  • css
  • fonts
  • img
  • js
  • *.html
  • apple-touch-icon.png
  • favicon.ico
  • in-sendmail.php
Folder or file
/css Contains the uikit.css & a style.css for styling this template.
/fonts Contains Font Awesome icons web font format.
/img Contains all assets image that used on this template.
/js Contains the functional script that run on this template.
*.html Contains all sample HTML pages.
apple-touch-icon.png iOS Homescreen & bookmark icon.
favicon.ico Icon that appears at the top of a web browser.
in-sendmail.php php file that use for send email.

HTML Structure

This template uses latest UIkit3 with valid HTML5 tags, for detail information about UIkit please take a look at their website - https://getuikit.com/docs/introduction . The basic structure of this template is listed below, all of the content you will make is must under uk-grid class and you can use any width column under that class for wrap the content.

<header>
    <div class="uk-section uk-padding-remove-vertical">
        <nav class="uk-navbar-container uk-navbar-transparent" data-uk-sticky="show-on-up: true; top: 80; animation: uk-animation-fade;">
            <div class="uk-container" data-uk-navbar>
                HEADER CONTENT AREA FOR LOGO AND NAVIGATION
            </div>
        </nav>        
    </div>
</header>

<main>
    <div class="uk-section">
        <div class="uk-container">
            <section class="uk-grid">                
                YOUR CONTENT HERE SHOULD BETWEEN UK-GRID CLASS
            </section>
        </div>
    </div>
</main>

<footer>    
    <div class="uk-section">
        <div class="uk-container">
            <div class="uk-grid">
                FOOTER INFORMATION HERE LIKE LOGO, LINK, AND SOCIAL ICONS LINK
            </div>
        </div>
    </div>
</footer>

Logo

To change the logo, replace the img src=" " and data-src=" " with your logo url.

<!-- logo begin -->
<a class="uk-logo" href="index.html">
    <img src="img/in-lazy.gif" data-src="img/in-logo-1.svg" alt="logo" width="160" height="34" data-uk-img>
</a>
<!-- logo end -->

note data-src=" " used for improves page speed significantly. reference ~ https://getuikit.com/docs/image

Navigation

The basic structure of navigation is like below, and for dropdown just add uk-navbar-dropdown class.

<nav class="uk-navbar-container uk-navbar-transparent uk-visible@m" data-uk-navbar>
    <div class="uk-navbar-right">        
        <ul class="uk-navbar-nav">
            <li>
                <a href="#url">Link parrent 1</a>
            </li>
            <li>
                <a href="#" data-uk-icon="icon: fa-sort-down; ratio: 0.023">Link parent 2</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li><a href="#url">Link child 1</a></li>
                        <li><a href="#url">Link child 2</a></li>
                    </ul>
                </div>
            </li>
        </ul>        
    </div>
</nav>

CSS files & Structure

Mainly two main CSS files are used in this theme. The first one uikit.min.css in "vendors" folder, second one is style.css which for this template. If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

uikit.min.css can be edit using Sass preprocessor method, and the exported of this file is minified for better speed performance. Example of unminified Uikit is should be like this :

/* ========================================================================
Component: Label
========================================================================== */
.uk-label {
    display: inline-block;
    padding: 0 10px;
    background: #1e87f0;
    line-height: 1.5;
    font-size: 0.875rem;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 2px;
    text-transform: uppercase;
}

style.css is easy to custom, at the top of style.css there is a table of content that makes it easy for you to find which element you are changing. Same with UIkit css every custom styling by Indonez is block commented and use special prefix in- before the selector class name.

/* card component */
.in-card-10 .uk-card-default {
    border: 1px solid #e8e8e8;
    background-color: #fff;
}

/* faq component */
.in-faq-5 .uk-accordion-title {
    padding: 15px 0;
}}

SASS file customization

You can customize the sass file in scss folder inside src folder. Each element that you can modified is ready in separated folder for every specific element, and for global variable style you can modified in base-variables.scss in "base" folder and various custom mixins and variables inside "utilities" folder for override styling of UIkit css framework.

We use Gulp to compile Sass file to Css file and recommend to use Visual Studio Code as code editor because it has been equipped with an built in terminal that makes it easy for you to write cli command.

# Install Gulp as global, skip if you already have it 
npm install -g gulp-cli

# Go to directory your template file with terminal and run this 
npm install

# To compile the sass file just run this 
npm run build

Javascript Configuration

This template imports these below Javascript files. All the Javascript files can be found inside the js folder.

<!-- Javascript -->
<script src="js/vendors/uikit.min.js"></script>
<script src="js/vendors/blockit.min.js"></script>
<script src="js/config-theme.js"></script>
  • uikit.min.js - minified version of UIkit css framework
  • blockit.min.js - Library scripts that need in config-theme.js
  • config-theme.js - Configuration scripts for slideshow, active menu, and dynamic breadcrumb

Homepage slide Configuration

If you want edit some configuration for homepage slideshow you can open config-theme.js and there available some component options that you can change.

//----------- 1. Slideshow -----------
theme_slideshow: function() {
    UIkit.slideshow('.in-slideshow', {
        autoplay: true,
        autoplayInterval: 7000,
        pauseOnHover: false,
        animation: 'slide',
        minHeight: 480,
        maxHeight: 700
    });
},
//---------- 2. Counter -----------
theme_counter: function() {
    const counter = new counterUp({
        selector: '.count',
        start: 0,
        duration: 3200,
        intvalues: true,
        interval: 50
    });
    counter.start();
},
//---------- 3. Mobile nav button -----------
theme_mobilenav: function() {
    mobileNav({
        addonButtons: true,
        buttons: [
            {
                name: 'Log in',                                      // button name
                url: '/signin.html',                                 // button url
                type: 'primary',                                     // button type (default, primary, secondary, danger, text)
                icon: 'sign-in-alt'                                  // button icon, you can use all icons from here : https://fontawesome.com/icons?d=gallery&s=solid&m=free
            }
        ]
    });
},
//---------- 4. Modal iframe -----------
theme_video: function() {
    modalIframe({
        videos: [
            {
                id: 'video-1',                                       // video id (should not be the same as the next video)
                url: 'https://www.youtube.com/embed/F3QpgXBtDeo'     // video embed url
            }
        ]
    });
},

note For reference you can go to this link https://getuikit.com/docs/slideshow#component-options

Google map Settings

To change Google map location please follow this step

  • Open Google Maps and search for the address/company you want to show.
  • Once the location has been marked by the search, go into the ‘Share’ option found directly below the locations image.
  • Inside share you will find two tabs, open the ‘embed a map tab’. This display should now show you a copy of what your embedded map will look like on your website.
  • Once your satisfied with your maps size click the ‘copy html’ button and paste it in some text editor. Get the only https link, we don't need iframe here.
  • Replace the current https google map link with the newer that you made.
<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3965.079233417587!2d106.92343342750851!3d-6.383774895483131!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6994a5dd9c1283%3A0x17fe2652752ef425!2sMal%20Ciputra%20Cibubur!5e0!3m2!1sen!2sid!4v1567523654300!5m2!1sen!2sid"
data-caption="Google Maps" data-type="iframe"><span class="uk-label uk-margin-small-left">View on Map</span></a>

note the current google map link located in contact.html

Contact form Settings

Contact form uses php to send email, please open in-sendemail.php file and change the current email "yourmail@here.net" with your email address. 

$array = array("name" => "", "email" => "", "subject" => "", "message" => "", "nameError" => "", "emailError" => "", "subjectError" => "", "messageError" => "", "isSuccess" => false); 
$emailTo = "yourmail@here.net"; // Email to replace by your
$message  = nl2br($_POST['message']);

Sources & Credits

Fonts

CSS framework & Icons

Image assets

Mockup assets