Vayvo - Template Documentation

By Progression Studios

Thank you for purchasing this site template. If you have questions that are beyond the scope of this help file, visit our support forum.

Vayvo uses the HTML Framework Boostrap. Bootstrap is an open source toolkit for developing with responsive HTML, CSS, and JS websites.

The full boostrap documentation and be found online here: https://getbootstrap.com/docs/4.0/getting-started/introduction/

CSS Structure

All of the CSS files are located in the head of the document. The main CSS feils are as follows:

bootstrap.min.css - This is the default stylesheet for the HTML Framework Bootstrap. It is advised to not edit this file.
style.css - This is the main stylesheet for your theme. This is the most likely location for your custom styles.
//fonts.googleapis.com - The google fonts stylesheet imports custom fonts. You can find more font options here: https://fonts.google.com
fontawesome-all.min.css - These are an icon pack called FontAwesome. You will find out more about these icons furhter in the documentation.
dashicons-min.css - These are and icon pack called DashIcons which displays the stars used in the Star Ratings

Tablet/Mobile Styling

The responsive styling for the site template is located in the style.css file. You will find all of these styles under the last section of the document "24. RESPONSIVE STYLES". The mobile navigation will be covered in the "Navigation" section of the documentation further down.

Color Customizing

We have placed all the blue highlight colors in one section of your style.css file. This makes it extremely easy for you to customize the main colors of the theme. You will find the main green color "#22b2ee" uner the section "03. HIGHLIGHT COLORS" of your style.css file. Example:

/*
=============================================== 03. HIGHLIGHT COLORS ===============================================
*/
	
ul#friends-activity-profiles li.friends-activity-profiles-more a,
a.edit-profile-sidebar,
ul.dashboard-sub-menu li.current a:after,
body .asRange .asRange-pointer:before,
body .asRange .asRange-selected,
.checkbox-pro-container .checkmark-pro:after,
span.user-notification-count,
ul#registration-steps-pro li.current-menu-item .registration-step-circle-icon {
	background:#22b2ee;
}

JavaScript Structure

All of the JavaScript files are loaded in the footer or your site. All JavaScript plugins have been added seperately. This allows you to easily add/remove javascript plugins in order to optimize your site speed. Here is an overview of all the javascript files:

jquery-3.5.1.min.js - The jQuery javascript library is a javascript library required on every page. It offers the base framework for most javascript through the site.
popper.min.js and boostrap.min.js - Both of these are required for the Bootstrap HTML Framework. These add-in default functionality for bootstrap.
navigation.js - This file holds the javascript for the Navigation Dropdowns and Mobile Navigation
jquery.flexslider.min-js - This javascript file adds the ability for the various sliders on the site.
jquery-asRange.min.js - This adds a javascript library for the range slider in the advanced dashboard search section.
owl.carousel.min.js - This file adds the carousel abiltiies for the left/right carousels
afterglow.min.js - This file adds the video player abilities.
bideo.js - This file is used to generate the full video background shown on the landing page.
video-background.js - This file is where you choose which video shows up for the full screen video background.
scripts.js - This file will likely be the most customized. It contains all the javascript options for the various plugins. It also includes the show/hide javascript for the header areas.

The HTML Framework Boostrap already has a grid system built-in. This allows you to easily add rows & columns. In addition you have the ability to control the columns on multiple device sizes.

You can find the full bootstrap grid documentation online here: https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

Here is an example three column layout:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

The header and sidebar navigations are controlled by the same navigation plugin. They both have similar options that include the ability to have drop-down menus. The Javascript for the navigation can be found under the "js/navigation.js" file. The activation for the javascript is located in the scripts.js file.

The styles for the navigation menu are located in the style.css file. The landing page navigation styles are located in the "06. NAVIGATION STYLES" section. The dashboard sidebar navigation styles are located under the section "08. DASHBOARD NAVIGATION STYLES"

Here is an example of the default navigation with a drop-down menu. The important classes to keep in mind are "normal-item-pro" for any navigation items. Then the class "current-menu-item" if you want the navigation item to appear selected.

<nav id="site-navigation-pro">
	<ul class="sf-menu">
		<li class="normal-item-pro current-menu-item">
			<a href="index.html">Home</a>
		</li>
		<li class="normal-item-pro">
			<a href="dashboard-home.html">New Releases</a>
				<ul class="sub-menu">
					<li class="normal-item-pro">
						<a href="#!">Sub-menu item 1</a>
					</li>
					<li class="normal-item-pro">
						<a href="#!">Sub-menu item 2</a>
					</li>
					<li class="normal-item-pro">
						<a href="#!">Sub-menu item 3</a>
					</li>
				</ul> 
		</li>
	</ul>
</nav>

Sticky Navigation

We have an option sticky navigation built-in to the site template. To turn the landing page header sticky, add hte class "sticky-header" to the Header tag like so:

<header id="masthead-pro" class="sticky-header">

Tablet/Mobile Navigation

The Tablet/Mobile Navigation will appear when the browser size is below 959px. This is controlled via css in the last section of the style.css file. The man navigation is hidden and the mobile navigation is displayed:

	/* Mobile Navigation */
	#video-search-header {
		visibility: hidden; 
		opacity: 0;
	}
	#header-btn-right,
	#progression-studios-header-search-icon,
	#site-navigation-pro, 
	#masthead-pro .btn-header-pro {
		display:none;
	}
	
	#masthead-pro .btn-header-pro.btn-mobile-pro,
	#mobile-bars-icon-pro {
		display:block;
	}

Mobile Navigation HTML

The HTML for the mobile navigation is seperate from the main navigation. This is located in the "mobile-navigation-pro" nav section. This allows you to have a custom navigation on tablet/mobile.

An example of this can be found here:

<nav id="mobile-navigation-pro">
	<ul id="mobile-menu-pro">
		<li>
			<a href="index.html">Home</a>
		</li>
		<li>
			<a href="dashboard-home.html">New Releases</a>
				<ul>
					<li class="normal-item-pro">
						<a href="#!">Sub-menu item 1</a>
					</li>
					<li class="normal-item-pro">
						<a href="#!">Sub-menu item 2</a>
					</li>
					<li class="normal-item-pro">
						<a href="#!">Sub-menu item 3</a>
					</li>
				</ul>
		</li>
	</ul>
</nav>

The various hero sliders located in the site template are powered by the javascript plugin "Flexslider." You can find a list of all the options for the slider here: https://github.com/woocommerce/FlexSlider

The JavaScript for the sliders is located under /js/scripts.js

An example from scripts.js file:

$('.progression-studios-slider').flexslider({
	slideshow: true,  		/* Autoplay True/False */
	slideshowSpeed: 8000,	/* Autoplay Speed */
	animation: "fade",		/* Slideshow Transition Animation */
	animationSpeed: 800, 	/* Slide Transition Speed */
	directionNav: true,		/* Left/Right Navigation True/False */
	controlNav: true,		/* Bullet Navigaion True/False */
	prevText: "",
	nextText: "",
});

Slider Styles

The styling for the sliders can be found in the style.css file in the section "20. HOMEPAGE SLIDER".

Slider Height

The slider height is controlled in a number of ways. Here is an example from the site template that is 80% of your browser height (vh). You can adjust this to any other vh OR to a pixel number like 700px. Also, you will find the tablet and mobile heights under the responsive css section at the bottom of the style.css file

Slider Reflection Base

The slide reflection is added via a class "progression-studios-skrn-slider-upside-down" along with a second link to the slide image.

<div class="progression-studios-skrn-slider-upside-down" style="background-image:url(images/slide.jpg);"></div>

.flexslider.progression-studios-slider,
.progression-studios-slider-image-background {
	height:80vh;
}

Slider Responsive Styles

We have adjustsments for font sizes and spacing on tablet and mobile. These are located in the style.css file in the section "29. RESPONSIVE STYLES"

We have a number of buttons built-in to the theme. You can add a simple button using the .btn class. You can also adjust the size via the class "btn-lg" and "btn-sm".

Example Button:

<a class="btn" href="#!">Choose Plan</a>

The Carousel located in the site template are powered by the javascript plugin "Owl Carousel." You can find a list of all the options for the owl carousel here: https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

The javascript rqeuired to run the carousel is:

<script src="js/owl.carousel.min.js" defer></script>

The JavaScript for controlling carousel is located under /js/scripts.js

An example from scripts.js file:

	$('#progression-video-carousel').owlCarousel({
	    margin:4,
	    items:3,
		autoplay:false,
		autoplayTimeout:5000,
		nav: true,
		slideBy:1,
	    loop:true,//match with rewind
		rewind: true,
		dots: false,
		autoplayHoverPause:true,
		responsive : {
		    // breakpoint from 0 up
		    0 : {
		        items:1,
		    },
		    // breakpoint from 768 up
		    768 : {
		        items:2,
		    },
		    // breakpoint from 1025 up
		    1025 : {
		        items:3,
		    }
		}
	});

Each slide of the carousel needs to be withint a div with a class of item

<sdiv class="item">Display Slide Content here!<s/div>

This site template uses two font icon packs. This allows you to place icons on your site along with the ability to adjust the size and color.

FontAwesome

The social media icons and various bullets/arrows are added via the free FontAwesome font pack. You can find a list of icons on this page: https://fontawesome.com/icons. You can use any "free" icon throughout your site. Here is an example of how easy it is to display an icon:

DashIcons

The star rating icons are added via the free DashIcons font pack. You can find a list of icons on this page: https://github.com/WordPress/dashicons.

Vayvo has video support built-in to the theme. You can see examples of this on the dashboard-home.html and dashboard-movie-profile.html pages. The video player we are using is an open source video player: http://afterglowplayer.com

This player supports locally hosted videos, Youtube, & Vimeo. Full documentation for this video player can be found online: http://docs.afterglowplayer.com

You can open the video player in a lightbox by using the class "afterglow" on a link. Then link to the video player with the matching id. Example:

<a class="btn btn-slider-pro afterglow" href="#VideoLightbox-1"><i class="fas fa-play"></i></a>
	
<video id="VideoLightbox-1" poster="images/videos/poster.jpg" width="960" height="540">
	<source src="/images/videos/sample.mp4" type="video/mp4">
</video>

If you would like to place a video on a page without a lightbox, you can use the class "afterglow" on the video element like so:

<video class="afterglow" poster="images/videos/poster.jpg" width="960" height="540">
	<source src="/images/videos/sample.mp4" type="video/mp4">
</video>

<script src="js/afterglow.min.js" defer></script><!-- Video Player JS Plugin -->

The video background on the landing pae is powered by the plugin "Bideo" You can find a more information on this plugin here: https://rishabhp.github.io/bideo.js/

The javascript rqeuired to run the video background is:

	<script src="js/bideo.js" defer></script>

The JavaScript for controlling video is located under /js/video-background.js

You can control the video file in this file:

	    src: [
	      {
	        src: 'images/videos/landing-video.mp4',
	        type: 'video/mp4'
	      }
	    ],

The required HTMl for the video background output is:

<video id="background_video" loop muted></video>
<div id="video_cover"></div>

If you have questions that are beyond the scope of this help file, visit our support forum.

Any questions regarding customizations are not included in item support. It is up to the buyer to make any necessary customizations they need. The official ThemeForest support policy can be found here: https://themeforest.net/page/item_support_policy. That being said we will try and assist all buyers as much as possible with questions.

If you would like to hire us for custom development, please contact here: http://progressionstudios.com/contact/

Vayvo - Template Documentation

By Progression Studios

Main Structure

CSS Structure

Tablet/Mobile Styling

Color Customizing

JavaScript Structure

Columns

Navigation

Sticky Navigation

Tablet/Mobile Navigation

Mobile Navigation HTML

Sliders

Slider Styles

Slider Height

Slider Reflection Base

Slider Responsive Styles

Buttons

Carousel

Icons

FontAwesome

DashIcons

Videos

Video Background

Custom Development