Queen

created: 23/09/2018
latest update: 23/09/2018
by: WM_team
email: team.wamo@gmail.com

The package you downloaded from themeforest include the following structure:

The main HTML file is index.html will open the homepage.

This mobile template can be used to create a mobile website, a web app, and a native app. Depending on your needs you can use this layout to create the desired final product.

You can use this template to create a mobile version of your website. Considering that you main desktop website is not responsive or you want a separate mobile version of it, Queen is a perfect solution to do that.

To create a separate mobile version of your website using this template will require to create a subdomain or a subfolder of your domain (mobile.yourwebsite.com or m.yourwebsite.com) where the main files will be copied.

To redirect users to your new created mobile website you will need to use a redirection code. First you need to add a mobile detection code, and then redirect mobile users to the mobile url.

For more information about mobile detection and redirection check THIS WEBSITE.

To convert this template into a native app you will need to use solutions like phonegap.

"Easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript .

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. "

More about phonegap on their WEBSITE

The main page of this template is index.html file. This is the homepage of your website, the first page the browser will open when users will access your website.


<body class="color-theme-red">
	<div id="app">
		<div class="statusbar"></div>
		
		<!--Panel -->
		<div class="panel panel-left panel-cover panel-menu">
			<div class="page">
				<div class="page-content">
					
				</div>
			</div>
		</div>
		<!-- /Panel -->

		<div class="view view-main view-init ios-edges" data-url="/">
			<div class="page no-navbar">
			
				<div class="page-content">

					<!-- Page Title -->
					<div class="page-title-wrapper">
						
					</div>
					<!-- /Page Title -->
					
					<!--Page Content -->
					
					<!--/Page Content -->

				</div>
			</div>
		</div>

</body>

<div class="page no-navbar">
	<div class="page-content">
		<!-- Page Title -->
		<div class="page-title-wrapper">
			<div class="page-title">
				<h1>Blank</h1>
			</div>
			<a href="#" class="panel-open" data-panel="left"><i class="material-icons">menu</i></a>
		</div>
		<!-- /Page Title -->
		
		<div class="padding-left padding-right padding-bottom">
			<div class="section-content padding-top">
				<!-- Content -->
				<!-- /Content -->
			</div>
		</div>
	</div>
</div>

The Queen template use app.css as the main CSS FILE

At the top of the style.css file there is a "Table of Contents" list that will guide through the CSS code.

/*==============================================
[Main stylesheet app.css]

Author:			WM_Team
Version:		1.0
Created:		18 september 2018
Last updated:	18 september 2018
Template:		Queen - Multipurpose Mobile Template
================================================*/
/*
[Table of Contents]

01. GENERAL
02. LEFT PANEL MENU
03. MAGAZINE
04. BLOG
05. SINGLE POST
06. PHOTOGRAPHY
07. DASHBOARD
08. MOVIES
09. SHOP
10. SHOP LIST
11. SINGLE SHOP PAGE
12. BAG SHOP
13. MESSAGES
14. PROFILE
15. NOTIFICATION
16. COVER PAGE
17. WALKTHROUGH
18. LOGIN,REGISTRER,FORGOT,SUBSCRIBE,SOCIAL LOGIN
19. 404
20. LIST PAGES
21. DARK LAYOUT
*/

Queen use another css files:

framework7.md.min.css file is the script CSS we are using to create the main functionality of the pages. WE RECOMMEND NOT TO EDIT THIS.

icons.css used to display Icons

The template includes more javascript files which are loaded at the end of each index file

<script src="js/framework7.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<script src="js/chart.min.js"></script>
<script src="js/app.js"></script>

1.framework7.min.js

Main core functions for the pages and layout

2.routes.js

JS File to initialize all routes in the app

3.app.js

Custom functions of the template.

4.chart.min.js

Display Charts

5.jquery.swipebox.min.js

A touchable jQuery lightbox

1- Find and download SVG icons from any website like Flaticon and choose your new icons that you want add them to existing icons. For example I will add car and pizza icons.

2- Download the icon as SVG format. Extract the content of the file zip downloaded on your computer hard drive.

3- Open Icomoon app, click the Import Icons button,

4- browse to the SVG folder of the extracted ZIP content, select the icon and import

5- browse to the fonts folder in Queen Project (fonts/Flaticon.svg) to merge the existing icons with the new downloaded.

6- Rename all existing Icons with the same name as named before. (Important)

7- Select the icons and click the Generate font button.

8- Edit the name of the font and prefix class (Important) and download

9- Extract the content of the file zip downloaded on your computer hard drive and open style.css

10- Open the fonts folder in Queen Project and open flaticon.css

11- Replace the lines.

12- Replace the new font generated by the new one.

Queen

Package files content.

Different usage of this mobile template

Creating a mobile website, redirecting from your desktop website to the mobile one

Converting it into a native app

Index page structure

Blank page structure

CSS Files

JavaScript Files

Step by step example of adding new icons

Watch the video

Sources and Credits

CREDIT SCRIPTS

CREDIT IMAGES