Overview


Creative Management System Simple and Lite (CmsLite) Version v1.3.1

CmsLite is a complete template, style or theme building system, built around a bespoke template engine. A multitude of features are incorporated for making templates on the fly for the Content system built around it. CmsLite has been built, to remove the complication that surround making new designs for different websites making it available not just for web professionals but for everyone.

This is the first major release of CmsLite and we have put it through thorough testing so that you receive the best service for your requirements.


Please click on all images for a larger view.

Features


  • Bespoke Template Engine (Anyone with a small amount of HTML, CSS knowledge will be able to make a template)
  • Ultimate Template System (Administrator configuration system incorporating everything below..)
    • Complete template Cache (Fast Cache system that can be turned off or on)
    • Clone Templates (Clone any CmsLite Template, rename and redesign it)
    • Export Styles (Export a template as a single file, save to computer or on your site)
    • Import Styles (Import, exported styles upload to different sites)
    • Edit Template Files (Edit any of your site templates files)
    • Delete Templates (Delete any template folders from your site)
    • Templates (Install, remove or set templates as your default)
    • Template Features (There are a great many more features incorporated within the Ultimate Template System)
  • Back Up Features (BackUp your Whole Website including Files, Images and your database)
  • Dynamic Pages (Add, edit and delete page content)
  • Dynamic Menus (Add, edit and delete Menus)
  • Sort Menus (Menus items can be placed in the order you wish including down one level)
  • Event Calendar (Add, edit, delete, view and update calendar Events)
  • Admin Notes (Set Notes for reminders next time you log on)
  • Statistics (Information regarding settings of your site.)
  • FileManager (Keep all of your images, files and pdfs' in one place)
  • Code Elements (Style your site with our dynamic and resourceful Code Elements)
  • Responsive Layout (Works on Mobiles, Tables and large Pcs'
  • WYSIWYG Editor (Design your pages with our built in Code Editor)
  • Language Controller (Add your own Languages and translate the eglish file to your created language )
  • Multilingual (Only one language file to translate into your own language)
  • HTML 5 (All HTML pages have been checked and validated)
  • Disable Site (Allow visitors to see a predefined page with a count down to when you site is back up)
  • Dynamic Help (Help guide on all Admin Pages)
  • Loads More Fetures (Many more built in features within the CmsLite)
  • Hundreds of Fonts (Font Awesome and Line Icons)
  • Bootstrap (Latest version of Twitters Bootstrap)

Installation


Below is a complete guide on how to install CmsLite to you server.

System Requirements

  • Server Requirements

    • A webserver or web hosting account running on any major Operating System with support for PHP
    • Linux/FreeBSD/Windows OS server platform
    • Apache 2.0 or above (mod_rewrite module installed)
    • MySQL 5.1 or above
    • PHP 5.3 or above (GD lib, XML lib, FreeType installed)
  • Php requirements

    • At least PHP 5.3
    • Remote FTP support
    • Imagemagick support
    • GD support
  • Local Host

    • XAMPP - multi-platform - Apache, MySQL, PHP, installation. (free)
    • LAMP - Linux platform - Apache, MySQL, PHP, installation. (free)
    • WAMP - Windows platform - Apache, MySQL, PHP, installation. (free)
    • In addition Mamp is available for Osx but it not free

Mysql Database

If you already have an empty database and you don't want to setup the software into new database you can skip this step and proceed to script upload. Otherwise, keep up reading to learn how to create a new database on your server.

Basically, there is one of three ways to create a new database on your server:

  • via cPanel
  • via phpMyAdmin
  • via SSH

If you are not sure what cPanel, phpMyAdmin, or SSH is, please contact your hosting company. They will give you at least one of those accounts. Below is the detailed description of each method described.

Method #1: cPanel

Creating new database using cPanel (you hosting account control panel) is the easiest and the fastest way and is considered the default way. If you are not experienced in installing scripts, please stick to this method.

  • Go to MySQL Databases section.
  • Enter database name and click Add Db button. This will create new database.
  • Enter username and password and click Add User button. This will create new user. Please remember these credentials since you will need them later when running installation script.
  • Add newly created user to the newly created database with ALL privileges.
  • Here is a link for a video showing the above procedure Add a cpanel Database Video
Method #2: phpMyAdmin

phpMyAdmin is another way to create new database. But you must have enough correct permission to do that in phpMyAdmin.

  • Open phpMyAdmin in your browser. If you're not sure what the URL is, please contact your hosting company.
  • Enter database name into Create new database field and click Create button. This will create new database.
  • Select newly created database and go to SQL section.
  • In the query text field enter this query:
GRANT ALL PRIVILEGES ON database_name.* TO database_username@localhost IDENTIFIED BY 'password' WITH GRANT OPTION;

IMPORTANT! Don't forget to replace database_name, database_username, and password with actual database name, username, and password when running this query. Go to SQL section again and run this query:

FLUSH PRIVILEGES;

Here is a link for a video to show you how to achieve this it is slightly different but achieves the same result Add a Phpmyadmin Database Video

Warning! Some Hosts do not Allow you to create databases through PHPMyadmin.

By following the instructions of one of the methods above you should now have a new database created on your server.

Upload CmsLite

You will need a couple of extra scripts (if you do not have them already) before uploading CmsLite to your server

  • A zip program - normally windows and macs have these programs already.
  • An FTP Program - filezilla is free and very easy to use
  • There are many tutorials on how to upload a script with FTP or Cpanel.

Unzip the download package somewhere you remember on your hard drive (e.g. Desktop, once uploaded feel free to move whereever you please)

The next step is to use an FTP program (Filezilla is free and is more than capable of doing what is required). Create a site account for your website then using your normal login details, logon to your web server. Now you can copy all the folders and files over from the CmsLite live folder to the public_html folder on your web server. If you are unsure as to what to do please contact you web server provider for help.

Setup Wizard

Step One

Step one of the installer is a starting page as shown below from here just click on the Start Button

Fig.1 - Step One

Step Two

Step two gives you some details about your server, if everything looks OK click the continue button.

Fig.2 - Step Two

Step Three

Step three connects you to your database.

Enter you mysql database details that you created early once you have entered your database credentials you can test the connection.

If everything is good to go then click the next step. (Database prefix - is for a more advanced user and is not necessary for standard database connection)

Fig.3 - Step Three

Step Four

Step Four Allows you to add your administrators username and password and your contact e-mail address. In addition you can add your website name and a description of what your site is about

The Domain and script path will be added automatically by the set up wizard and are used throughout your site. (You do not need to fill out these details)

Fig.4 - Step Four

Step Five

Step Five informs you that all settings have been entered and the wizard will now add all of your database information, then create a config file and update your .htaccess file with all of the correct information.

Fig.5 - Step Five

Step Six

Step Six (once all the information has been added correctly), the final step, will allow you to either go to your main site or login to your Administrators page (remember to remove the Install folder for security reasons)

Check out our Admin page tutorial for anything you might require additional help for.

Fig.6 - Step Six

Admin Pages


The Admin Pages can only be reached by typing into your browser http://www.yourwebsite.com/admin/ (replace yourwebsite.com with your website name).

You will need the login details that you created during the installation and enter them in the login form.

Fig.7 - Login Form

Admin Dash Board

Once you have logged in successfully you will then see the Admin Dash Board page.

This page has some features that are available on all pages e.g. header, menu and footer, however, there are other available features that we will discuss next.

Fig.8 - Admin Index Page

Site Statistics

These are a quick view of some of your site settings, web server set up and information relating to certain elements of your site, for example which version of CmsLite you are using.

Fig.9 - Admin Statistics Information

Admin Notes

Admin Notes allow you to make priority notes for yourself with whatever you decide to leave a note for. They will appear last note first to be shown but the date of the note is apparent on the note itself.

Figure Two shows the form to fill out after clicking on Add New Note.

Fig.10 - Admin Notes View

Figure Eleven shows the form to fill out after clicking on Add New Note. The form allows you to add a name for the note, any content you wished to be displayed and how important the note is.
The date is added automatically once the new note is created.

Fig.11 - Add Note Form

Clicking on the X of a note will show the delete note popover allowing you to decide if you wish to delete a Note.

Fig.12 - Delete Note
Fig.13 - Delete Note Popover

Event Calendar

Our Event Calendar keeps you up to date with any plans, occasions or work that needs to be scheduled and is available as soon as you login to your site.
In addition, each event can be assigned a different colour for when you have numerous events showing at once.

Fig.13 - Event Calendar

Add an Event

Click the 'Add Event Button' a new form will allow you to add a title for your event and a start date and time and an end date and time,
you will also be able to choose a colour for the event and finally your event content can be added including images, links and different typography effects.

Check out the images below for more information

Fig.14 - Add an Event - Dates
Fig.15 - Add an Event - Time
Fig.16 - Add an Event - Color
Fig.17 - Add an Event - Content

Show Event

Click on an event in the main calendar and the event will appear showing all of its content. you can also edit or delete this event from the popover.
Fig.18 - Viewing Event Content

Edit Event

The Edit button will open the edit event form, this form looks exactly like the Add an Event form but the event information appears in the boxes.
This allows you to easily change the section your require to edit

Fig.19 - Edit Event Form

Delete Event

On the View event form you can also Delete the Event. This Cannot be undone so only DELETE if you are completely sure

Fig.20 - Delete Event Form

Ultimate Template


The Ultimate Template System allows the administrator of a CmsLite Site to create edit and design their own templates with ease and completely through the back end of the site.
In addition they can export templates as a single file, import them and even clone a complete template.

Fig.21 - Templates

All of these features are accessible by the template links drop down shown in Figure 22, below is a more in depth explanation of each feature

Fig.22 - Template Links

Template Configuration

Configuring parts of the template system is quite straight forward, the quick links allow your to add simple button links to the main template
page rather than using the drop down selection. The Cache settings are again easy to use, turn the cache on or off, how long cache files should be
used before being renewing (this number is in seconds) and finally the name of the folder to store your cache files. (This folder can be found in your Root Directory)

Fig.23 - Template Configuration

Cache System

The cache system only caches the frontend of your site making viewing pages faster. The Cache page also allows you to instantly delete all of the cache
files at once or delete individual files from your cache folder. (Remember if cache is on and you have edited any template files the cache has to be deleted)

Fig.24 - Template Cache

Clone Templates

Fig.25 - Cloning Templates

Click on the template you wish to clone as shown in Fig. 25 (if you have more installed templates them these would additionally show here.)
A new box appears as shown in Fig.26 this allows you to input a new name for the template.

On clicking the clone style button here the template will be created and installed into your site (Remember the template will not be shown to
any visitors of your site they can only see the set defult template

Fig.25 - Cloning a Template
Fig.26 - Renaming a Cloned Template

Export a Template

Exporting a template allows you to save that template as a single file ,meaning all your folders, images and files will be placed together into a single file.
The single file is very small, smaller than a zipped file (because it is compressed as a gzip which works better than a zip file). This makes it quick and easy to transfer
style files to different sites if required.

To export a template make sure your are on the exporting template page and you will see the table as shown in Figure 27.

Fig.27 - Exporting Templates

By Clicking on the template you wish to export you will be presented with a form thatallows you to change certain aspects of the file for example the template name
and file or even add a comment for later use. See Figure 29 for more information.

Fig.28 - Form to Export File

Finally if you save the file to your site an information box will comfirm the file has been saved and the location of where it has been saved too.

Fig.29 - Exported Successfully

Import Templates

This feature allows you to import your exported style files, In addition it will install and update your styles. Figure 30 shows in more
details where different features are accessed within this page and these are explained in more detail below.

Fig.30 - Importing Templates
Import Templates

Click on the Import Icon so the file you have chosen can be imported to your site. (Click on Figure 31 for more Information)
you have the option to creat the template and install it to your database or just to create the template inyour template folder.

Fig.31 - Importing and Installing a Template
List imported Files

This option will open a new page with all the files contained within the style file (This include HTML, CFG, CSS and IMAGE files).
The page will list all of the templates files with the option to view a file and even download that file to your computer. When viewing a
file you will see the contents of the file, the contents are not editable. Click on Figure 32 for more information

Fig.32 - List and view files from Import
Delete Template Files

By selecting the Delete file the system will remove the file you have selected from the style folder
WARNING (This cannot be undone)

Fig.33 - Delete the Style File

Edit Templates

This section will allow you to edit live any html, txt, css or cfg file with a template folder. Inaddition files can be saved,
downloaded and uploaded. Allowing live changes to your site whereever you might be.

Fig.34 - Edit Template Files
FileBrowser

The File Browser allows you to search through you site folders. When clicking on a site folder the files contained within will appear under the All Files section.

Fig.35 - File Browser
Filter

The filter can be used to quickly find a file that is required either by the extension name or by a word that is within a specific
file or files. The filter will only search the folder that is presently showing in the File Browser.

Fig.36 - Filtered Search
All Files

All included and allowed files held within the folder you have chosen will be displayed here, by going to the Option section and
clicking the specific file row you wish to edit will open the Edit file page.

Fig.37 - All Files
Edit A file

When editing a page there are quite a few fetures available to you... Click on Figure 36 for an example of the page. All of these features are explained below.

Fig.38 - Edit a File Page
Save Backup

Before Editing any file it is always good practice to Save a Back up first. Which is exactly what the Save Back up button does.
Using this button will not only Save the file but give you additional options too. Click on Figure 37 These options are explained below.

Fig.39 - Save a Back up of a File
  • View File - Allows you to view the save file (This does not overide the file saved within your template)
  • Reload File - Will save the saved file back into your template folder overwriting any file already preseant
  • Download File - Download the file to your local computer
  • Delete File - Delete the file completely from your site. WARNING (This cannot be undone)
Reload File

Does as it says by using the Reload Button will Reload the file stored in your template folder and show it in the text area.
Any changes you have made to the present file will be lost if you have not saved them once the the file has been reloaded.

Download File

Using the Download button will download to your local computer the file you are viewing on the editing page.

Trim Spaces

This is clicked on by Default. By ticking the Trim Spaces Checkbox will remove any white space from the beginning and the end of the present file.

Fig.40 - Trim Spaces
Find and Replace

The Find and replace area of the page will find and highlight the word you are looking for within the selected file, in addition select the
checkbox to match a word by case and find uppercase and lowercase letters contained within the word.
You can also replace the word or replace all matching words within the selected file. The Icons are explained below.

Fig.41 - Search and Replace
  • Find word - Add a search term to find within the file and clcik the find icon to find the search term
  • Replace Word - Adding a term to be replaced and then click the replace term icon to replace the term you wish to be replaced
  • Replace all Words - By selecting the Replace All.. All the words found within the document will be replaced with the word you selected
Upload a File

When Uploading a file from your local computer it will replace the existing file that is stored in your chosen template folder. Be careful when submitting the page that you
match the correct files as the code will be replaced with whatever is currently being uploaded.

Submit File

By Submitting the page all information on the page will be saved. Uploading and submitting a file will override any changes made to the file
manually in the text area or reloading a file from a previously saved file.

Delete Templates

This section allows you to completely delete any template folder including files and images stored in your system with just a couple of clicks.

Fig.42 - Installed Templates
Fig.43 - Templates not Installed

Admin Features


All our Admin Feature Pages include Dynamic help (These are help guides on what to do when working on a feature page)
for example each page will have a Question Mark Icon on the top Right of the page as shown in Figure 21. Click on the Icon a Side bar pull out will appear explaining each section on the page

Fig.44 - Dynamic Help
Fig.45 - Dynamic Help Guide

Pages

Our Pages Section allows you to add, edit or delete pages for you site.

Fig.46 - Site Pages

Our menu section allows you to add new menu items to the main section of your site, you can view all your menu items and the position they are in.
In addition you can edit or delete a menu item and a help guide is included on each page. There is also the sort menu button, this will allow you to drag and
drop menu items to different levels and positions that are required for your site.

Fig.47 - Menus

Templates

Please See The Ultimate Template for all Template related instructions.

File Manager

Our File Manager allows you to store images, files, zips or pdfs and stores till you need to add them to you pages. The In page help guide gives you more information.

Fig.48 - File Manager

Settings

Our settings page gives you the opportunity to change aspects of your site, from adding a logo, setting times zones and disabling your site.

Fig.49 - Settings

Code Elements


Our Code Elements section gives you loads of codes to help style your site, so you can copy and paste code straight into your page content.
Each element has examples and information on how to use the code elements making it quick and easy to fill you site with information.

Fig.50 - Code Elements

Figure 30 gives you an example of a Code Element Page. including code and our simple Copy System.

Fig.51 - Code Elements

For any help or further support please do not hesitate to contact us and we will do our best to help solve any issues.

Information


Our Information page gives you some details abour CmsLitek

Fig.52 - Information

Css Styling


There are twenty predifined colours in CmsLite as show below so if you wish to change any colour of the site to suit
your needs just pick one of the colours highlighted below.

  • Aqua #27d7e7 #26bac8
  • Black #72c02c #5fb611
  • Blue #3498db #2980b9
  • Brown #3498db #2980b9
  • Dark-Blue #3498db #2980b9
  • Dark-Brown #3498db #2980b9
  • Dark Red #b61332 #a10f2b
  • Dark Purple #5d4157 #493344
  • Green #72c02c #5fb611
  • Grey #868d8d #737777
  • Light Green #79d5b3 #59b795
  • Light Grey #7f8c8d #95a5a6
  • Purple #b61332 #a10f2b
  • Orange #b61332 #a10f2b
  • Red #b61332 #a10f2b
  • Rose #ff61e7 #ff2edf
  • Sea Shell #e5dbd5 #d3cac4
  • Teal #2cd5b6 #18ba9b
  • White(Antique) #b61332 #a10f2b
  • Yellow #f1c40f #f39c12

Information All Colours are stored in templates/common/styles/text.css the example below shows the layout of the code.

/*Text color classes*/
					/*1 Aqua */
					.aqua {color: #27d7e7 !important;}
					a.aqua {color: #27d7e7 !important;}
					a.aqua:hover, a.aqua:focus {color: #26bac8 !important;}

					/*2 Black */
					.black {color: #666666 !important;}
					a.black {color: #666666 !important;}
					a.black:hover, a.black:focus {color: #4d4d4d !important;}

					/*3 Blue */
					.blue {color: #3498db !important;
					}
					a.blue {color: #3498db !important;}
					a.blue:hover, a.blue:focus {color: #2980b9 !important;}

					/*4 Brown */
					.brown {color: #9c8061 !important;}
					a.brown {color: #9c8061 !important;}
					a.brown:hover, a.brown:focus {color: #81674b !important;}

					/*5 Dark Blue */
					.dark-blue {color: #4765a0 !important;}
					a.dark-blue {color: #4765a0 !important;}
					a.dark-blue:hover, a.dark-blue:focus {color: #324c80 !important;}
				

There is a good explanation of using these colour codes within the code eleemnt section within the admin page.

Credits


Name URL
Bootstrap http://getbootstrap.com
Jquery https://jquery.com/
Jquery Cookie https://github.com/js-cookie/js-cookie
Font Awesome https://fortawesome.github.io/Font-Awesome/
Line Icons http://graphicburger.com/simple-line-icons-webfont/
Owl Carousel http://owlgraphic.com/owlcarousel/
Back Stretch http://srobbin.com/jquery-plugins/backstretch/
Fancy Box http://fancybox.net/
Colour Picker Sliders http://www.virtuosoft.eu/code/jquery-colorpickersliders/
Full Calendar http://fullcalendar.io/
Prism http://prismjs.com/
Semantic Side Bar http://semantic-ui.com/modules/sidebar.html
Smooth Scroll http://github.com/cferdinandi/smooth-scroll
Tiny Colour https://bgrins.github.io/TinyColor/
ToolBar http://dev.misterphilip.com/prism/plugins/toolbar/
Ckeditor http://ckeditor.com/
Kcfinder http://kcfinder.sunhater.com/
File Manager http://www.responsivefilemanager.com/

Thank you again for purchasing CmsLite