Back to top

Lemonado Documentation v 1.2.3

Lemonado Documentation v 1.1 is here

Thank you so much for purchasing

Lemonado - Multi-purpose HTML5 & CSS3 Mobile Web Application!

This document covers the installation and use both of the HTML and PHP versions of this application and reveals answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties.

Get started!


 

Retina Ready Images: How it works

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

For example, if you have an image on your page that looks like this:

<img src="/assets/img/logo.png" />

The script will check your server to see if an alternative image exists at this path:

"/assets/img/logo@2x.png"

How to

For Retina support it's recommended to use a double-sized image (with @2x at the end of file name) in the same folder with the normal size image.

  1. Put both images (normal and 2x) in the same folder.
  2. Include your img on page and point to normal sized image (without @2x) like:

    <img src="/assets/img/logo.png" />

 

Getting started

Installation

Firstly, unzip the downloaded file to a directory on your computer. It contains a folder named lemonado. You will find the HTML and PHP folders inside it. Choose the version you want to install (PHP or HTML) and upload the folder contents via ftp to any directory on your server. Lemonado supports installation in root folder, into any sub-directory on your server or in sub-domain.

 

Comparison table

Comparison table of the HTML and PHP versions

HTML Version PHP Version
Works on any host

yes

yes
Requires PHP5+

Unlimited Color Schemes

yes

yes

Unlimited Pages

yes

yes

Valid HTML5

yes

yes

New Items Bubble Counter

yes

yes

Custom Error Pages

yes

yes

Compatibility With jQuery Mobile Widgets

yes

yes

HiDPI (Retina ©) Images Ready

yes

yes

Disqus © Comments System

yes

yes

Contact Forms

yes

yes

Custom Admin Page With Options Panel

yes

yes

Settings Storage

yes

yes

Connecting WordPress-based blog

yes

yes

 

Requirements

  • Apache (IIS) HTTP Web Server
  • PHP 5+ (for PHP version)

 

Activation

Once you uploaded all files to your server, you need to activate Apache's custom error pages handler and deny access to the settings.xml and config.php file. This is an optional step, but it's highly recommended.

  1. Info. For Apache Web Server.

    Rename the .htaccess.txt file in root to .htaccess

    Info. For IIS.

    Add to the IIS's web.config file the code provided inweb.config file

  2. The files contain paths to the custom error pages such as 404.php.

  3. If you installed your application into a sub-folder you must to define right paths to the error pages in the .htaccess or web.config file. For example: your application is installed into the lemonado sub-folder and available at http://yourdomain.com/lemonado. Your .htaccess file would be like that:

  4. 5

    Note: This way you can define additional pages for any server errors. For example, you can create a new 401.php (401.html) file and define it in the .htaccess (web.config) file. You can find the full list of of HTTP status codes here.

  5. Info. For PHP version only. Go to the /lib folder and rename the .htaccess.txt file to .htaccess

    This file will block access to your settings.xml from world.

  6. Important! It's strongly recommended to remove read permissions (x00 value) from the lib/settings.xml and config.php files to prevent them from reading/stealing.

 

Main Files/Folders Description

Info. For PHP version only.
  • config.php file. This is a main file. It defines the absolute and relative paths to the files and reads the settings.xml file with settings.

  • 4xx.php or 5xx.php files. These files are templates for web server's errors.

  • index.php. This is a Home Page of your web application.

  • /assets folder. This folder contents styles, images and scripts.

  • /lib/settings.xml file. This file contains all settings for your application.

  • /templates folder. This folder contains the header, footer and panels templates for all pages.

  • /web.config file. This file contains the Microsoft IIS error pages handler code.

  • /.htaccess file. This file contains the Apache Web Server error pages handler code.

Info. For HTML version only.
  • 4xx.html or 5xx.html files. These files are templates for web server's errors.

  • index.html. This is a Home Page of your web application.

  • /assets folder. This folder contents styles, images and scripts.

  • /web.config file. This file contains the Microsoft IIS error pages handler code.

  • /.htaccess file. This file contains the Apache Web Server error pages handler code.

Setting up pages

Lemonado is based on the newest jQuery Mobile 1.4 framework and absolutely compatible with it. This means that you are able to use any jQuery Mobile's Widgets on any page from this widget reference page. Please read this reference accurately before edit any page. Jquery Mobile and Lemonado provide wide range of widgets on any taste, from pretty pop-ups to nice dialogs, from custom form inputs to beautiful list styles. All widgets are flexible and has many settings.

Login to Admin Panel

Info. For PHP version only.
  • Admin page is available on www.youraddress.com/login.
  • Go to the admin page and enter the password. Default password is set to admin. You can change your password at any time.
  •  

    1

    Define your site color, Disqus shortname (see Comments tab), your email, address, etc. to make your site ready.

    Note: Password is stored in XML file in encrypted mode. For safety purposes once encrypted it can't be decrypted. If you lost your password the only way to reset it is edit XML file.

    To reset password to admin you have to:

  1. Open the settings.xml file in your favorite editor. You can find it in the /lib folder.

  2. Find the first ‹setting› node

  3. and paste $1$7i0.CS5.$aUU71yM.XWRQ5jq7TG0TD0 value to according ‹value› node like:

     

    2

 

Setting Up Pages

To set up new page you need to create new template file or edit existing template file. There is a default.php/default.html file you can use as the reference for new pages. There are more than 20 page templates included already.

For example to edit Home Page you just need to edit the index.php/index.html file.

Info. For PHP version only.

All Lemonado pages has similar structure:

<!DOCTYPE html>
	<html>
	<head><meta charset="UTF-8">
		<title>Your Title Here</title>
	<?php require_once ('config.php'); ?>
	<?php include (ROOT_DIR.'/templates/header.php'); ?>
	<div data-role="page">
		<?php include (ROOT_DIR.'/templates/panel-left.php'); ?>
		<?php include (ROOT_DIR.'/templates/panel-right.php'); ?>
		<div id="header" data-role="header" data-position="fixed" data-theme="c">
			Header Content (Do not forget to change your title here)
		</div><!-- /header -->
		<div data-role="content">
			<div class="container">
				Page Content Goes Here
			</div>
	<?php include (ROOT_DIR.'/templates/footer.php'); ?>

Lemonado uses PHP variables to define the relative and absolute paths to the files and URLs. Use the ROOT_DIR variable when including files. For example:

<?php include (ROOT_DIR.'/templates/header.php'); ?>

And use the ROOT_URL variable for URLs. For example:

<img src="<?php echo ROOT_URL; ?>/assets/img/logo.png" alt="Logo">

Note: Include your custom files after the config.php file. In other words the config.php must be the first in a sequence

 

Slider

Slider mark-up has the following code:

<div class="owl-carousel">
	<div class="item">
		<img src="" alt="">
	</div>
	<div class="item">
		...
	</div>
	<div class="item">
		...
	</div>
</div>

Slider can be inserted into any page, not only home page. You need to add the owl-carousel class to a div and append img tags to a divs with item class. That all.

Note: Do not include more than one slider per page. It may cause page errors or make slider do not workable.

Advertisement mark-up has the following code:

<div class="advertisement-468-60">
	<img src="..." alt="Advertisement">
</div>

Advertisement can be inserted into any page, unlimited times.

Google Map

Lemonado supports static Google Maps. Here is a code that takes an address value, zoom value, map type and marker from settings storage:

<div class="map">
	<img src="https://maps.googleapis.com/maps/api/staticmap?center=<?php echo rawurlencode($map_address); ?>&amp;maptype=<?php echo $map_type; ?>&amp;zoom=<?php echo $map_zoom; ?>&amp;size=468x350&amp;markers=<?php echo rawurlencode($map_address); ?>&amp;sensor=false" width="468" height="350" alt="Google Map">			
</div>

See the information.php for the reference.

For more information how to use Google Static Maps visit Static Maps API V2 Developer Guide.

Disqus

Lemonado uses Disqus comments system. It's a 3rd-party comments system. Before you can use and moderate comments on pages, you must sign up on Disqus.

Setting Up Comments

To install Disqus, you will need to know your site shortname as registered on Disqus. You can find it in your settings panel on disqus.com

3

 

Info. For PHP version only.

The easiest way to set your site shortname is to do it via admin settings panel (see Setting up pages tab). You will find the "Disqus Shortname" field there.

Another way is edit the templates/header.php file. Find the following line and paste your value:

var disqus_shortname = 'YOUR_VALUE'; // Required - Replace YOUR_VALUE with your site shortname

Set up finished!

Info. For HTML version only.

To set your site shortname in HTML version you need to edit assets/js/custom.js. Find and edit the following line (line №253):

var disqus_shortname = 'lemonado'; // Required - Replace lemonado with your forum shortname

Set up finished!

 

Showing Comments

Paste the following code on page where you want to comments show:

<div class="disqus-wrap disqus-inactive"></div>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Note: Do not include more than one comments section per page. It may cause page errors or make comments do not workable.

Description

Every time you are adding new post, article, news etc. you can inform your guests about it. When a user visited the site for the first time, the information about current number of articles is stored in his browser. This information is unique per user. User will not see any counters until you add a new article. Storage time-to-live is limited and expires after 10 days.

Info. For PHP version only.
You can change TTL in settings panel or edit assets/js/custom.js file manually.

Info. For HTML version only.
You can change TTL editing assets/js/custom.js file manually.

6

 

4

 

Setting Up

Note: Counters are available for top-level menus only. Adding counter to a sub-menu may cause errors.

Info. For PHP version only.
  1. Open the templates/panel-left.php file in your favorite editor.

  2. Add the countable class and ID to a menu list item you want to track. Example:

  3. <li id="your_id_here" class="countable">...</li>
    
  4. Add the data-count attribute to a link. Example:

  5. <li id="menu_news" class="countable">
    	<a data-count="3" href="...">Menu Item Name</a>
    </li>
    
  6. Change the data-count value to a value that represents the current number of items on page you are tracking. Do it every time you are adding new items on the page.

Info. For HTML version only.
  1. Add the countable class and ID on every page of your application to a menu list item you want to track. Menu list is an ul wrapped in the div with left_panel ID. Example:

  2. <li id="your_id_here" class="countable">...</li>
    
  3. Add the data-count attribute to a link. Example:

  4. <li id="menu_news" class="countable">
    	<a data-count="3" href="...">Menu Item Name</a>
    </li>
    
  5. Change the data-count value to a value that represents the current number of items on page you are tracking. Do it every time you are adding new items on the page.

Description

Do you have a WordPress-based site/blog? Lemonado can be connected to any WordPress installation! Put your copy of the Lemonado on any folder on a server where your WordPress is installed, define path to the wp-blog-header.php file and...done! For the reference see the wp-posts.php file. In this file you will see how I defined path to my own WordPress blog.

Info.
Please use an absolute path the wp-blog-header.php. You can view your current absolute path to the Lemonado folder on the Wordpress page.

 

Functions

Now you can use the whole power of your Wordpress blog! You can run fully-functional WordPress' Loop, change posts structure/layout and much more. The standard loop example you can see in the wp-posts.php file, but you can change a WordPress' query to output custom category, posts, taxonomy, et cetera! For the manual/examples see The Loop and WP_Query documentation.

Programming skills required.
Please note it may require some programming skills. Please ask help from any person familiar with WordPress or PHP programming or drop me a line if you are not sure.

Optional Panel

Info. For PHP version only.

Lemonado has the optional panel with settings stored in XML file.

Here is a list of currently supported options:

  • Collapsible
  • Text field
  • Checkbox field
  • Password field
  • Radio field
  • Color field
  • Email field
  • Number field
  • Range Slider field
  • Switch On/Off field
  • Telephone Number field
  • URL field
  • Select field

 

Adding Options

If you want resell the web application or just make it more comfortable you are able to add new options easily.

To add a new option you have to:

  1. Open the lib/settings.xml file in your favorite editor.
  2. Add new <setting> node like:
  3. <setting>
    	<id>...</id>
    	<type>...</type>
    	<title>...</title>
    	<description>...</description>
    	<value>...</value>
    </setting>
    
  4. Add unique ID, choose type of option from the list below, add the title and description. Value field is used for the first initial (default) value. Leave blank if you are not sure.
    • password (Password field)
    • color (Colour chooser field)
    • number (For numeric inputs)
    • text (Text inputs)
    • range (Range of numbers)
    • select (Select from defined items)
    • switch (On/Off Swither)
    • email (Email Input)
    • url (URL address Input)
    • tel (Tel number Input)
    • radio (Radio select)
    • checkbox (Checkbox select)

    Note: Some options like select, switch, radio, checkbox and range are require additional nodes. You must define them. Look the settings.xml for the reference.

  5. Save the XML file.

To group fields into collapsible section you can use Collapsible type of option. Put all required nodes between the following nodes:

<setting>
	<type>collapsible-start</type>
	<title>General Settings</title>
	<value>...</value>
</setting>
...
<setting>
	<type>collapsible-end</type>
	<title>General Settings</title>
	<value>...</value>
</setting>

This code will group all fields between the nodes into the collapsible field with "General Settings" title.

 

Output Options

How to output saved settings from the XML file to your page? Lemonado creates PHP variable name like according ID node in XML. For example, you have the following piece of code in your XML:

<setting>
	<id>heading_color</id>
	<type>color</type>
	<title>Choose colour for headings</title>
	<description>...</description>
	<value>#000000</value>
</setting>

Paste this code to your page where you want to output color value...

<?php echo $heading_color; ?>

...and you will see #000000 on the page.

As you can see we used the heading_color ID value from the XML as PHP variable. For more examples and reference see the settings-output.php file.

Version 1.2

  1. Updated to the latest jQuery Mobile version. Now it is 1.4.0
  2. Improved the WordPress integration mechanism. Now it support all features of a wp_query function, etc.
  3. + Added swipe events to open panels. Now you can open a panel just swipe right/left.
  4. + Added 'Add to the home screen' bubble on Apple's devices
  5. Changed 'admin' folder name to 'login'
  6. Updated the jStorage script to the latest.
  7. Slightly changed a slider/disqus comments markup
  8. Other improves and fixes.

Version 1.2.1

  1. Fixed Android 4.2.2+ browser issue. Header is stretching 100% of screen height.

Version 1.2.2

  1. Updated the jQuery Mobile script to the latest 1.4.1.
  2. Updated the jQuery script to the 1.10.2.
  3. By default turned off panel open on swipe
  4. Updated the share counter script. Added required API key.

Version 1.2.3

  1. Fixed jQuery Mobile CDN links issue in B-grade browsers.
  2. Updated the jQuery Mobile script to the latest 1.4.2.

Version 1.1

  1. + Added integration with remote WordPress-based blog
  2. + Added ability to group settings in Admin Panel
  3. + Added pagination demo on the Blog and Recipes pages
  4. + Added the error pages handler for a Microsoft IIS
  5. Updated the touch slider script with demo slides
  6. Improved the share counter script
  7. Removed custom Google Analytics code from the PHP version.

Version 1.1.1

  1. Updated the version information

Version 1.1.2

  1. + Added form elements gallery page
  2. Fixed the 403.html page in the HTML version

Version 1.0

  1. - Initial release.