Sandal Business HTML Template - documentation

# Sandal Business HTML - Documentation

## Introduction

This document covers use of this template and often reveals answers to common problems and issues - we encourage you to read this document thoroughly if you need an in-depth guide on how to use the template.

If you have any questions that are beyond the scope of this document, feel free to post them in the dedicated arrowthemes' support forum at: arrowthemes forum

To get access to the arrowthemes' forums, create an account on this page: Create an Account

## Overview

Sandal is is an impressive finance and consultancy business Joomla template designed for professional services. It comes bundled with astounding features like page preloader, pre-built pages, timetable and much more. This template is built on UIkit framework, using the latest HTML5 techniques.

The underlying UIkit framework gives the template an immeasurable weight of flexibility and agility and optimized files without the blot of many popular frameworks. Sandal Business HTML Template is also available for Joomla!

## Template Features

- Built on UIkit Framework
- HTML and PHP versions included
- Fully responsive Layout
- 5 Home Layout options
- Page Preloader
- 9 pre-built preset styles
- 50+ panel positions
- Retina ready
- Parallax effects on any element
- Over 1000 font and svg icons included
- Valid HTML
- 404 Error page included
- Sticky navigation when scrolling
- Mobile friendly mobile menu
- RTL Language Ready
- Flexible columns and template widths
- Compatible with all modern browsers
- SEO friendly
- Bootstrap compatibility file included
- LESS files included
- Light and fast loading
- Well documented
- and so much more

### UIkit Framework

Sandal Business is built on a very robust framework to give you un-matched flexibility and speed when it comes to building the template layer of your site.

Sandal Business is built on UIkit, a lightweight and modular front-end modular framework for developing fast and powerful web interfaces using the latest web technologies.

### 9 Prebuilt Styles

Sandal Business comes with 9 pre-built styles to help you get a glance at the possibilities that you can have. From light to dark styles, each color has been crafted to match each component used in the template.

### LESS files included

We've included the LESS files to enable you integrate the template into any project that uses LESS. You can learn more about the LESS preprocess

## Getting Started

When you purchase Gaucho HTML template, you'll be redirected to the Downloads page on Themeforest to download the package. Click on the 'Download' button. Unzip it using your preferred unzip tool. You’ll find the following files/folders:

- `sandal-html.zip` - the HTML template files
- `sandal-php.zip` - the PHP template files
- `documentation` folder - the template’s documentation

IMPORTANT
In order to view the php files, you need to upload the files on a php-enabled server. You could also set up a local environment using MAMP/WAMP/XAMPP or any tool that allows you to run PHP.

## Folder Structure

Gaucho comprises of LESS, CSS and Javascript that power the robust underlying UIKit framework. In this section, we are going to cover the css, LESS and js files to help you understand the template’s structure.

### css Folder

This folder contains css files which render the front-end look and feel of the site. It contains four files:

File | Description
--- | ---
`bootstrap.css` | this file contains the css for bootstrap compatibility. Add this file if you need to integrate the template with bootstrap
`bootstrap-rtl.css` | this file contains the rtl css for bootstrap compatibility. Add this file if you need to integrate the template with bootstrap
`custom.css` | use this file to add your own custom.css.
`ie9.css` | this file fixes issues related with Internet Explorer 9 browser.
`theme.css` | this file contains the css for the template.
`theme-{style}.css` | this file contains the css for a specific color style. To use the styles, just replace the `theme.css` with the desired `theme-{style}.css`
`theme-rtl.css` | this file contains the css for the rtl version of the template.

IMPORTANT
When doing your customization, it's recommended NOT to edit `theme.css` directly. Place all the custom css in `css/custom.css`

### fonts Folder

This folder contains icon fonts files.

### images Folder

This folder contains the image files that have been used in the template.

### js Folder

This folder contains the javascript files used in the template.

### json Folder

This folder contains the json files used in to load the calendar events.

### Less Folder

This folder contains the less files which in turn, generate the css output files that are located in the css folder. The less files are:

File/folder | Description
--- | ---
`icons` folder | This folder contains the custom font icons LESS code
`styles` folder | this folder contains the color styles LESS code
`uikit` folder | This folder contains the uikit LESS code
`theme.less` | is the key file that combines uikit less files (located in the uikit sub folder)
`custom-theme.less` | you can use this file to add your own less code
`style.less` | this file defines the unique less code for the default style

### Licensing Folder

This folder contains the licence files which govern the use of this template. The php

### php Folder

This folder contains the php files for performing form functions and loading events to the calendar. The following files are note-worthy:

File | Description
--- | ---
`booking.php` | configures the reservation form
`contact.php` | configures the contact form
`newsletter.php` | configures the newsletter form

### Vendor Folder

This folder contains the UIKit framework files and full calendar files.

## Module Positions

This template comes with a sophisticated layout system to create any kind of sidebar or widget layout. You can easily manage the sidebar's positions and widths as you like.

Widgets can have different styles and be placed in any position offered by this template. Each position has its own layout. You can align widgets side-by-side, stack them or choose your own grid layout. Show or hide widgets on mobile devices, while the grid adapts perfectly to your layout.

## Elements

To learn how to use shortcodes extensively, see the respective pages below:

- Typography
- Column Blocks
- Buttons
- Dropdowns
- Alerts & Badges
- Panels
- Accordion & Toggles
- Tooltips
- Progress Bar
- Tabs
- Tables
- Images
- Modal Box
- Lightbox
- Slideshow
- Dynamic Grid
- Animation
- Counter
- Slider
- Parallax
- Icons
- Cards
- Audio/Video
- Timeline

## Customization

### How to add your logo

This template provides two logo positions: `logo` - shown as a colored bottom section of the slideshow (hidden on smaller devices) and `logo-small` - shown at the top left - right next to the menu (which also is visible on mobile devices)

To add your own logo, search for the following line in all files and replace `logo.svg` with your own file

    <img src="images/demo/default/logo/logo-bottom.svg" width="300" height="120" alt="demo">

To add your own small logo, search for the following line in all files and replace `logo-small.svg` with your own file

    <img src="images/demo/default/logo/logo-small.svg" width="170" height="65" alt="demo">

For best results, ensure your logos match the indicated width and height.

### How to setup the newsletter

The newsletter form (located in bottom-a position of the home page) captures two fields (name and email address) which it sends to a designate email address. To specify the receiving email address, open `php/newsletter.php` and search for `mail@example.com` and replace it with your own email address.

### How to setup the reservation form

The reservations form (located in bottom-d position of the home page) captures the name, number of guests, date, time and phone number which are then sent to a designate email address. To specify the receiving email address, open `php/booking.php` and search for `mail@example.com` and replace it with your own email address.

### How to setup the Contact form

The contact form (located in Contact Us page ) captures the name, email, subject and message which are then sent to a designate email address. To specify the receiving email address, open `php/contact.php` and search for `mail@example.com` and replace it with your own email address.

### How to add events to the Calendar

The calendar events are stored in `json/events.json` file. To add events, edit the file by opening it with any text editor e.g. Sublime text. The format of the file looks like follows:

    [
      {
        "title": "Jazz concert",
        "start": "2016-01-01"
      },
      {
        "title": "Food festival",
        "start": "2016-01-07",
        "end": "2016-01-10"
      }
    ]

To add an event, add the following code right at the top and just after the opening "["

    {
      "title": "My event",
      "start": "2016-02-07",
      "end": "2016-02-10"
    },

Note

The calendar uses Fullcalendar component to display the events. Please see the full documentation for more information.

### How to change the Google map location

Go to map embed and set the Name, Street, Zip code and city of your location. Set any other additional settings then click on 'Generate Code'. Copy the code and replace it with the map code in the contact-us page.

To create a custom grayed map, search for "zoom" in the code you've paste and paste this code right before the word "zoom":

    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}],

## Credits

This template uses the following images, javascript libraries, icons, plugins, modules, components, or other files as listed below. All the content relating to products, services and events are fictional and are designed to showcase a live site. All images, icons, and photos are copyrighted to their respective owners. All images used in the live demo have been replaced with placeholder images.

- UIkit by YOOtheme
- Fullcalendar by Adam Shaw
- Stock images from billionphotos and picJumbo