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!
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
Landing-pages/light/index1.html
to your hosting server. You can rename "index1.html" to "index.html"All pages developed based on bootstrap framework 3.xx. Below is overview of page structure.
Below example code is default header code which is include default and minify CSS.
Your Landing Page Title
ALL JAVASCRIPT FILES USED IN TEMPLATE ......
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 fileresponsive.css
: All responsive behavior css code you can find into this filemain.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 classeshelper.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.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
: 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 borderspos-rel
: Apply position relative on tagpos-abs
: Apply position absolute on tagl0
: 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.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.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
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.
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
bold-n, bold-1, bold-2, bold-3, bold-4, bold-5
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.
align-l, align-r, align-c, align-m, align-t
sm-align-c, sm-align-l
classes to adjust alignment in smaller screens.
flex-tl
=> top left, flex-tc
=> top center, flex-tr
=> top rightflex-cc
=> center center, flex-cl
=> center left, flex-cr
=> center rightflex-bc
=> bottom center, flex-bl
=> bottom left, flex-br
=> bottom rightbg-fixed
: Apply background position fixed on container with no repeatbg-cover
: Apply background size cover with no repeatbg-contain
: Apply background size contain with no repeatbg-cc
: Apply background alignment center centerbg-ct
: Apply background alignment center topbg-cb
: Apply background alignment center bottombg-lt
: Apply background alignment left topbg-lc
: Apply background alignment left centerbg-lb
: Apply background alignment left bottombg-rt
: Apply background alignment right topbg-rc
: Apply background alignment right centerbg-rb
: Apply background alignment right bottom.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 */
.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 */
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 classesbdr-op-1, bdr-op-2, bdr-op-3, bdr-op-4, bdr-op-5
default dark border opacity classeslight
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
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
pd-tb-large, pd-tb-medium, pd-tb-small, pd-tb-mini, pd-tb-tiny, pd-tb-micro
pd-0, pd-10, pd-20, pd-30, pd-40, pd-50, pd-60, pd-70, pd-80, pd-90, pd-100
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
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
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
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
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
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
mr-auto
Margin auto left and right sidemr-0, mr-5, mr-10, mr-20, mr-30, mr-40, mr-50, mr-60, mr-70, mr-80, mr-90, mr-100
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
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
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
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
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
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
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.
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.
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.
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.
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 ...
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
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
reverse
along with flex-row
to make it reverse grids.middle-md
along with flex-row
to make all children column vertical align middle.bottom-md
along with flex-row
to make all children column vertical align bottom.first-md
on column flex-col-md-4
to make it first in row.last-sm
on column flex-col-md-4
to make it last in row.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.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"
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." }
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
form-data/config.php
file. All basic requirements / steps mention in file.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: