1. Start
  2. Installation
  3. HTML Structure
  4. Changing Fonts
  5. Icons
  6. Sass
  7. Header
  8. Logo Settings
  9. Menu
  10. Menu DropDown
  11. Menu Secondary
  12. Page Header
  13. Footer
  14. Customization
  15. Source & Credits
  16. Changelog
  17. Support

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.

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.

Logo Settings

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

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

Customization

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:


  
partner 1

  
partner 2

  
partner 3

  
partner 4

  
partner 5

  
partner 6

  
partner 7

  
partner 11
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:


              

                
                

                  
This is Accordion Content

                

              

              

                
                

                  
This is Accordion Content

                

              

              

                
                

                  
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:


              

                
                

                  
This is Toggle Content

                

              

              

                
                

                  
This is Toggle Content

                

              

              

                
                

                  
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....

Source & Credits

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

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