ListOn - Directory & Listing HTML Template

Created: Nov 22, 2023
By: easital_tech
Email: easital.theme@gmail.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!

# Introduction

ListOn is an intuitive and clean HTML-based template crafted exclusively for directory and listing websites. Ideal for business, organizations and individuals seeking to showcase their listings, ListOn offers a sophisticated and feature-rich solution. ListOn ensures you make a compelling online listing presence to captivate potential customers, clients and visitors. This versatile template can be effortlessly customized to suit your unique requirements or business needs.

Boasting a contemporary and clean design, ListOn guarantees a seamless user experience, allowing visitors to effortlessly navigate through property listings and discover their ideal home or investment opportunity. Developed with the latest web technologies, including HTML5, CSS3, and Bootstrap 5, ListOn ensures a fully responsive and mobile-friendly layout across various devices. Its adaptability makes it a go-to choice for a wide range of real estate agencies and businesses.

# Changelog

Nov 24, 2023

- Release v1.0

  • Initial release

Dec 21, 2023

- Release v2.0

    • Add: Add dashboard feature (light & dark) New
    • Update: Update home (waves) masonry ui
    • Update: Update some CSS issue
    • Fixed: Fixed filter (for mobile) dropdown issue

Dec 31, 2023

- Release v2.1

    • Add: Add Home page (Car), List car with map and Listing details (Car) New
    • Update: Update some CSS issue

Jan 10, 2024

- Release v2.2

    • Add: Add dark mode
    • Add: Add RTL
    • Update: Update some CSS issue
    • Update: Update some js issue

Jan 15, 2024

- Release v2.3

    • Add: Add Home page (Restaurant) New
    • Update: Update some CSS issue
    • Update: Update some js issue

Feb 11, 2024

- Release v2.4

    • Add: Add Blog Video, Audio, Galary, Archive pages New
    • Add: Add blog comments form section
    • Update: Update some CSS issue
    • Update: Update some js issue

Apr 16, 2024

- Release v2.5

    • Add: Add Submit rider page New
    • Add: Add Dashboard invoice
    • Update: Update some CSS issue
    • Published template at this demo url

# Features

  • Powered by HTML5, CSS3 & jQuery
  • 08 engaging homepage styles
  • Included user dashboard
  • Dark & RTL mode
  • Extensive maps integration based on Snazzy Maps
  • Dedicated pages for listing details (2 variants)
  • Listing page with user-friendly search, filter, categories, and half-map
  • Fully responsive layout for desktops, tablets, and mobile devices
  • Built with the latest Bootstrap 5 for optimal performance
  • Well-structured and commented code for easy customization
  • Utilizes Font Awesome Fonts Icons
  • Free licensed Google font for a visually appealing typography
  • Comprehensive sections, including Blog Post Page, Director Listing Page, and Agent Page
  • Integration of Snazzy Google Maps for enhanced property location visualization
  • Easy customization to tailor the template to your specific needs
  • W3C Valid, Clean, and Commented Code for optimal performance
  • Cross-browser compatibility ensures a seamless experience for all users
  • Retina ready for enhanced visual quality
  • Minimal and Clean Code for an elegant and efficient design
  • AOS Animations for a visually engaging experience
  • SEO-friendly Code for improved search engine visibility
  • Documentation included for easy setup and customization
  • And Much More...

# HTML Structure

HTML Structure

This theme is a fixed layout with four columns. All of the information within the body content area. The general template structure is the same throughout the template. Here is the general structure.

# CSS Structure

I'm using two CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

# JavaScript

JavaScript Structure

This is our Javascript files structure.

# File Structure

File structure

HTML, css and javascript files included.

liston-main.zip
├── assets/
├── dashboard/
├── rtl/
├── 404.html
├── about.html
├── about-2.html
├── add-listing.html
├── agent.html
├── agent-details.html
├── blog.html
├── blog-archive.html
├── blog-details.html
├── blog-post-audio.html
├── blog-post-galary.html
├── blog-post-video.html
├── contact.html
├── faq.html
├── forgot-password.html
├── home-car.html
├── home-classic.html
├── home-grid.html
├── home-map.html
├── home-restaurant.html
├── home-rounded.html
├── home-waves.html
├── index.html
├── listing-details.html
├── listing-details-2.html
├── listing-details-car.html
├── listings-grid-1-left.html
├── listings-grid-1-right.html
├── listings-grid-2-left.html
├── listings-grid-2-right.html
├── listings-list-left.html
├── listings-list-right.html
├── listings-map.html
├── listings-map-car.html
├── listings-map-grid-1.html
├── listings-map-grid-2.html
├── pricing.html
├── sign-in.html
├── sign-up.html
├── style-guide.html
├── terms-conditions.html
└── two-factor-auth.html
liston-main.zip
├── assets/
│   ├── css/
│   ├── documentation/
│   ├── img/
│   ├── js/
└────── plugins/

plugins/
├── aos/
├── bootstrap/
├── counter-up/
├── fontawesome/
├── ion.rangeSlider/
├── jQuery/
├── jquery-fancyfileuploader/
├── macy/
├── magnific-popup/
├── OwlCarousel2/
├── select2/
├── select2-bootstrap-5/
├── simple-parallax/
├── theia-sticky-sidebar/
└── waypoints/

# Sources and Credits

I've used the following images, icons or other files as listed.

  1. Bootstrap : Build fast, responsive sites with Bootstrap http://getbootstrap.com/

  2. Google fonts : Wix Madefor Display https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&display=swap

  3. Google fonts : Caveat https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap

  4. jQuery : fast, small, and feature-rich JavaScript library. http://jquery.com/

  5. Unsplash : The internet’s source of freely useable images. Powered by creators everywhere. https://unsplash.com/

  6. Freepik : All the assets you need, in one place creators everywhere. https://www.freepik.com/

  7. Flaticon : Access 12.4M+ vector icons & stickers https://www.flaticon.com/

  8. unDraw : https://undraw.co/

  9. Magnific Popup : Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js). https://dimsemenov.com/plugins/magnific-popup/

  10. Font Awesome : https://fontawesome.com/

  11. AOS : Animate On Scroll Library https://michalsnik.github.io/aos/

  12. Ion.RangeSlide : Easy to use, flexible and responsive range slider with skin support http://ionden.com/a/plugins/ion.rangeSlider/

  13. jQuery Fancy File Uploader : A jQuery plugin to convert the HTML file input type into a mobile-friendly fancy file uploader. Choose from a MIT or LGPL license. https://github.com/cubiclesoft/jquery-fancyfileuploader

  14. Counter-Up :Counter-Up is a jQuery plugin that animates a number from zero (counting up towards it). It supports counting up: https://github.com/bfintal/Counter-Up

  15. Select2: The jQuery replacement for select boxes. https://select2.org/

  16. Select2 Bootstrap 5 Theme : Get started with the Select2 Bootstrap 5 theme, the look of Bootstrap 5, with the functionality of Select2. https://apalfrey.github.io/select2-bootstrap-5-theme/

  17. Theia Sticky Sidebar :https://github.com/WeCodePixels/theia-sticky-sidebar

  18. Owl Carousel 2 : Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. https://owlcarousel2.github.io/OwlCarousel2/

  19. Waypoint : Waypoints is the easiest way to trigger a function when you scroll to an element. http://imakewebthings.com/waypoints/

  20. Snazzy Maps : https://snazzymaps.com/

  21. Toastr : Simple javascript toast notifications https://codeseven.github.io/toastr/

  22. APEXCHARTS.JS : Modern & Interactive Open-source Charts https://apexcharts.com/

  23. DataTables : Add advanced interaction controls to your HTML tables the free & easy way https://datatables.net/

  24. metismenu : A collapsible jQuery menu plugin https://github.com/onokumus/metismenu

  25. perfect-scrollbar : Minimalistic but perfect custom scrollbar plugin https://github.com/mdbootstrap/perfect-scrollbar

# Customization

  1. How do I open the template?

    The template is 100% ready to use, with no compilation needed. Just unzip, go to the html folder and open the index.html file in your browser using a development server

  2. How do I start a simple local development server?

    Make sure you have the latest PHP version installed. Then go to the html folder and run the php -S localhost:4000 command from the console. You should see the template running at http://localhost:4000

  3. How do I install/uninstall a dependency with Bower?

    Run bower install <dependency-name> --save. After this then you should add the installed dependencies to the .html files.

  4. I have a question, but it is not listed here, what can I do?

    Send us an email to easital.theme@gmail.com or contact us through our Theme Forest profile and we'll do our best to try to help you.

  5. I would like to see a new plugin installed or functionality developed in Kernel, is it possible?

    We are always trying to improve and adding new functionalities and plugins to ListOn - Directory & Listing HTML Template , so every request is welcomed and will be evaluated.

  6. I found a bug, what can I do?

    Please let us know and we'll do our best to fix it as soon as possible

  7. Are updates free?

    Yes, they are and always will be