Table of Content


Thank you for purchasing my template.

We are happy to help you but before you contact, please make sure that you followed the whole documentation very carefully, because it cover whole information to manage template.

We provide a support within 48 - 72 working hours. In order to get help you should contact me via themeforest user contact form or support.

Ticket support Profile contact form

Please note that we will only provide the support if you contact us via themeforest contact form or our support area. This is the only way we can verify you as our customer!

Installation #back to top

Package content

Below is main folder which include all landing page light and dark theme dependency files and all pre-define ready to use landing page files.

							Main
							  |
							  |--light/				=> Light theme version
							  |    |
							  |    |--form-data/	=> All php wrapper for mail settings
							  |    |--css/			=> All original normal CSS files 
							  |    |--js/			=> All original template js files
							  |    |--lib/			=> All dependency library files which used in template
							  |    |--images/		=> All image files which are used in template
							  |    |--minify/		=> All minify CSS files which are used in template
							  |    |--index1.html
							  |    |--index2.html
							  |    |--index3.html
							  |    |--index4.html
							  |    |--index5.html
							  |    |--index6.html
							  |    |--aboutus.html
							  |    |--login-register.html
							  |    |--thankyou.html
							  |
							  |--dark/
							  		Dark theme version folder structure same as light theme version

						

Installation requirement

  • PHP
  • Apache webserver (Windows servers will probably work, but are not supported)
  • An FTP tool to upload the files

Pre-define landing pages

  • Copy and upload all files and folders (css, images, form-data, js, lib, index.html) of your desire pre-define landing page for example : Landing-pages/light/index1.html to your hosting server. You can rename "index1.html" to "index.html"
  • Once all files and folders uploaded than you can access your page via browser.

Layout overview #back to top

All pages developed based on bootstrap framework 3.xx. Below is overview of page structure.

Page meta information

Below example code is default header code which is include default and minify CSS.

							
							
							Your Landing Page Title

							

							
							
							
							
							
							
							
							

							
							
							
							
							
						

Page body structure

							
...
ALL JAVASCRIPT FILES USED IN TEMPLATE ...

CSS structure

R.Gen landing pages use following main CSS files

							Main
							  |
							  |--light/
							  |    |
							  |    |--form-data/
							  |    |--css/
							  |    |   |--dark-theme.css
							  |    |   |--rgen-grids.css
							  |    |   |--responsive.css
							  |    |   |--main.css
							  |    |   |--animate.css
							  |    |   |--helper.css
							  |    |   |--custom.css
							  |    |--js/
							  |    |--lib/
							  |    |--images/
							  |    |--minify/
							  |    |--
							  |    |--
						
  • dark-theme.css : Used for dark theme version only.
  • rgen-grids.css : All grids related CSS defined into this file
  • responsive.css : All responsive behavior css code you can find into this file
  • main.css : This CSS file include all typography and main structure related codes. We strongly suggest do not modify directly.
  • animate.css : Include all CSS animation classes
  • helper.css : This CSS include all helper CSS classes which are widely used in layout structure to generate design templates. We strongly suggest take full overview to know how we used these classes into layout structure. These classes help you to manipulate design structure very easily.
  • custom.css : Add all your custom CSS code into these file to customize template instead of directly modifying core files.

Useful tools to customize HTML and CSS

Customization #back to top

CSS code overview

main.css : This CSS file include all typography and main structure related codes. We strongly suggest do not modify directly. Below is basic overview of main CSS file.

  • title class used for all main title of sections and other areas. You can use large, small, mini, tiny classes along with title to change title sizes. Below is example code how classes apply in code.

    						

    ... Your title text ...


  • title-sub is class used for all sub text below main title of sections. You can use large, small, mini, tiny classes along with title-sub to change title sizes. Below is example code how classes apply in code.

    						

    ... All sub title text below main title ...


  • typo-light class used on parent tag to make it title and other content light on dark background. You can find practical use of this class in all html file code. Below is just example code how it works.

    						

    ... Your title text ...

    ... All sub title text below main title ...

  • Below is example code of button styles. Apply classes large, small, mini, tiny to change buttons styles

    						
    						Default button
    
    						
    						Primary button
    						

    Apply class light to use button on dark background. Apply class solid to make full solid color button.

    Below is list of other helper classes to apply on buttons to manage colors.
    btn-white, btn-gray, btn-dark, btn-color1, btn-color2, btn-color3, btn-color4

Beside of these all other CSS structure classes included into these main.css file.


Helper CSS

helper.css : This CSS include all helper CSS classes which are widely used in layout structure to generate design templates. We strongly suggest take full overview to know how we used these classes into layout structure. These classes help you to manipulate design structure very easily. Best way to get classes overview directly from helper.css file.

  • full-wh class used to cover full width x height overlay div or background in any section. full-wh class use position absolute so it alway dependent on parent tag position relative.
  • no-border : For reseting borders
  • pos-rel : Apply position relative on tag
  • pos-abs : Apply position absolute on tag
  • l0 : Apply left position 0. Generally apply when element use absolute position.
  • r0 : Apply right position 0. Generally apply when element use absolute position.
  • reset : Used to reseting ul HTML element.

Typography helper classes

  • txt-upper : Apply to make it all text in uppercase.
  • txt-lower : Apply to make it all text in lowercase.
  • txt-capi : Apply to make it all text capitalize.
  • Below listed all classes used to adjust custom fonts sizes according to design requirements.

    fs11, fs12, fs13, fs14, fs16, fs18, fs20, fs22, fs24, fs26, fs28, fs30, fs32, fs34, fs36, fs38, fs40, fs42, fs44, fs46, fs48, fs50, fs52, fs54, fs56, fs58, fs60, fs62, fs64, fs66, fs68, fs70, fs72, fs74, fs76, fs78, fs80, fs90, fs100, fs110, fs120, fs130, fs140, fs150, fs160, fs170, fs180, fs190, fs200

  • Smaller screen classes

    Apply sm-fs12, sm-fs13, sm-fs14, sm-fs16, sm-fs18, sm-fs20, sm-fs22, sm-fs24, sm-fs26, sm-fs28, sm-fs30 classes to reset or adjust font sizes in smaller screens.
  • Below listed all classes used to adjust text content line height according to content requirement.

    lh1, lh1-2, lh1-3, lh1-4, lh1-5, lh1-6, lh1-7, lh1-8, lh1-9, lh2, lh2-1, lh2-2, lh2-3, lh2-4, lh2-5

  • Below listed all classes used to adjust font weight of text or title content.

    bold-n, bold-1, bold-2, bold-3, bold-4, bold-5

  • Below listed classes used to apply text decoration italic or line-through.

    italic, l-through

  • f-1, f-2 classes used to apply different font styles. f-1 is for Open Sans and f-2 is for Montserrat font.
  • Below listed all classes used for alignment.

    align-l, align-r, align-c, align-m, align-t

  • Smaller screen classes

    Apply sm-align-c, sm-align-l classes to adjust alignment in smaller screens.

Flex position classes

  • Below listed all classes used for flex positions.
    flex-tl => top left, flex-tc => top center, flex-tr => top right
    flex-cc => center center, flex-cl => center left, flex-cr => center right
    flex-bc => bottom center, flex-bl => bottom left, flex-br => bottom right

Background position classes

  • bg-fixed : Apply background position fixed on container with no repeat
  • bg-cover : Apply background size cover with no repeat
  • bg-contain : Apply background size contain with no repeat
  • bg-cc : Apply background alignment center center
  • bg-ct : Apply background alignment center top
  • bg-cb : Apply background alignment center bottom
  • bg-lt : Apply background alignment left top
  • bg-lc : Apply background alignment left center
  • bg-lb : Apply background alignment left bottom
  • bg-rt : Apply background alignment right top
  • bg-rc : Apply background alignment right center
  • bg-rb : Apply background alignment right bottom

Background colors

				.bg-white { background-color: #fff; }
				.bg-gray { background-color: #f4f5f5; } /* very light gray */
				.bg-gray1 { background-color: #f2f2f2; } /* light gray */

				.bg-dark1 { background-color: #282c35; } /* medium dark gray */
				.bg-dark2 { background-color: #1f2229; } /* dark gray */

				.bg-color1 { background-color: #1f9df3; } /* dark blue */ 
				.bg-color2 { background-color: #8BCE7B; } /* green */ 
				.bg-color3 { background-color: #ff6858; } /* orange */ 
				.bg-color4 { background-color: #e74c3c; } /* purple */
				

Text colors

				.txt-white { color: #fff; }
				.txt-gray { color: #f4f5f5; } /* very light gray */
				.txt-dark2 { color: #282c35; } /* medium dark gray */
				.txt-color1 { color: #1f9df3; } /* dark blue */ 
				.txt-color2 { color: #8BCE7B; } /* green */ 
				.txt-color3 { color: #e74c3c; } /* dark orange */ 
				.txt-color4 { color: #e74c3c; } /* purple */
				

Border classes

  • below is list of border colors.

    						.bdr-white { border-color: #fff; }
    						.bdr-gray { border-color: #f4f5f5; } /* very light gray */
    						.bdr-dark { border-color: #282c35; } /* medium dark gray */
    						.bdr-color1 { border-color: #1f9df3; } /* dark blue */ 
    						.bdr-color2 { border-color: #8BCE7B; } /* green */ 
    						.bdr-color3 { border-color: #ff6858; } /* orange */ 
    						.bdr-color4 { border-color: #e74c3c; } /* purple */
    						
  • bdr-l, bdr-r, bdr-t, bdr-b classes apply top, right, bottom and left border.
  • bdr-1, bdr-2, bdr-3, bdr-4, bdr-5, bdr-10, bdr-15, bdr-20, bdr-25, bdr-30 Border thickness classes
  • bdr-op-1, bdr-op-2, bdr-op-3, bdr-op-4, bdr-op-5 default dark border opacity classes
  • Apply light class along with opacity class to make it light border on darker background
    							
    Example block with border classes
  • row-bdr class is used to apply border on grid quickly.
    							
    Example block with row border
  • row-sep class is used to apply border separators on grid quickly.
    							
    Example block with row border separators

Opacity classes

  • Opacity classes
    op-001, op-002, op-003, op-004, op-005, op-006, op-007, op-008, op-009
    op-01, op-02, op-03, op-04, op-05, op-06, op-07, op-08, op-09

Padding classes

  • Default padding classes apply top - bottom sides only
    pd-tb-large, pd-tb-medium, pd-tb-small, pd-tb-mini, pd-tb-tiny, pd-tb-micro
  • Padding on all sides top - right - bottom - left
    pd-0, pd-10, pd-20, pd-30, pd-40, pd-50, pd-60, pd-70, pd-80, pd-90, pd-100
  • Padding on top - bottom sides
    pd-tb-10, pd-tb-20, pd-tb-30, pd-tb-40, pd-tb-50, pd-tb-60, pd-tb-70, pd-tb-80, pd-tb-90, pd-tb-100
  • Padding on left - right side
    pd-lr-0, pd-lr-10, pd-lr-20, pd-lr-30, pd-lr-40, pd-lr-50, pd-lr-60, pd-lr-70, pd-lr-80, pd-lr-90, pd-lr-100
  • Padding on right side only pd-r-0, pd-r-10, pd-r-20, pd-r-30, pd-r-40, pd-r-50, pd-r-60, pd-r-70, pd-r-80, pd-r-90, pd-r-100
  • Padding on bottom side only pd-b-0, pd-b-10, pd-b-20, pd-b-30, pd-b-40, pd-b-50, pd-b-60, pd-b-70, pd-b-80, pd-b-90, pd-b-100
  • Padding on top side only pd-t-0, pd-t-10, pd-t-20, pd-t-30, pd-t-40, pd-t-50, pd-t-60, pd-t-70, pd-t-80, pd-t-90, pd-t-100
  • Smaller screen classes

    Apply sm-pd-0, sm-pd-10, sm-pd-20, sm-pd-30, sm-pd-lr-10, sm-pd-lr-20, sm-pd-lr-30, sm-pd-tb-large, sm-pd-tb-medium, sm-pd-tb-small, sm-pd-tb-mini, sm-pd-tb-tiny, sm-pd-tb-micro to reset padding in smaller screens

Margin classes

  • mr-auto Margin auto left and right side
  • Margin on all sides top - right - bottom - left
    mr-0, mr-5, mr-10, mr-20, mr-30, mr-40, mr-50, mr-60, mr-70, mr-80, mr-90, mr-100
  • Margin on top side only
    mr-t-10, mr-t-20, mr-t-30, mr-t-40, mr-t-50, mr-t-60, mr-t-70, mr-t-80, mr-t-90, mr-t-100
  • Margin on right side only
    mr-r-5, mr-r-10, mr-r-20, mr-r-30, mr-r-40, mr-r-50, mr-r-60, mr-r-70, mr-r-80, mr-r-90, mr-r-100
  • Margin on left side only
    mr-l-5, mr-l-10, mr-l-20, mr-l-30, mr-l-40, mr-l-50, mr-l-60, mr-l-70, mr-l-80, mr-l-90, mr-l-100
  • Margin on bottom side only
    mr-b-0, mr-b-5, mr-b-10, mr-b-20, mr-b-30, mr-b-40, mr-b-50, mr-b-60, mr-b-70, mr-b-80, mr-b-90, mr-b-100, mr-b-150, mr-b-200
  • Margin on top - bottom side only
    mr-tb-10, mr-tb-20, mr-tb-30, mr-tb-40, mr-tb-50, mr-tb-60, mr-tb-70, mr-tb-80, mr-tb-90, mr-tb-100
  • Margin on left - right side only
    mr-lr-5, mr-lr-10, mr-lr-20, mr-lr-30, mr-lr-40, mr-lr-50, mr-lr-60, mr-lr-70, mr-lr-80, mr-lr-90, mr-lr-100
  • Smaller screen classes

    Apply sm-mr-tb-0, sm-mr-tb-10, sm-mr-tb-20, sm-mr-tb-30, sm-mr-b-0, sm-mr-b-5, sm-mr-b-10, sm-mr-b-20, sm-mr-b-30, sm-mr-b-40, sm-mr-b-50, sm-mr-b-60 to reset padding in smaller screens

Along with these all classes there are many other classes in helper.css. We suggest open helper.css file directly and take overview of full list of helper classes.


Background utilities

  • Background image

    Apply data-bg="images/bg1.jpg" attribute on element with your image path to apply background image

    						
    ...

    Use helper classes bg-cc bg-cover to adjust background image on element.

  • Background gradient color

    Apply data-gradient="y" and data-g-colors="rgba(0,0,0,0)|rgba(13, 29, 125, 0.7)" attribute. Apply two background colors with "|" separator.

    						
  • Parallax background image

    Apply attribute data-parallax="scroll" and set image path in data-image-src="images/bg1.jpg" to apply parallax image.

    						

    Please note parallax image only apply on transparent element.


  • Below is basic navigation structure.

    						
    						
    						
  • Below is example code to set logo image. Attributes data-navopen="pe-7s-more" and data-navclose="pe-7s-close" use to set icons for mobile menu.

    						
    						
  • Apply data-glass="y" to make it transparent navigation.

    						
    						
  • Apply data-sticky="y" to make it navigation sticky by default.

    						
    						
  • Apply data-sticky-scroll="y" to make it navigation sticky when page scroll only.

    						
    						
  • Apply CSS class light to display navigation dark background / on image.

  • Use helper classes glass-01, glass-02, glass-03, glass-04, glass-05, glass-06, glass-07, glass-08, glass-09 to apply transparent background on navigation.

    						
    						

Grid structure

  • All landing pages use flex based grid structure. Grid structure classes is same as bootstrap grid structure just added prefix flex-. Below example code to create basic grid structure.

    						
    						
    						
    ... GIRD COLUMN CONTENT ...
    ... GIRD COLUMN CONTENT ...
    ... GIRD COLUMN CONTENT ...
  • Use following classes along with flex-row to adjust space between columns
    gt0, gt1, gt2, gt4, gt10, gt12, gt14, gt16, gt18, gt20, gt22, gt24, gt26, gt28, gt30, gt40, gt50, gt60, gt70, gt80, gt90, gt100
  • Use following classes along with flex-row to apply bottom margin on columns
    mb0, mb1, mb2, mb4, mb10, mb12, mb14, mb16, mb18, mb20, mb22, mb24, mb26, mb28, mb30, mb40, mb50, mb60, mb70, mb80, mb90, mb100
  • Apply class reverse along with flex-row to make it reverse grids.
  • Apply class middle-md along with flex-row to make all children column vertical align middle.
  • Apply class bottom-md along with flex-row to make all children column vertical align bottom.
  • Apply class first-md on column flex-col-md-4 to make it first in row.
  • Apply class last-sm on column flex-col-md-4 to make it last in row.

Forms structure

  • R.Gen landing pages use very simple form structure. It's very easy to customize or add new fields according to requirement. Below is example code of basic form.

    						
    						
  • Set your email address on hidden field on which you would like to get mails.

    							
    							
    						

    You can also set these email directly in form-data/formdata.php as well.

    Below is default php code.

    						$to = $_POST['to']['val']; // default code
    						

    Example code to set email in php file directly

    						$to = "abc@xyz.com"; // Your email ID
    						
  • form-data/formdata.php file is main file to sending mail of form data.
  • Apply attribute data-success-redirect="y" to activate thank you page when form successfully submitted.

    Open file js/rgen.js and find below code than apply your thank you page path.

    						/*
    						URL OF SUCCESS PAGE ON FORM SUBMIT
    						*********************/
    						success_url: "thankyou.html"
    						
  • Below is list of validation attribute settings on form field.
    						
    						

    data-label="Name" is use as label in mail content.

    required attribute make field mandatory.

    data-msg="Please enter name." is validation message if field is mandatory.

  • All validation settings find in js/rgen.js file

    						rgen.global_validation = {
    							form: '',
    							rules: { 
    								email            : { required: true, email: true },
    								name             : { required: true },
    								message          : { required: true },
    								phone            : { required: true, number: true },
    								date             : { required: true, date: true },
    								people           : { required: true, number: true },
    								datetime         : { required: true, date: true }
    							},
    							msgpos: 'normal',
    							msg: {
    								email: {email: "Please, enter a valid email"}
    							},
    							subscribe_successMsg : "You are in list. We will inform you as soon as we finish.",
    							form_successMsg : "Thank you for contact us. We will contact you as soon as possible.",
    							
    							successMsg : "",
    							errorMsg   : "Oops! Looks like something went wrong. Please try again later."
    						}
    						

Newsletters

  • R.Gen Landing pages included MailChimp, Campaign Monitor, Get response, iContact, Constant Contact Option to save email addresses in text file. Below is example code to set newsletter subscription form

    						
    						
  • Set your newsletter service settings into form-data/config.php file. All basic requirements / steps mention in file.

Support Desk #back to top

Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. We provide support for your connivance, so please be patient, polite and respectful.

Please visit our profile page or Ticket support support.r-genesis.com

Support for my items includes:
  • * Responding to questions or problems regarding the item and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
Item support does not include:
  • * Customization and installation services
  • * Support for third party software and plug-ins
  • Hosting related issue
Before seeking support, please...
  • * Make sure your question is a valid Theme Issue and not a customization request.
  • * Make sure you have read through the documentation and any related guides before asking support on how to accomplish a task.
  • * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.