introduction
Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.
This theme is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.
Also by simply adding classes in code, user can get variations in styles.
We have optimized the code for load speed and extensively used CSS for effects etc.
The code is 100% bug free and follows W3C standards.
We have used latest tools for development e.g., HTML5/CSS3, BootStrap that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.
It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.
Rocket is a multipupose Template that has following feature
Home & Inner Pages
- 3 Home Pages
- 1 About Us Page
- 1 Services Page
- 3 Blog Pages
- 6 Hosting Pages
- 1 404 Page
- 1 Coming Soon Page
- 1 Contact Us Page
Some Extra Feature
- 3 Sliders Header
- 2 Footer
Setting up Rocket Host Theme
Follow these guide lines below to get started with your Site:
- Open the
Rocket Host/markupFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
- Make sure you upload the required files/folders listed below:
HTML/css- Required css filesHTML/fonts- Required fonts filesHTML/images- Required images filesHTML/js- Required Javacripts filesHTML/revolution- Revolution SliderHTML/process.php- Required PHP fileHTML/index.html- Index File/Homepage
- The other files can be used according to your requirement.
- After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.
HTML Structure
We have Developed Rocket Host with a simple coding structure. here is the sample:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- All Stylesheets here -->
</head>
<body>
<!-- nav of the page -->
<nav class="navbar">
...
</nav>
<!-- slider -->
<div class="slider">
...
</div>
<!-- Contents Containers -->
<div class="container">
...
</div>
<!-- footer of the page -->
<footer>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
</body>
</html>Page PreLoaders
You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions.
<div id="preloader">
<div id="status">
<!-- Here you can add preloader style -->
</div>
</div>
Logo Settings
The Logo can be found in the Nav Section - nav
<a class="navbar-brand visible-xs" href="#"><img alt="Rocket Logo" src="images/logo.png"></a>
Note The Logo Image's width/ height can be 200px/ 30px
Retina Logo
If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo.
Changing Fonts
Changing Fonts in Rocket Host is very easy. By default, Rocket Host uses Poppins from the Google Fonts Library.
1- Add this code to your website, "css/all-stylesheets.css" file.
<!-- Font Poppins -->
@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700);
2- Integrate the fonts into your CSS:
font-family: 'Poppins', sans-serif;
Page Titles
Rocket Host has following base HTML structure for page title.
Images classes, banner-img-01, banner-img-02, banner-img-03, banner-img-04, banner-img-05
<div class="inner-banner-style banner-img-01">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="info">
<h1>About Rocket Host</h1>
<ol class="breadcrumb">
<li><a href="">Home</a></li>
<li class="active">Who We Are</li>
</ol>
</div>
</div>
</div>
</div>
</div>
Columns & Grid
Bootstrap Grid
Slider Types & their Options
Rocket Host includes 2 Unique Sliders & Pre-Built Slider Templates for you to be used on any Page with 10s of Options. The List of all the Sliders included are mentioned as follows:
- Revolution Slider
- Owl Slider
Revolution Slider
You can find the Revolution Slider related Documentation here.
Read Revolution Slider Docs
Blog Setup
Rocket Host has 2 different type of Blog Posts. Use the Code Sample below:
Blog post - Style 01
<article class="blog-wapper"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="entry-content"> <div class="entry-format-icon"><i data-icon="icon-image" class="icon-image"></i></div> <h2 class="entry-title"><a href="#" class="post-title" rel="bookmark">Were gonna pay a call on the art for Addams Family</a></h2> <div class="entry-metas"> <p class="entry-time entry-meta"><span class="entry-label">Published on</span><a href="#" rel="bookmark"><time class="entry-date published updated" datetime="2012-11-28T07:00:53+00:00"> 28.Nov.2012</time></a></p> <p class="entry-author entry-meta"><span class="entry-label">Posted By</span><a class="url fn n" href="#">oceanthemes</a></p> <p class="entry-comments entry-meta"><span class="entry-label">Comments</span><span>0</span></p> </div> </div> <!-- End entry-content --> </div> <div class="col-md-8 col-sm-8"> <header class="entry-header"> <div class="entry-format format-link has-thumb"><a class="entry-image" href="#"><img src="http://placehold.it/770x310" class="img-responsive" alt="rocket-125"></a></div> </header> <!-- .entry-header --> </div> </div> </article>
Blog post - Style 02
<article class="blog-wapper"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="entry-content"> <div class="entry-format-icon"><i data-icon="icon-quotes-right" class="icon-quotes-right"></i></div> <h2 class="entry-title"><a href="#" class="post-title" rel="bookmark">Post Format: Link</a></h2> <div class="entry-metas"> <p class="entry-time entry-meta"><span class="entry-label">Published on</span><a href="#" rel="bookmark"><time class="entry-date published updated" datetime="2012-11-28T07:00:53+00:00"> 28.Nov.2012</time></a></p> <p class="entry-author entry-meta"><span class="entry-label">Posted By</span><a class="url fn n" href="#">oceanthemes</a></p> <p class="entry-comments entry-meta"><span class="entry-label">Comments</span><span>0</span></p> </div> </div> <!-- End entry-content --> </div> <div class="col-md-8 col-sm-8"> <header class="entry-header"> <div class="entry-format format-link has-thumb"><a class="entry-image" href="#"><img src="http://placehold.it/770x310" class="img-responsive" alt="rocket-125"></a><a href="#" class="link-block">Link To ThemeAlien Homepage</a></div> </header> <!-- .entry-header --> </div> </div> </article>
Setting Up Parallax Sections:
Make sure your Parallax Images are of enough Width & Height, preferably 1920x1080 or above.
<div class="parallax-1"> <div class="container"> <div class="row"> <div class="col-lg-12"> </div> </div> </div> </div>
Tabs, Toggles & Accordions
You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.
Tabs
Use this code to display Tabs:
<div class="tabs-section"> <ul class="tabset"> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href="#tab-3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="tab-1"> This is Tab 1 Content </div> <div id="tab-2"> This is Tab 2 Content </div> <div id="tab-3"> This is Tab 3 Content </div> </div> </div>
Note: Make sure you add unique IDs for each Tab Container and Tab Items.
Accordions
You can add an Accordion using the Code below:
<ul class="beans-accordion"> <a class="opener" href="#"><i class="fa"></i> Accordion Title/opener </a> <div class="beans-slide">Accordion Content Goes Here</div> <a class="opener" href="#"><i class="fa"></i> Accordion Title/opener </a> <div class="beans-slide">Accordion Content Goes Here</div> <a class="opener" href="#"><i class="fa"></i> Accordion Title/opener </a> <div class="beans-slide">Accordion Content Goes Here</div> </ul>
Lightbox
Setting up Lightboxes:
Adding a .lightbox class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:
Single Image:
<a class="image-popup-vertical-fit" href="images/vehicle-park/1.jpg" title="Pellentesque habitant morbi"></a>
Video:
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Lightbox Video</a>
Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.
Google Maps
You can add Embedded Google Maps iframe to any Page using the following setup:
Add a section which will contain your Google Map:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25215.625657884106!2d144.956637!3d-37.81456500000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4e793770d3%3A0x9e44d6ad0d76ba7c!2s121+King+St%2C+Melbourne+VIC+3000%2C+Australia!5e0!3m2!1sen!2sus!4v1435061406583" height="400" allowfullscreen></iframe>
Countdown
You can add a Countdown Timer to any Page using the following setup:
<div class="count"></div>
<script>
$(window).load(function() {
$('.count').counterUp({
delay: 10,
time: 1000
});
});
</script>
Contact AJAX Form Setup
Update email address. Please open “process.php” update your email address in line#2.
$adminemail = "youremailhere@googlemail.com";
Images
CSS & Fonts
- Bootstrap
- Font-Awesome (Font Icons)
- Icomoon (Font Icons)
- Simple Line Icons (Font Icons)
- Google Fonts
Initial Release V1.0
Released on 20th Nov 2016