RxApps is a html5 app landing page, built with the latest Bootstrap version and repsonsive on all standard devices. Every layout looks well-turned on desktops, tablets, mobiles.
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
The general template structure is the same throughout the template. Here is the general structure.
<!doctype html> <html class="no-js" lang="zxx"> <head> ... </head> <body> . <!-- ========================= HEADER SECTION ========================= --> <header id="intro"> <nav class="navbar" id="main-nav"> ... </nav> <!-- ========================= Intro ========================== --> <section> <div class="container"> ... </div> </section> </header> <!-- ========================= FEATURES ========================== --> <section id="app-features"> <div class="container"> ... </div> </section> <!-- ========================= App Description ========================== --> <section class="app-description"> <div class="container"> ... </div> </section> <!-- ========================= Benefits ========================== --> <section class="benifits"> <div class="container"> ... </div> </section> <!-- ========================= App Screenshots ========================== --> <section class="app-screenshot" id="screenshots"> <div class="container"> ... </div> <div class="container-fluid"> <div class="row"> .... </div> </div> </section> <!-- ========================= Pricing Plan ========================== --> <section class="pricing-plan" id="pricing-plan"> <div class="container"> ... </div> </section> <!-- ========================= Subscribe ========================== --> <section class="subscribe"> <div class="container"> ... </div> </section> <!-- ========================= Video ========================== --> <section class="app-video"> <div class="container"> ... </div> </section> <!-- ========================= Download App ========================== --> <section class="app-downloads" id="app-download"> <div class="container"> ... </div> </section> <!-- ========================= Contact Us ========================== --> <section class="contact" id="contact"> <div class="container"> ... </div> </section> <!-- ========================= FOOTER ========================== --> <footer class="footer"> <div class="container"> ... </div> </footer> <!-- ========================= SCRIPTS ============================== --> ... </body> </html>
We are using 9 css files which are seperated to extend usability and customization. If you are going to use this theme, we recommend to merge all the css into one file to reduce http queries.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/assets/bootstrap.css">
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="css/assets/font-awesome.min.css">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="css/assets/owl.carousel.css">
<link rel="stylesheet" href="css/assets/owl.transitions.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="css/assets/animate.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/assets/venobox.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/assets/responsive.css">
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
We have used twotypes of font throughout the template.
These are:
1. Exo- Heading font
2. Roboto - Body Font
All of the fonts are available on google fonts. You can choose other fonts from google directory. We have linked them at head
<!-- Google Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Exo:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
This theme imports 10 Javascript files.
<!-- =========================
SCRIPTS
============================== -->
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="js/assets/bootstrap.min.js"></script>
<!-- Owl Carousel JS -->
<script src="js/assets/owl.carousel.min.js"></script>
<!-- WOW Js -->
<script src="js/assets/wow.min.js"></script>
<!-- Sticky JS -->
<script src="js/assets/jquery.sticky.js"></script>
<!-- Smooth Scrool -->
<script src="js/assets/smooth-scroll.js"></script>
<!-- AjaxChimp JS -->
<script src="js/assets/jquery.ajaxchimp.js"></script>
<!-- Mail JS -->
<script src="js/mail.js"></script>
<!-- Custom JS -->
<script src="js/plugins.js"></script>
<script src="js/function.js"></script>
All jQuery files are necessary except wow.min.js .
It's very easy to change your logo. Just take a look at the code below. Change the logo link to your own image or text logo.
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#rx-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" data-scroll="" href="#intro"><span>Rx</span>Apps</a>
</div>
To change the template base color follow the below instruction
1. Find styles folder in CSS folder; ex: css>styles. You will see a lots of predefined css color scheme files there.
2. Now add the below link at the very bottom of header
<link id="main-style" rel="stylesheet" type="text/css" href="css/styles/blue.css">
Like This:
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/assets/responsive.css" <script src="js/vendor/modernizr-3.3.1.min.js"></script> <!-- Color Switcher --> <link id="main-style" rel="stylesheet" type="text/css" href="css/styles/blue.css">
We have used Font Awesome 4.6.3 throughout the template. So there are 1000+ font icons come with it.
Visit Here for more info:
http://fontawesome.io/icons/
To change the image in Screenshot Section just change the image url in the below code.
<div id="screenshot-carousel" class=".."> <div><img src="images/screen01.png" alt=""></div> <div><img src="images/screen02.png" alt=""></div> <div><img src="images/screen03.png" alt=""></div> <div><img src="images/screen04.png" alt=""></div> <div><img src="images/screen01.png" alt=""></div> </div>
You have nothings to do here but just change your email to get messages from users. To do this follow these steps,
Goto send.php > Change your email as follows
// Set the recipient email address. // FIXME: Update this to your desired email address. $recipient = "email@yourdomain.com";
To activate mailchimp find the below code in function.js file.
//Mailchimp Form
$('#mc-form').ajaxChimp({
url: 'http://sylhostbd.us7.list-manage.com/subscribe/post?u=cfb2b00a2b6d600f82d39ad78&id=eeb2f32703'
});
Now Change the URL to your own list URL.
For more details and customization follow this link:
https://github.com/scdoshi/jquery-ajaxchimp
To add extra sections like FAQ, Skillbars, Team etc. just follow the following instruction:
1. Go to rxapps-layout-with-extra-sections this folder.
2. Open the index.html file.
3. Here you will find all section with appropriate comment. Copy your desired section and add it to your current index.html file.
4. Now open style.css file, find it in CSS folder. Find your sections css and copy them. All css are commented for the appropriate section. Copy and paste into your style.css file.
Thats it!
For more help contact with us!
There is two version of rotating text in our template. One where some predefined words are changing in a sentence. Another is typing text where some parts of a sentence are typing continuously. To change those words or typed text follow the below procedure:
Changing Rotating Words
1. Go to rxapps-text-rotate-layout02 this folder. Open index.html
2. Find below code in INTRO section
For more help contact with us!
Once again, thank you so much for purchasing this theme. We'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist.
EcologyTheme
Support@ecologytheme.com