Author: ThemeStarz
Web: http://www.themestarz.net

FinWin Documentation

Thank you for purchasing our template! This is the documentation that will help you with customizing and orienting in the template.

Important! This is a static HTML template and not a WordPress theme! It doesn't have any admin/back-end panel and it is created for the developers or people who knows the HTML code. If this is not you have intended to buy, you can ask for a refund.

Getting started

Before you dive into code, you we want you to explain how the template is structured and organized, what support is included, what tools did we have used etc.

Help & Support

All the items you buy are quality checked by Envato. Any future update made available by the author is included with every purchase.

Item support includes:
  • Availability of the author to answer questions
  • Get assistance with reported bugs and issues
  • Help with included 3rd party assets
Item support does not include:
  • Customizations and installations

For more details, view the item support policy

Support is node via email at support@themestarz.net (recommended) or Our Dashboard.

How to find a version of your template

Go to assets/css and open style.css. Here you can find a Version at the very top.

Folder Structure

FinWin

Main (root) folder with index HTML files and assets folder

assets
bootstrap

Includes minified Bootstrap JS and CSS files.

css

Template style.css and other plugins CSS files.

font-awesome

Font Awesome (icons) CSS files and font files.

img

Images that are used in the template.

js

Template custom.js and other JS plugins.

pcss

Source for PostCSS (.pcss) files that we've used to create style.css

php

PHP files used in the template. For example email.php for email sending.

svg

SVG images. Mostly used as backgrounds.

Image Placeholders

All images are replaced by placeholder due to copyright policy. We cannot include them in the package and sell it.

Download Images from Preview

Unzip the package and replace the new img address with the old one in the assets folder

Layout

Template is build with mobile first approach. It is responsive and uses Bootstrap grid system. Base layout includes three sections.

  • Hero
  • Main Content
  • Footer
<html>
<head>
<!--CSS includes-->
</head>
<body>
<div class="ts-page-wrapper">

    <header id="ts-hero"><!--hero--></header>
    <main id="ts-content"><!--main content--></main>
    <footer id="ts-footer"><!--footer--></footer>

</div>
<script>
    //JS plugins includes
</script>
</body>
</html>

Hero

ts-hero section includes main page description, background image (slider) and main navigation. We are using Bootstrap grid system along with flex styling which helps to vertically center the content in the Hero section. Here is the structure:

fixed-top is used to stick the navigation to the top of the page, even when scrolling. More about navbar placements.

align-self-center is one of the flex CSS features which helps with elements positioning. In this case the container element is vertically centered. More about flex.

ts-background this code is used when you have background slider. Ream more about it.

Page Content

ts-content is the wrapper for the main page content - this includes all the content except the hero and footer. ts-content consists of ts-block <section> elements. 






    

        
How It Works

ts-content main page content wrapper.

ts-block this class gives the section top and bottom padding.

ts-title wrapper for the section headings. Can include one or multiple headings h2, h3, h4 etc.

Basic Customization

How To Edit Files

You can use whatever text editor you like, even default Text Editor in the OS. But we recommend to use the one with th syntax highlighting such as:

How To Change Fonts

  1. If you are not satisfied with the default font, you can choose from hundreds ones from the Google Fonts. After you are happy with the selected font, click SEE SPECIMEN. You'll be redirected to to font detail. Then click Select this font. Popup window will show with text "1 Family Selected" - click it. Then you can customize your selection by clicking Customize. When you are done copy the text in standard tab.
    For example
  2. Then open the HTML file where you want to change fonts and find the ... element which loads the Google font in the <head> tag and place your copied code.
  3. Final step is to change the font family in the stle.css file. Open it and find body tag on the beginning of the file and font-family inside. Go back to Google Fonts page where you have chose your font and copy the line placed in the Specify in CSS. In this example it is font-family: 'Source Sans Pro', sans-serif;

How To Change Colors - Simple Way

There are two method how to change the main color. 1st Just by replacing the HEX color value in the style.css (simple) and 2nd by installing node.sj and PostCSS (advanced). Here is the simple way.

Let say, that you want to change the default red color to blue one:

  1. Open the style.css in assets/css/ folder
  2. Find the HEX value of the Default Color. If the default color is red, then HEX value is #ff0000
  3. In your text editor find Replace or Find and Replace function
  4. As original text enter the red color #ff0000 (template default color)
  5. As Replace with enter HEX value of blue color #0000ff

Font Awesome Icons

Font Awesome includes more than 900 icons that can be easily used on your site. For example you want the download link with the PDF icon.

  1. Go to Font Awesome Icons gallery and find the one you need. I our example it is file-pdf. Click the detail, then find and copy .
  2. Place the copied line to your link: Download File
  3. Final result: Download File

Bootstrap Utilities

Template is using Bootstrap utilities very often. We think that it is better solution as writing all styles for every element into CSS file. It makes the style.css smaller and it is more flexible. You can find more about Bootstrap Utilities.

Especially Spacing utilities are often used. Here is the example of heading with default margin and the one with custom margin.

Heading Default Margin

This heading has default 15px margin bottom

<h5>Default Heading</h5>
<p>This heading has default 15px margin bottom</p>
Heading Custom Margin

This heading has 5rem margin bottom and paragraph has 1rem padding left

<h5 class="mb-5">Default Heading</h5>
<p class="pl-3">This heading has default 5rem margin bottom and paragraph has 1rem padding left</p>

Advanced Customization

Compiling CSS with PostCSS

Template is built with PostCSS. A tool for transforming CSS with JavaScript. We have stopped using SASS or LESS, because they are big and slow. In order to use PostCSS, you need to be a little bit familiar with the command line.

Installing and Using PostCSS

This process will guide you how to easily install and use PostCSS with command line.

  1. Install node.js to your computer. Note, that Windows XP is not supported.
  2. After successful installation, open the Node.js command prompt from you installed applications. Alternatively you can just run a command line in your operating system.
  3. Now we need to install the PostCSS. In the opened command line enter npm install -g postcss -g postcss-cli. This will install PostCSS and PostCSS-CLI (command line interface)
  4. The next step is to install required PostCSS plugins. Again, into command line enter this: npm install -g autoprefixer -g postcss-mixins -g postcss-nesting -g postcss-import -g precss -g postcss-hexrgba -g postcss-conditionals -g postcss-for -g postcss-pixels-to-rem -g postcss-hocus -g postcss-sass-color-functions -g postcss-remove-root -g postcss-if-media -g css-mqpacker -g perfectionist . This will install all the plugins we have used.
  5. You can now test, if your PostCSS is running by entering postcss --help into command line
  6. Now you need to navigate into directory with your template. We'll use command line again. For example, your template is in this path: c:/websites/cryptonex. But PostCSS (.pcss) files are placed deeper in the assets/pcss folder. So the full path is c:/websites/cryptonex/assets/pcss. So enter the path to your template \path\to\assets\pcss. In our example enter this to command line: \websites\cryptonex\assets\pcss
  7. The final step is to compile the .pcss files into .css. Enter this into command line: postcss pcss/style.pcss -o css/style.css --watch --no-map

Thanks to --watch flag, the last command allows you to edit .pcss file without reentering the command. It will automatically determine that the file is changed and recompiles it.

PostCSS files structure

PostCSS .pcss files are located in assets/pcss folder. There are couple of another folders:

  • components components that are used in HTML code
  • helpers these files are utilities used in HTML and PostCSS files
  • plugins styling for plugins
  • template-specific styling for components that are unique for the template

JavaScript

JavaScript (JS) files/plugins are located in the assets/js folder and in the HTML file they are called using code. All JS files are located at the bottom of the HTML file. custom.js file is the template's JS file that includes scripts for running other plugins.

Note: You will need to modify only custom.js file. Read more about it in the Plugins section.

Styling the Background

You can easily change the color of the background without editing of the CSS/PCSS files. This can be applied to whole .ts-block section or just to <p> paragraph.

Background Color

To change the background color of the element use data-bg-color attribute.

Example: Change the background color of the section to black. 

<section class="ts-block" data-bg-color="#000">
<h2>This Section is Black</h2>
</section>

As a background color value you can use HEX #000, RGBA rgba(0,0,0,1) or just a string black

Background Image

To change the background image of the element use data-bg-image attribute. You can also add an opacity using data-bg-image-opacity

Example: Background image with the 40% opacity: 

<section class="ts-block ts-separate-bg-element" data-bg-image="assets/img/background-jpg" data-bg-image-opacity=".4">
<h2>This Section Has An Image</h2>
</section>

Important! If you are using data-bg-image on ts-block element, you must give it ts-separate-bg-element. This will create a ts-background element that will wrap a background image. Otherwise, the background image will be placed into element itself.

Parallax Background

Easy background parallax effect is done using data-bg-parallax="scroll" attribute along with data-bg-image or data-bg-particles. Then you need to setup the speed of the parallax effect by adding data-bg-parallax-speed="3". 

<section class="ts-block ts-separate-bg-element" data-bg-image="assets/img/background.jpg" data-bg-parallax="scroll" data-bg-parallax-speed="3">
<h2>This Section Has A Parallax</h2>
</section>

Hero Background

Setting background for ts-hero is also done by data-bg-color, data-bg-image or data-bg-particles attributes and with ts-separate-bg-element class. The difference when you want a background slide is that ts-background element has to be placed manually (how the background is created is is described here).

Example: Background slider with three slides and parallax effect. 

<header id="ts-hero" class="ts-has-overlay">

<nav class="navbar navbar-expand-xl navbar-dark fixed-top ts-separate-bg-element" data-bg-color="#131c2b"></nav>
<div class="container align-self-center"></div>

<div class="ts-background" data-bg-parallax="scroll" data-bg-parallax-speed="3">
<div class="ts-slider ts-parallax-element">
    <div class="owl-carousel" data-owl-autoplay="1" data-owl-loop="1" data-owl-fadeout="1">
        <div class="ts-slide" data-bg-image="assets/img/bg-1.jpg"></div>
        <div class="ts-slide" data-bg-image="assets/img/bg-2.jpg"></div>
        <div class="ts-slide" data-bg-image="assets/img/bg-3.jpg"></div>
    </div>
</div>
</div>

</header>
Used code:
  • ts-has-overlay gives an element dark overlay with 50% opacity. Read more here
  • ts-slider is wrapper for the slider
  • ts-parallax-element tells the script that parallax effect has to be applied on this element
  • owl-carousel slider JS plugin. Read more about Owl Carousel and settings.
  • slide slide with path to image in data-bg-image

Forms

Template uses Bootsrap form structure and brings some small own styles.

Simple Form

Simple form with the one input an submit button.

Form Styling

We'll use the same code from the example above, but now we will add transparent inputs and label will be placed into the input, and after click it moves above it. 

<form class="ts-form ts-inputs__transparent ts-labels-inside-input">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Send a Message</button>
</div>
</form>
  • ts-inputs__transparent input background will be transparent. Only border remains
  • ts-labels-inside-input place the label inside the input

Note: if you use ts-labels-inside-input you have to remove the placeholder

Email Form

FinWin comes with working email forms. You can use them for contact, subscribe or other forms that will collect the user's email address and send it to your receiving one.

Important! Every email form must have ts-form-email class

Note: It is better to test email sending on live server or on localhost with the library such as PHPMailer as it does not work on a local machine.

Setup a path to PHP file

In your <form> element you need to specify a path to the .php file that will handle the email sending using data-php-path attribute.
As a default it is assets/php/email.php. 

<form class="ts-form ts-form-email" data-php-path="assets/php/email.php">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Send a Message</button>
</div>
</form>

Note: You can use different .php file for each form. For example one for contact form and another for subscribe form.

Setup a Receiving Email Address

You have to setup your own email address for email receiving. As a default it is hello@example.com and it is located in the assets/php/email.php.
How to change the address:

Go to assets/php/email.php and find $to = 'hello@example.com'; and change the address to your own.

Plugins

Here is the list of the JS plugins used in the template. Usually they are loaded from assets/js folder.

Important! Every JS plugin loaded from assets/js must be called BEFORE the custom.js 
<script src="assets/js/jquery-3.3.1.min.js"></script>

<!-- Plugins from assets/js -->

<script src="assets/js/custom.js"></script>

<!-- Other inline plugins such as Google Maps -->

Google Maps

Plugin Documentation

Create a Map Element

To use a Google Maps on your site, you need to create a map element with map class and give it a unique ID first: 

<div id="map-element" class="map"></div>

Get a Google Maps API Key

You have to obtain your unique API key for the Google Map, otherwise you can see this error:

Oops Something Went Wrong Error

To get an API key:

Configuring the Map

You can set center of the map, marker and map style. In the very bottom of the HTML file with the map element you can find: 

<script>
var latitude = 34.038405;
var longitude = -117.946944;
var markerImage = "assets/img/map-marker-w.png";
var mapElement = "map-element";
var mapStyle = [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#424b5b"},{"weight":2},{"gamma":"1"}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#545b6b"},{"gamma":"0"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#545b6b"},{"gamma":"1"},{"weight":"10"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#666c7b"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#545b6b"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#424a5b"},{"lightness":"0"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#666c7b"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#2e3546"}]}];
google.maps.event.addDomListener(window, 'load', simpleMap(latitude, longitude, markerImage, mapStyle, mapElement));
</script>
  • var latitude latitude of the map center
  • var longitude longitude of the map center
  • var markerImage path to marker image. You can choose between map-marker.png (black marker) and the map-marker-w.png (white marker).
  • mapElement ID of the map element
  • mapStyle color theme of the map. You can find more on Snazzy Maps

Scrolla

Plugin Documentation

jQuery plugin for reveal animations when scrolling. It's done by using these data-* attributes:

  • data-animate animation name in CSS
  • data-delay delay after which animation has to start
  • data-duration how long does the animation runs
  • data-offset offset from the bottom of the screen

Note: As default, this plugin requires Animate.css for css animation name in data-animate.

Own Animations

We have prepared a few own animations that are more fluid that Animate.css. Below is the example.

Example: Give each column fade in from bottom up animation with 0.1s delay. 



Column 1


Column 2


Column 3

Here is the list of prepared animations:

  • ts-fadeInUp fade in and move up 20px
  • ts-fadeInDown fade in and move down 20px
  • ts-fadeInLeft fade in and move 20px from left
  • ts-fadeInRight fade in and move 20px from right
  • ts-zoomIn zoom (scale) the element from 50% size to regular size
  • ts-zoomInShort zoom (scale) the element from 90% size to regular size

Validation

jQuery Validation Plugin jQuery Validation Bootstrap Tooltip

Form validation is done by jQuery Validation Plugin. If you use required property on the input, the popup tooltip will show.

Utilities

Template is using Bootstrap Utilities along with custom ones. Here is the list of available custom utilities:

Borders

  • ts-border-radius__sm 2px border radius
  • ts-border-radius__md 4px border radius
  • ts-border-radius__lg 8px border radius
  • ts-border-radius__xl 12px border radius
  • ts-border-none removes any border
  • ts-border-bottom 1px light grey border on bottom

Font Color

  • ts-font-color__white white text color
  • ts-font-color__black black text color

Column Count

Split the list of items into columns. You can specify resolution xl, lg md, sm for each ts-column-count.

  • ts-column-count-*-1 1 column
  • ts-column-count-*-2 2 columns
  • ts-column-count-*-3 3 column

Flip

  • ts-flip-x flip the element over the X axis
  • ts-flip-y flip the element over the Y axis

Height

  • ts-height__50px 50px height
  • ts-height__100px 100px height
  • ts-height__150px 150px height
  • ts-height__200px 200px height
  • ts-height__250px 250px height
  • ts-height__300px 300px height
  • ts-height__350px 350px height
  • ts-height__400px 400px height
  • ts-height__450px 450px height
  • ts-height__500px 500px height

List Divided

  • ts-list-divided divide the items in a list with 1px border

Margin

  • ts-mt__0 margin top 0
  • ts-mr__0 margin right 0
  • ts-mb__0 margin bottom 0
  • ts-ml__0 margin left 0

No Gutters

Removes padding from col*. Apply on row class

  • no-gutters removes padding from cols

Overflow

  • ts-overflow__hidden overflow hidden
  • ts-overflow__visible overflow visible

Positon

Combine it with the absolute position.

  • ts-top__0 top 0%
  • ts-top__50 top 50%
  • ts-top__100 top 100%
  • ts-right__0 right 0%
  • ts-right__50 right 50%
  • ts-right__100 right 100%
  • ts-bottom__0 bottom 0%
  • ts-bottom__50 bottom 50%
  • ts-bottom__100 bottom 100%
  • ts-left__0 left 0%
  • ts-left__50 left 50%
  • ts-left__100 left 100%

Opacity

  • ts-opacity__5 .05 opacity
  • ts-opacity__10 .1 opacity
  • ts-opacity__20 .2 opacity
  • ts-opacity__30 .3 opacity
  • ts-opacity__40 .4 opacity
  • ts-opacity__50 .5 opacity
  • ts-opacity__60 .6 opacity
  • ts-opacity__70 .7 opacity
  • ts-opacity__80 .8 opacity
  • ts-opacity__90 .9 opacity

Padding

Although, Bootstrap has p*-0 utility, but sometimes you need to remove just one side of padding and it is not possible with the same Bootstrap's padding utility.

  • ts-pt__0 removes padding top (0px)
  • ts-pr__0 removes padding right(0px)
  • ts-pb__0 removes padding bottom (0px)
  • ts-pl__0 removes padding left (0px)

Shadow

  • ts-shadow__sm small shadow
  • ts-shadow__md medium shadow
  • ts-shadow__lg large shadow
  • ts-shadow__none removes shadow

Width

  • ts-width__10px 10px width
  • ts-width__20px 20px width
  • ts-width__30px 30px width
  • ts-width__40px 40px width
  • ts-width__50px 50px width
  • ts-width__100px 100px width
  • ts-width__200px 200px width
  • ts-width__300px 300px width
  • ts-width__400px 400px width
  • ts-width__500px 500px width

Z-Index

  • ts-z-index__-1 z-index -1
  • ts-z-index__0 z-index 0
  • ts-z-index__1 z-index 1
  • ts-z-index__2 z-index 2
  • ts-z-index__1000 z-index 1000

Other Utilities

  • ts-text-small 14px text
  • ts-xs-text-center center the text on xs (mobile) resolutions
  • ts-has-overlay element gets black overlay with 50% opacity