“Renty - Car Rental & Booking HTML5 Template” Documentation by “BestWebHolding” v1.0


“Renty - Car Rental & Booking HTML5 Template”

Created: 04/10/2013
By: BestWebHolding
Email: envato@bestwebholding.com

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!


Table of Contents

  1. General Information
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScript
  5. Contact Page Options
  6. PSD Files
  7. Sources and Credits

1) General Information - top

Renty is a Car Rental & Booking HTML5 Template designed for people who are using online services to rent and book a car for their vacation or business purposes. It consists of 10 built-in pages. This template is developed on amazing "Renty - Car Rental & Booking PSD Template" basis created by BestWebSoft.

Pages:

Features:


2) HTML Structure - top

The general template structure is mostly the same throughout the template. Slider exists only for homepages ( <div id="slider"> ). Progress bar ( <div id="progress-bar"> ) exists only for 'choose car' page, 'choose extras' page, 'review book' page. Here is the general structure:


	<body>
		<div id="conteiner">
			<div id="branding">
				<div id="branding-content">
					<div class="title-content">
						{title and thumb}							
					</div>					
					<div class="access-content">
						{main menu}
					</div><!-- .access -->			
					<div class="menus-content">	
						<div class="menus">	
							{select language and select country}							
						</div>
						<div class="member">
							{signin and register button}
						</div>
					</div>
				</div><!-- #branding-content -->
				<div class="clear"></div>
			</div><!-- #branding -->
			<div id="slider">
				<div id="slider-img">
					<ul class="slides">
					    {slider images}
					</ul>
				</div>
				<div id="slider-content">
					<form id="slider-form" class="main-form" action="04-choose-car.html">
						{slider form}
					</form>
					<div id="slider-post">
						{slider post}	
					</div>
					<div id="slider-front-img">	
						{slider additional image}
					</div>
				</div>			
			</div><!-- #slider -->
			<div id="progress-bar">
				{progress-bar}
			</div>	
			<div id="main">
				<div id="primary">
					{main content}
				</div>
			</div>
			<div class="clear"></div>
			<footer id="footer">			
				{footer content}
			</footer><!--end:footer-->
		</div><!--end:conteiner-->
	</body>
		

Open the html folder and your will find all HTML, CSS and JS files that you'll need to customize and add your content.

This template has 4 colors for buttons - you can see them on the shortcode page. If you want to change the color of button, You have to open the desired file, find a place where there is a button, and replace the word "orange_button" (if it is the orange button) or "blue_button" (if it is the blue button) with one of this: "orange_button", "green_button", "blue_button", "grey_button".

All images are replaced with placeholders from http://placehold.it. If You want to add your image instead of it, You have to add your image into the folder "images". Then you have to open the desired file, find the place with placeholder and replace src tag with the path to your image. For example:

			<img src="http://placehold.it/2000x340" alt="" />
		

replace with:

		    <img src="images/your_new_image.jpg" alt="" />
		

The slider on the homepage has 3 images. If You want to add or remove the slide, You have to open the desired file, find the place:

			<div id="slider-img">
				<ul class="slides">
				    <li><img src="http://placehold.it/2000x340" alt="" /></li>
				    <li><img src="http://placehold.it/2000x340" alt="" /></li>
				    <li><img src="http://placehold.it/2000x340" alt="" /></li>
				</ul>
			</div>	
		

And then you should delete or add a line

		    <li><img src="http://placehold.it/2000x340" alt="" /></li>
		

3) CSS Files and Structure - top

I'm using several CSS files in this theme.

  1. css/style.css - is a common file with all main styles, separated for sections, this is where you should add your custom code and edit the existing one.
  2. css/jquery.slider.min.css - stylesheet for "slider-range" jQuery plugin.
  3. css/jquery-ui.css - stylesheet for DatePicker jQuery plugin.
  4. css/css_ie.css - stylesheets for fixing behavior of old IE browsers.
css/style.css

Main CSS file in this theme is style.css that contains all specific stylings for the theme. The file is separated into 13 sections using labels as follows:

         
		1.      Default browser CSS
		2.      Fonts
		3.      Global Elements
		4.      Custom Form elements
		5.      Header Elements
		6.      Main Structure
		7.      Slider Elements
		8.      Main Content
		9.      Content for "sign up" block
		10.     Sidebar and widgets
		11.     Sign-in/Register/Reset-password
		12.     Pagination for pages
		13.     Footer content
		

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. If you're using firefox I'd suggest using Firebug, it's really awesome. Get firebug


4) JavaScript - top

This theme imports following Javascript files.

  1. html5.js - Javascript for IE
  2. jquery-1.10.1.min.js - Javascript library
  3. jquery-migrate-1.2.1.min.js - jQuery migrate
  4. jquery-ui.js - jQuery UI
  5. jquery.blueberry.js - Homepage slider
  6. jquery.meio.mask.js - add mask in input for time
  7. jquery.slider.min.js - add slider-range
  8. custom-form-elements.js - custom checkboxes and radio buttons
  9. jquery.selectbox-0.2.min.js - custom selectbox
  10. placeholder_ie.js - add placeholder for IE
  11. script.js - contains all custom script
  12. pie.js - custom script to draw circle percentage

Except script.js and pie.js, all of the plugins are packed, so you don't need to edit anything in these files manually. The only necessary thing to know is how to call the method. You can refer to the website of the plugin author I listed in the "Sources and Credits" section to learn more about them.

script.js contains custom scripts and scripts to call method for above plugin.


5) PSD Files - top

PSD files are not included into this release. You can purchase original "Renty - Car Rental & Booking PSD Template" created by BestWebSoft and edit all necessary widgets, customize the layout, etc.


6) Sources and Credits - top

I've used the following images, icons, js, css files as listed.


BestWebHolding

Go To Table of Contents