U-Listing HTML Template Documentation LTR

U-Listing Documentation

Thank you for your purchase! If you have any questions feel free to ask me through comment section on ThemeForest.

For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme.

Page Head :-

Page head contains Title, Metadata, Favicon and CSS.

<head>
<meta name="author" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>U-Listing HTML Template Documentation LTR</title>

<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<!-- Style CSS -->
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/mmenu.css">
<link rel="stylesheet" href="css/style.css" id="colors">  
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,500i,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800" rel="stylesheet" type="text/css">
</head>

CSS Structure :-

You can change it to your stylesheet.css / stylesheet.css file favorite theme.

<link rel="stylesheet" href="css/stylesheet.css" type="text/css">

HTML Structure :-

U-Listing is based on Bootstrap Grid that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

<div class="fullwidth_block search_categorie_block">	
    <div class="container">
	<div class="row">
	  <div class="col-md-12">
		<h3 class="headline_part centered margin-top-75">Most Popular Cities/Towns <span>Lorem Ipsum is simply dummy text of the printing and type setting industry.</span> </h3>
	  </div>
	</div>
    </div>
  
    <div class="margin-top-25">
	  <div class="col-md-12">
	  <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="category_container_item_part">
			<a href="#" class="category_item_box">
			 <img src="images/category-box-01.jpg" alt=""/>
			 <span class="category_item_box_btn">Browse</span>
			  <div class="category_content_box_part">
				<h3>New York City</h3>
				<span>15 listings</span> 
			  </div>
			</a> 
		</div>
	  </div>
		  
	  <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="category_container_item_part">
			<a href="#" class="category_item_box"> 
			<img src="images/category-box-02.jpg" alt=""/>
			 <span class="category_item_box_btn">Browse</span>
			  <div class="category_content_box_part">
				<h3>Chicago</h3>
				<span>27 listings</span> 
			  </div>
			</a> 
		</div>
	  </div>
	  
	  <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="category_container_item_part"> 
			<a href="#" class="category_item_box">
			  <img src="images/category-box-03.jpg" alt=""/>
			  <span class="category_item_box_btn">Browse</span>
				<div class="category_content_box_part">
				  <h3>Los Angeles</h3>
				  <span>22 listings</span> 
				</div>
			</a> 
		</div>
	  </div>
	  
	  <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="category_container_item_part"> 
			<a href="#" class="category_item_box">
			 <img src="images/category-box-04.jpg" alt=""/>
			 <span class="category_item_box_btn">Browse</span>
			  <div class="category_content_box_part">
				<h3>San Francisco</h3>
				<span>15 listings</span> 
			  </div>
			</a> 
		</div>
	  </div>
	  <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="category_container_item_part"> 
			<a href="#" class="category_item_box">
			 <img src="images/category-box-05.jpg" alt=""/>
			 <span class="category_item_box_btn">Browse</span>
			  <div class="category_content_box_part">
				<h3>Washington</h3>
				<span>26 listings</span> 
			  </div>
			</a> 
		</div>
	  </div>
	  
	  <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="category_container_item_part"> 
			<a href="#" class="category_item_box">
			<img src="images/category-box-06.jpg" alt=""/>
			 <span class="category_item_box_btn">Browse</span>
			  <div class="category_content_box_part">
				<h3>Seattle</h3>
				<span>27 listings</span> 
			  </div>
			</a> 
		</div>
	  </div>
	  
	  <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="category_container_item_part"> 
			<a href="#" class="category_item_box">
			  <img src="images/category-box-07.jpg" alt=""/>
			  <span class="category_item_box_btn">Browse</span>
				<div class="category_content_box_part">
				  <h3>Orlando</h3>
				  <span>22 listings</span> 
				</div>
			</a> 
		</div>
	  </div>
		  
	  <div class="col-md-3 col-sm-6 col-xs-12">
		<div class="category_container_item_part"> 
			<a href="#" class="category_item_box">
			 <img src="images/category-box-08.jpg" alt=""/>
			 <span class="category_item_box_btn">Browse</span>
			  <div class="category_content_box_part">
				<h3>Miami</h3>
				<span>12 listings</span> 
			  </div>
			</a> 
		</div>
	  </div>
	</div>
    </div>
  </div>

For more information, please visit http://getbootstrap.com/css/#grid

Google Maps API :-

To get started using the Google Maps click the button below, which guides you through the process of activating the Google Maps JavaScript API and any related services automatically.

Maps API Key

Then paste your key to the Google API script at the bottom of HTML file:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>

Map Locations :-

Map locations are stored in maps.js file:

var locations = [
 
	// Sample
	[ locationData(
	  locationURL,
	  locationImg,
	  locationTitle,
	  locationAddress,
	  locationRating,
	  locationRatingCounter'),
	  LocationLatitude,
	  LocationLongitude,
	  1,
	  ''
	],
	 
	// Locations
	   [locationData('page1.html','images/imges1.jpg',"Title 1",'Address 1', '3.5', '1'), 40.90, -74.10, 1, '']
	   [locationData('page2.html','images/imges2.jpg',"Title 2",'Address 2', '3.5', '1'), 42.90, -76.10, 2, '']
	];

Color Version :-

You can use one of predefinied colors or build custom CSS with color you want.

<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />  
<link rel="stylesheet" href="css/stylesheet_1.css" type="text/css" />  
<link rel="stylesheet" href="css/stylesheet_2.css" type="text/css" />  
<link rel="stylesheet" href="css/stylesheet_3.css" type="text/css" />  
<link rel="stylesheet" href="css/stylesheet_4.css" type="text/css" />  
<link rel="stylesheet" href="css/stylesheet_5.css" type="text/css" />

Slick Carousel :-

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container
element <div class="utf_simple_slick_carousel"> .Class "utf_simple_slick_carousel" is mandatory to apply proper styles.

<div class="utf_simple_slick_carousel">
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
</div>

For more informations, please visit http://kenwheeler.github.io/slick/

Magnific Popup :-

Lightbox Single Image

<a class="utf_image" href="single-listing.jpg" title="single-listing"><img src="single-listing.jpg"></a>

Lightbox Gallery

<a class="utf_gallery" href="single-listing-01.jpg" title="The Cleaner"><img src="single-listing-01.jpg"></a>
<a class="utf_gallery" href="single-listing-02.jpg" title="The Cleaner"><img src="single-listing-02.jpg"></a>
<a class="utf_gallery" href="single-listing-03.jpg" title="The Cleaner"><img src="single-listing-03.jpg"></a>

Popup With Video

<a class="utf_vimeo" href="https://www.youtube.com/watch?v=5cY5PHE4x_g" title="The Cleaner">YouTube Video</a>
<a class="utf_youtube" href="https://vimeo.com/80977329" title="The Cleaner">Vimeo Video</a>

Footer Structure :-

<div id="footer" class="footer_sticky_part">
    <div class="container">
      <div class="row">
        <div class="col-md-2 col-sm-3 col-xs-6">
          <h4>Useful Links</h4>
          <ul class="social_footer_link">
            <li><a href="#">Home</a></li>
            <li><a href="#">Listing</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-6">
          <h4>My Account</h4>
          <ul class="social_footer_link">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">My Listing</a></li>
            <li><a href="#">Favorites</a></li>
          </ul>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-6">
          <h4>Pages</h4>
          <ul class="social_footer_link>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Our Partners</a></li>
            <li><a href="#">How It Work</a></li>
            <li><a href="#">Privacy Policy</a></li>
          </ul>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-6">
          <h4>Help</h4>
          <ul class="social_footer_link">
            <li><a href="#">Sign In</a></li>
            <li><a href="#">Register</a></li>
            <li><a href="#">Add Listing</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
        <div class="col-md-4 col-sm-12 col-xs-12"> 
          <h4>About Us</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>          
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-12">
          <div class="footer_copyright_part">Copyright © 2019 All Rights Reserved.</div>
        </div>
      </div>
    </div>
  </div>

Javascript Intialization :-

Core javascript initialization implemented in ../js/waypoints.min.js thorugh object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics.

You can call any of the available functions by objects.

<!-- Scripts -->
<script type="text/javascript" src="scripts/jquery-3.4.1.min.js"></script>  
<script type="text/javascript" src="scripts/chosen.min.js"></script> 
<script type="text/javascript" src="scripts/slick.min.js"></script> 
<script type="text/javascript" src="scripts/rangeslider.min.js"></script> 
<script type="text/javascript" src="scripts/magnific-popup.min.js"></script> 
<script type="text/javascript" src="scripts/jquery-ui.min.js"></script> 
<script type="text/javascript" src="scripts/mmenu.js"></script>
<script type="text/javascript" src="scripts/tooltips.min.js"></script> 
<script type="text/javascript" src="scripts/color_switcher.js"></script>
<script type="text/javascript" src="scripts/jquery_custom.js"></script>

Source Credits :-

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

If you have a more general question relating to the themes on ThemeForest, basic HTML/CSS/JavaScript related questions, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Best Regards
U-Listing