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.
- Author: BeKirk
- Created on: 24/02/2016
- Latest Update on: 02/02/2017
- Contact: support@bekirk.co.uk
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
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
Step Two
Step two gives you some details about your server, if everything looks OK click the continue button.
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)
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)
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.
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.
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.
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.
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.
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.
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.
Clicking on the X of a note will show the delete note popover allowing you to decide if you wish to delete a Note.
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.
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
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.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
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
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.
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
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)
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)
Clone 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
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.
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.
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.
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.
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.
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
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)
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.
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.
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.
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.
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.
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.
- 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.
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.
- 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.
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
Pages
Our Pages Section allows you to add, edit or delete pages for you site.
Menu
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.
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.
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.
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.
Figure 30 gives you an example of a Code Element Page. including code and our simple Copy System.
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
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 | Description | URL |
---|---|---|
Bootstrap | Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. | http://getbootstrap.com |
Jquery | jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.. | https://jquery.com/ |
Jquery Cookie | A simple, lightweight JavaScript API for handling cookies | https://github.com/js-cookie/js-cookie |
Font Awesome | Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. | https://fortawesome.github.io/Font-Awesome/ |
Line Icons | All 160 simple line icons are now embedded in a webfont for more convenient use on the web or in a native application. Big thanks to Jamal Jama for creating this awesome webfont. | http://graphicburger.com/simple-line-icons-webfont/ |
Owl Carousel | Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. | http://owlgraphic.com/owlcarousel/ |
Back Stretch | A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element | http://srobbin.com/jquery-plugins/backstretch/ |
Fancy Box | FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. | http://fancybox.net/ |
Colour Picker Sliders | An advanced color selector with support for human perceived lightness. | http://www.virtuosoft.eu/code/jquery-colorpickersliders/ |
Full Calendar | Full Calendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar. | http://fullcalendar.io/ |
Prism | Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. | http://prismjs.com/ |
Semantic Side Bar | A sidebar hides additional content beside a page. | http://semantic-ui.com/modules/sidebar.html |
Smooth Scroll | A simple vanilla JS script to animate scrolling to anchor links. | http://github.com/cferdinandi/smooth-scroll |
Tiny Colour | TinyColor is a micro framework for inputting colors and outputting colors as different formats. Input is meant to be as permissive as possible. | https://bgrins.github.io/TinyColor/ |
ToolBar | Attach a toolbar for users to easily view and copy the raw code. To be used with Prism. | http://dev.misterphilip.com/prism/plugins/toolbar/ |
Ckeditor | CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. | http://ckeditor.com/ |
Kcfinder | KCFinder is free open-source replacement of CKFinder web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor's generated HTML content. | http://kcfinder.sunhater.com/ |
File Manager | Responsive FileManager 9.9.6 is a free open-source file manager and image manager made with the jQuery library, CSS3, PHP and HTML5 that offers a nice and elegant way to upload and insert files, images and videos. | http://www.responsivefilemanager.com/ |
Thank you again for purchasing CmsLite