# Documentation

### Payyed - Money Transfer & Online Payments HTML Template

Thank you for purchasing Payyed - Money Transfer and Online Payments HTML Template on ThemeForest.
If you have any questions that are beyond the scope of this help file, please feel free to email via Item Support Page.

- Version: 1.1
- Created by: HarNish Design

For Future Updates Follow Me @Themeforest / @Facebook / @Twitter

### Installation

1. Follow the steps below to setup your site template:
2. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
3. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
   - `HTML/css` - Stylesheet files
   - `HTML/images` - Image files
   - `HTML/js` - Javacript files
   - `HTML/vendor` – All external libs. We keep all of them in this folder to make updates easily.
4. You should upload all or specific HTML files as per your need.
5. You're now good to go..!

### HTML Structure

Payyed follows a simple coding structure. here is the sample:
The template is based on Bootstrap 4 Framework - http://getbootstrap.com

If you need more information, please visit bootstrap site: http://getbootstrap.com/css/#grid

### Changing Fonts

Payyed use fonts: Rubik from the Google Fonts Library. You can change the fonts from page head in HTML files(as following code). If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts.

then change fonts name in `stylesheet.css` file. You have generated & use `css/stylesheet.css`

### Icons

Payyed use Font Awesome is a @font-face iconset.
If you need more information, please visit this site: https://fontawesome.com

        ......

### Sass

We have added SASS `.scss` files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - `HTML/sass`

Open the `sass/_variables.scss` and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required `.scss` Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your `stylesheet.scss` File.

### Header

You can choose between 4 Types style of headers while creating your Pages. The list of various header types & its descriptions are provided below for your reference:

#### 1. Light Header (Default)

Header with white background Color & Dark text.

          .......

#### 2. Dark Header

Header with dark background & Light text.

Add the `.bg-dark-2` and `.header-text-light` Class to the `header` Tag to display a Dark Header.

          .......

#### 3. Primary Header

Header with Primary background color & light text.

Add the `.bg-primary` and `.header-text-light` Class to the `header` Tag to display a Primary Header.

          .......

#### 4. Transparent Header

Header with no background color & light text.

Add the `.bg-transparent` and `.header-text-light` Class to the `header` Tag to display a Transparent Header.

          .......

### Logo Settings

The Logo Container can be found in the Header Container - `#header`

### Menu

#### Simple Dropdown Menu

You can use an additional sub menu on any page for sub navigation purpose.

#### Mega Menu

You can use the Mega Menus using the Bootstrap Columns. Try using the Following code:

### Menu DropDown

You can choose between 3 Types style color of dropdown menu while creating your Pages. The list of various dropdown menu types & its descriptions are provided below for your reference:

#### 1. Light Dropdown Menu (Default)

Dropdown Menu with white background Color & Dark text.

#### 2. Dark Dropdown Menu

Dropdown Menu with dark background & Light text.

Add the `.navbar-dropdown-dark` Class to the `nav` Tag to display a Dark Dropdown Menu.

#### 3. Primary Dropdown Menu

Dropdown Menu with Primary background color & light text.

Add the `.navbar-dropdown-primary` Class to the `nav` Tag to display a Dark Dropdown Menu.

### Secondary Navigation

You can add Secondary Menu any Page using the Code below. See below image and code for more information:

#### Alternate Style

You will need to add `.alternate` class for that.

### Page Header

You can choose between 7 Types of page header while creating your Pages. The list of various page header types & its descriptions are provided below for your reference:

#### 1. Left alignment Page Header

It includes page title with alligned left and breadcrumb in right part. See below image and code for more inforamtion.

#

                Page Header Left Alignment

#### 2. Center alignment Page Header

It includes page title and breadcrumb alligned center. See below image and code for more inforamtion.

#

                Page Header Center Alignment

#### 3. Light Page Header

Page Header with Light background color & Dark text.

#

                Page Header Light
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#### 4. Dark Page Header

Page Header with Dark background color & light text.

#

                Page Header Dark
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#### 5. Primary Page Header

Page Header with Primary background color & light text.

#

                Page Header Primary

#### 6. Custom Background Page Header

It includes page title, sub title and breadcrumb alligned center with background image. See below image and code for more inforamtion.

#

                Page Header
    			with Custom Background

#### 6. Custom Background Page Header with Transparent Header

Custom Background page header with Transparent Header. See below image and code for Custom Background page header inforamtion.
and See here for Transparent Header

#

                Page Header Custom Background
    			with Transparent Header

### Footer

You can choose between 2 Types with Dark & Light and Primary color version of footer while creating your Pages. The list of various footer types & its descriptions are provided below for your reference:

#### 1. Light Footer (Default)

Footer with white background Color & Dark text. See below image and code for more inforamtion.

#### 2. Dark Footer

Footer with dark background color & Light text. See below image and code for more inforamtion.

Add the `.bg-dark` and `.footer-text-light` Class to the `footer` Tag to display a Dark footer.

#### 3. Primary Footer

Footer with Primary background color & Light text.

Add the `.bg-primary` and `.footer-text-light` Class to the `footer` Tag to display a Primary footer.

### Customization

- Theme Customization
- Layout Style
- Owl Carousel (Slider and Carousel)
- Play Video in Modal (YouTube or Vimeo)
- Accordion and Toggle
- Tabs
- Team
- Social Icon
- Helper Classes

#### Theme Customization - Back

We have include a Custom CSS File in the `css` Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the `css/custom.css` File and link it in the Document `<head>` after the `css/stylesheet.css` Linking. Also make sure that this is the Last Linked CSS File in the Document `<head>` so that your Custom CSS Styles are Overwritten properly.

#### Layout Style (Wide/Boxed) - Back

The template has two different layout modes, Wide and Boxed. if you want to use the Boxed version, Add the `.boxed` class in main-wrapper div:

    	.....

#### Owl Carousel - Back

##### Carousel:

You can add an Owl Carousel on any Page using the Code below:

##### Slider:

You can add Slider for Slideshow images on any Page using the Code below:

      ....Image.....
      ....Image.....

Settings:

- `data-items` - No. of Items to display in the Carousel. Eg. 1
- `data-items-lg` - No. of Items to display in the Carousel on Desktops/Laptops. Eg. 5
- `data-items-md` - No. of Items to display in the Carousel on Netbooks. Eg. 5
- `data-items-sm` - No. of Items to display in the Carousel on iPads/Tablets. Eg. 4
- `data-items-xs` - No. of Items to display in the Carousel on Mobile. Eg. 3
- `data-loop` - Enable/Disable Loop. Eg. true/false
- `data-autoplay` - Enable/Disable autoplay. Eg. true/false
- `data-autoplaytimeout` - Autoplay timer in milliseconds. Eg. 5000
- `data-autoplayhoverpause` - Enable/Disable autoplayHoverPause Eg. true/false
- `data-speed` - Speed of the Carousel Animation in millisconds. Eg. 700
- `data-nav` - Enable/Disable Navigation Arrows. Eg. true/false
- `data-dots` - Enable/Disable Pagination Dots. Eg. true/false
- `data-margin` - Margin between Carousel Items in pixels. Eg. 15
- `data-stagepadding` Padding on the Edges of the Carousel Container in pixels. - Eg. 20
- `data-slideby` - No. of Items to Slide at once. Eg. 2
- `data-lazyload` - Enable/Disable Lazyload. Eg. true/false
- `data-autoheight` - Enable/Disable autoHeight. Eg. true/false
- `data-autowidth` - Enable/Disable autoWidth. Eg. true/false
- `data-animateOut` - Enable/Disable animateOut. Eg. true/false
- `data-animateIn` - Enable/Disable animateIn. Eg. true/false
- `data-video` - Enable/Disable Video Carousel Items. Eg. true/false

Javascript (file path - /js/theme.js)

    /*---------------------------------------------------
       Carousel (Owl Carousel)
    ----------------------------------------------------- */

    $(".owl-carousel").each(function (index) {
        var a = $(this);
    	$(this).owlCarousel({
    		autoplay: a.data('autoplay'),
    		autoplayTimeout: a.data('autoplaytimeout'),
    		autoplayHoverPause: a.data('autoplayhoverpause'),
    		loop: a.data('loop'),
    		speed: a.data('speed'),
    		nav: a.data('nav'),
    		dots: a.data('dots'),
    		autoHeight: a.data('autoheight'),
    		autoWidth: a.data('autowidth'),
    		margin: a.data('margin'),
    		stagePadding: a.data('stagepadding'),
    		slideBy: a.data('slideby'),
    		lazyLoad: a.data('lazyload'),
    		navText:['', ''],
    		animateOut: a.data('animateOut'),
    		animateIn: a.data('animateIn'),
    		video: a.data('video'),
    		items: a.data('items'),
    		responsive:{
            0:{items: a.data('items-xs'),},
            576:{items: a.data('items-sm'),},
    		768:{items: a.data('items-md'),},
            992:{items: a.data('items-lg'),}
        }
        });
    });

You can find more Owl Carousel related Settings for Custom JS Initialization here - Owl Carousel Documentation.

#### Play Video in Modal (YouTube or Vimeo) - Back

Play YouTube or Vimeo Videos in Bootstrap 4 Modal

    See How it Works

#### Accordion and Toggle - Back

##### Accordion:

You can add a Accordion using the Code below:

#####

#####

#####

                       Accordion Title

                      This is Accordion Content

                       Accordion Title

                      This is Accordion Content

                       Accordion Title

                      This is Accordion Content

Styles:

You can use Alternate Style for the Accordions. You will need to add `.accordion-alternate` class for that.
also, You will need to add `.arrow-right` css class for set arrow in right side.
We have added it examples and shown in `elements.html` page.

##### Toggle:

You can add a Toggle using the Code below:

#####

#####

#####

                       Toggle Title

                      This is Toggle Content

                       Toggle Title

                      This is Toggle Content

                       Toggle Title

                      This is Toggle Content

Styles:

You can use Alternate Style for the Accordions. You will need to add `.accordion-alternate` class for that.
also, You will need to add `.arrow-right` css class for set arrow in right side.
We have added it examples and shown in `elements.html` page.

#### Tabs - Back

You can add a Tabs using the Code below:

        This is Tab Content 1

        This is Tab Content 2

Styles:

You can use Alternate Pills Style for the Tab. You will need to add `.nav-pills` class for that.
We have added it examples and shown in `elements.html` page.

##### Vertical Tab

You can add a Vertical Tabs using the Code below:

            This is Tab Content 1

            This is Tab Content 2

            This is Tab Content 3

#### Team - Back

Team members view with name, image and social links. See below code for more information.

###

###

###

###

                  Neil Patel
                  CEO & Founder

                  James Maxwell
                  Co-Founder

                  Ruby Clinton
                  Chief Marketing Officer

                  Miky Sheth
                  General Manager

For demo, You can please check this in `about-us.html` page.

#### Social Icon - Back

Social links with different styles. See below code for more information.

For Other demo, You can please check this in `elements.html` page.

#### Helper Classes - Back

We have created some really useful helper classes for you. Here are a few of them:

Text Size:

- `.text-0` - Changes the Font size to 11px.
- `.text-1` - Changes the Font size to 12px.
- `.text-2` - Changes the Font size to 14px.
- `.text-3` - Changes the Font size to 16px.
- `.text-4` - Changes the Font size to 18px.
- `.text-5` - Changes the Font size to 21px.
- `.text-6` - Changes the Font size to 24px.
- `.text-7` - Changes the Font size to 28px.
- `.text-8` - Changes the Font size to 32px.
- `.text-9` - Changes the Font size to 36px.
- `.text-10` - Changes the Font size to 40px.
- `.text-11` - Changes the Font size to 44px.
- `.text-12` - Changes the Font size to 48px.
- `.text-13` - Changes the Font size to 52px.
- `.text-14` - Changes the Font size to 56px.
- `.text-15` - Changes the Font size to 60px.
- `.text-16` - Changes the Font size to 64px.
- `.text-17` - Changes the Font size to 72px.
- `.text-18` - Changes the Font size to 80px.
- `.text-19` - Changes the Font size to 84px.
- `.text-20` - Changes the Font size to 92px.

Font Weight:

- `.font-weight-100` - For font weight of 100.
- `.font-weight-200` - For font weight of 200.
- `.font-weight-300` - For font weight of 300.
- `.font-weight-400` - For font weight of 400.
- `.font-weight-500` - For font weight of 500.
- `.font-weight-600` - For font weight of 600.
- `.font-weight-700` - For font weight of 700.
- `.font-weight-800` - For font weight of 800.
- `.font-weight-900` - For font weight of 900.

Background Color:

- `.bg-transparent` - For background color of transparent
- `.bg-light` - For background color of white
- `.bg-light-1` - For background color of light gray
- `.bg-light-2` - For background color of more light gray
- `.bg-light-3` - For background color of more light gray
- `.bg-light-4` - For background color of more light gray
- `.bg-light-5` - For background color of more light gray
- `.bg-dark` - For background color of dark
- `.bg-dark-1` - For background color of dark gray
- `.bg-dark-2` - For background color of more dark gray
- `.bg-dark-3` - For background color of more dark gray
- `.bg-dark-4` - For background color of more dark gray
- `.bg-dark-5` - For background color of more dark gray

Box Shadow

- `.shadow-none` - For No shadow to elements with box-shadow utilities.
- `.shadow-sm` - For Small shadow to elements with box-shadow utilities.
- `.shadow` - For Regular shadow to elements with box-shadow utilities.
- `.shadow-md` - For medium light shadows to elements with box-shadow utilities.
- `.shadow-lg` - For Larger shadows to elements with box-shadow utilities.

Opacity

- `.opacity-1` - For 10% opacity.
- `.opacity-2` - For 20% opacity.
- `.opacity-3` - For 30% opacity.
- `.opacity-4` - For 40% opacity.
- `.opacity-5` - For 50% opacity.
- `.opacity-6` - For 60% opacity.
- `.opacity-7` - For 70% opacity.
- `.opacity-8` - For 80% opacity.
- `.opacity-9` - For 90% opacity.

Border Radius

- `.rounded-top-0` - No Border Radius for top.
- `.rounded-bottom-0` - No Border Radius for bottom.
- `.rounded-left-0` - No Border Radius for left.
- `.rounded-right-0` - No Border Radius for right.

Borders, Sizing, Spacing (margin & padding) and also much more....

- You can refer for use other default bootstrap helper classes here - https://getbootstrap.com/docs/4.3/utilities/

### Source & Credits

- Fonts:
  - Google Fonts - http://www.google.com/webfonts
  - Icons Font-face - https://fontawesome.com/
- Scripts:
  - jQuery - http://www.jquery.com/
  - Bootstrap 4 - http://getbootstrap.com/
  - Bootstrap Spinner - https://github.com/indigojs/bootstrap-spinner
  - DateRangePicker - http://www.daterangepicker.com/
  - Bootstrap Select - https://developer.snapappointments.com/bootstrap-select/
  - Currency Flags - https://github.com/transferwise/currency-flags
  - Owl Carousel - https://owlcarousel2.github.io/OwlCarousel2/
  - Easy Responsive Tab/Accordion - https://www.jqueryscript.net/accordion/Easy-Responsive-Tab-Accordion-Control-Plugin-For-jQuery.html

### Changelog

The best way is to use a compare tool for update template, like this one: http://kdiff3.sourceforge.net/ – and use it to compare the folders (your current website and the new version). Updating HTML templates requires manual work.

#### Initial Release v1.1

- Added: Landing page - Send
- Added: Landing page - Receive
- Added: Send Money Confirm page
- Added: Send Money Success page
- Added: Request Money Confirm page
- Added: Request Money Success page
- Added: Deposit Money page
- Added: Deposit Money Confirm page
- Added: Deposit Money Success page
- Added: Withdraw Money page
- Added: Withdraw Money Confirm page
- Added: Withdraw Money Success page
- Added: Login-3 Page
- Added: SignUp-3 Page
- Added: Contact Us page
- Added: Footer Alternate Version
- Added: Footer Dark Color Version
- Added: Footer Primary Color Version
- Other some improvement.

#### Initial Release v1.0

Released

### Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page. Our response time is within 24 to 48h.

Important: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

For Future Updates Follow Me @themeforest or @facebook or @twitter

Don’t forget to rate it
Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest profile > Downloads Tab > & then You can Rate & Review for our template.

Thank you