DreamsChat - Framework7 HTML Mobile Template Documentation

1. Introduction

DreamsChat Mobile template is built with Framework7. We have also added few reusable components which speedup your development.

2. Template Installation

FTP Upload:

Step 1: Open up your FTP manager and connect to your hosting

Step 2: Upload the files inside Your Hosting folder.

Local Host:

Step 1: You must run with localhost web server like XAMPP, WampServer, AMPPS, and other

3. Font

link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"

4. File Structure

Extract the zip file you received after purchase and you would find the exact below files and folders: 

DreamsChat/ 
│
└── template/ 
	│
	└── assets/           
		│
		└── css/               
		│
		└── fonts/        
		│
		└── img/                 
		│
		└── js/                
		│
		└── plugins/    

		 pages/ 
		│
		└── chat.html/ 
			│
			└── rest of the html pages/ 

		index.html/  

		documentation/

5. Pages

  • index.html
  • about-help.html
  • account.html
  • add-call.html
  • add-group.html
  • call.html
  • chat.html
  • chat-new.html
  • chat-settings.html
  • chat-view.html
  • chat-view-group.html
  • contacts.html
  • create-group-profile.html
  • group.html
  • group-profile.html
  • invite-friends.html
  • notifications.html
  • otp.html
  • profile.html
  • settings.html
  • status.html
  • status-upload.html
  • video-call.html
  • voice-call.html
  • welcome-new-group.html

6. Customization

1. How to Change Site Title


<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui, viewport-fit=cover">
    	<meta name="apple-mobile-web-app-capable" content="yes">
    	<meta name="apple-mobile-web-app-status-bar-style" content="#3a57c4">
    	<title>DreamsChat - Framework7 HTML Mobile Template</title>

    	<-- Favicon -->
    	<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

    	<-- Framework7 CSS -->
    	<link rel="stylesheet" href="assets/css/framework7-bundle.min.css">
    	<link rel="stylesheet" href="assets/css/framework7-icons.css">

    	<-- Fontawesome CSS -->
    	<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    	<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">

    	<-- Main CSS -->
    	<link rel="stylesheet" href="assets/css/style.css">
    	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    </head>
    <body>

    	<div id="app">
    	    <div class="splash-screen">
    	       <div class="splash-logo">
    	           <img="assets/img/logo.png" alt="">
    	       </div>
    	   </div> 
       </div>

2. How to Change Side Panels Directions and Effects


<div class="navbar-inner">
    <div class="left">
    	<a href="#" class="link icon-only panel-open" data-panel="left">
    	   <i class="custom-hamburger"></i>
    	   <span><b</b></span>
    	</a>
    </div>
</div>

3. How to Change Your Menu Title


<div class="sidebar-group left-sidebar chat_sidebar">
    <ul class="nav nav-tabs chat-tabs mt-4">
    	<li class="nav-item">
    	    <a class="nav-link  active" href="index.html">
    	    	Index
    	    </a>
    	</li>
    </ul>
</div>

4. How to Change Font


<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui, viewport-fit=cover">
    	<meta name="apple-mobile-web-app-capable" content="yes">
    	<meta name="apple-mobile-web-app-status-bar-style" content="#3a57c4">
    	<title>DreamsChat - Framework7 HTML Mobile Template</title>

    	<-- Favicon -->
    	<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

    	<-- Framework7 CSS -->
    	<link rel="stylesheet" href="assets/css/framework7-bundle.min.css">
    	<link rel="stylesheet" href="assets/css/framework7-icons.css">

    	<-- Fontawesome CSS -->
    	<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    	<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">

    	<-- Main CSS -->
    	<link rel="stylesheet" href="assets/css/style.css">
    	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    </head>
    <body>

    	<div id="app">
    	    <div class="splash-screen">
    	       <div class="splash-logo">
    	           <img="assets/img/logo.png" alt="">
    	       </div>
    	   </div> 
       </div>

7. Important Notes

Need a help, How to configure the DreamsChat HTML Mobile Template into Android and iOS platform?
Get reference on Framework7

8. Credits

We've used the following resources as listed. These are some awesome creation and we are thankful to the community.

Plugin Link
Jquery https://jquery.com/
Font Awesome https://fontawesome.com/
Framework7 https://framework7.io/docs/

9. Change Log

1.0.0 24 July, 2020

Initial Version

10. Fupport

If you have any queries please contact us through email: [email protected]

11. Thank You

Thank you so much for using this template

Dreamguy's Technologies Pvt Ltd,