Camela

Thank you for purchasing the Camela Coming Soon template and the confidence you have placed in Dart Simple Solutions.

In this document, you will find an in-depth description of all the template's features and functionality. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio.

Online documentation is updated regularly and is available online to you free of charge on our website at http://doc.dartsimple.com

Developer website: http://www.dartsimple.com

Customer service: http://www.dartsimple.com/contact-us/

 

 

Key Features

  • Based On 1170px Grid System
  • MailChimp Integrated
  • Send email script integrated
  • Free Subscribe Email Management Tool
  • Free Google Fonts
  • Retina Ready
  • Unique Design & Super Clean Layout
  • All Files Are Well Commented
  • Built With Bootstrap 3x
  • Coded With Care Valid HTML5 / CSS3
  • Fully Responsive Layout
  • Over 580 Icons With Font Awesome 4
  • Beautiful CSS3 Animation
  • W3C Valid Code
  • Carefully Handpicked Google Fonts
  • Clean Source Code
  • Easy Installation & Updates
  • Easy To Customize

 

What you will Get with this Template

  • For each of social network
  • 1 Html File
  • 1 Homepage Layout
  • 1Social ScreenLayout
  • 1 PHP File

Email Management Tool

Template includes custom-developed subscriber email management tool that saves and keeps track of all subscriber emails on your Coming Soon website. You can use a separate dashboard to review and export this email data to CSV and to your MailChimp account.

 

How to Use

Step 1: Set your password

The tool is saved in folder Admin. In this folder, you will find the file "settings.ini". Please open this file with notepad and locate fields Login, Password, and save your username and password to be used to log in to the admin panel with email subscriber data. If integrating with MailChimp, please also locate the field "list_id" in the "settings.ini" file, and set its value to your MailChimp API Key (Please refer to MailChimp user manual for further details at developer.mailchimp.com/documentation/mailchimp/ ). Your email management tool is now ready to use.

Step 2:  Log in to Email Management Tool

Your tool will be available for login as soon as you upload it to your server. Login form will appear at the address yourdomain.com/admin. Once you load the form, please log in using the username and password set in Step 1. Upon logging in, you can review, edit, delete and export subscriber email data to CSV and to MailChimp.

Step 3: Savings Data is Automatic

The tool is integrated with your Coming Soon front-end HTML by default, and will be saving subscriber email data to your admin panel and to the subscribers.txt file automatically.

 


About the Theme

Camela Coming Soon Template is a fully responsive HTML template with clean, unique modern design and integrated animated countdown. Countdown lets your users know when the site will be launched. Also included in an easy-to-use subscriber email management tool with MailChimp integration and integrated send email script that will connect to your smtp server and send emails from your users. Each web page is 100% W3C compliant with clean, well-commented and fully valid code.

 

Folder Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure  logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

Camela/
├── Documentation/
├── TemplateCamela/
│   └── {socialnetwork}/
│   └── admin/
│       └── css/
│           └── *.css
│       └── img/
│           └── favicons/
│               └── *.jpg, *.png, *.ico
│           └── *.jpg, *.png, *.ico
│       └── js/
│           └── *.js
│       └── index.php
│       └── login.html
│       └── settings.ini
│       └── subscribers.txt
│       └── template.html
│   └── assets/
│       └── plugins/
│           └── font-awesome/
│           └── jQuery/
│           └── jquery-validate/
│   └──css/
│       └── *.css
│   └── images/
│       └── *.jpg, *.png
│       └── favicon/
│           └── *.jpg, *.png, *.ico

│   └── js/
│       └── *.js
│   └── php/
│  └── {social network}.php
│  └── index.php
│   └── template.html

 

Project Folder Description

Folder Name

Description

Camela

Main directory

Documentation

Contains documentation about template, dependencies and short description

Template Camela

Main layout dirrectory

{social network}/admin

Contains mailchimp integration files and admin panel layout

{social network}/admin/css

Contains styles for admin panel

{social network}/admin/img

Contains images for admin panel

{social network}/admin/js

Contains javascript code for admin panel

{social network}/assets

Contains third party plugins

{social network}/css

Contains main layout style files

{social network}/css/colors

Contains colors variations

{social network}/images

Contains main layout omages

{social network}/images/favicon

Contains favicon images and bookmark description

{social network}/js

Contains javascript files of layout, plagins initiations and custom script

{social network}/php/

Contains access code to social networks and prepate posts from

{social network}/index.php

Collect posts and display

{social network}/template.html

Contains view to show posts

 

HTML Structure

Markup Customization

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

Camela Template follows an easy-to-use method of customization via HTML data attributes placed in the <body> tag, so you can quickly tweak the code and adjust the appearance of your website. All customizable elements and relevant attributes are listed below for your convenience.

Sample code:

Index.php:
$mainClass = '{social network}';

Template.html:
<body
data-deadline="May 30 2017 02:32:30 GMT+0500" 
data-start="Mar 28 2016 02:32:30 GMT+0500">

 

Data Attributes

Available Settings

Description

$mainClass

facebook, twitter, instagram, pinterest

Setting social nework

deadline

Any date in provided format

Setting date of project lounch

start

Any date in provided format, less then deadline

Sets countdown start date

 

CSS Customization

You are often able to further customize the template by enabling or disabling many of Camela's stylesheets as necessary. You can do so by commenting out the code or deleting relevant lines altogether. List of stylesheets available in Camela template follows below:

<!-- Fontawesome CSS -->
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<!-- Main Template CSS -->
<link href="css/template.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet">

In this template no such files that you can exclude.

 

Metatags

In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<!-- Personal Meta tags -->
<meta name="Camela- Premium template" content="">

<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">

<!-- Meta descriptions -->
<meta name="keywords" content="Camela, premium template, wg template, web grind" />
<meta name="description" content="Camela- Premium template by Web Grind">

<!-- Url of your website (without extra pages) -->
<link rel="canonical" href="http://yoursite.com/" />

<!-- Restrict google from scanning info from Dmoz or YahooDir -->
<meta name="robots" content="noodp,noydir"/>

<!-- Author markup -->
<meta name="author" content="Dart Simple - Premium HTML templates">
<meta name="copyright" content="Dart Simple">

 

 

CSS Structure

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Camela is no exception to this rule. Full list of stylesheet files is available below for your review.

File Name

Description

template.css

Main template Styles

custom.css

File for custom/addition styles

  

Stylesheet Structure

For large CSS documents we use a library with specific titles and subtitles designed for each specific section and subsection to simplify your searches throughout the code. To find any specific part of the code, please do a search for any of the titles and subtitles, which are listed below in-full for your convenience.

/*===========================================================

Camela - Premium template by Dart Simple 
Copyright 2017

Table of contents
01. Fonts
02. Main Layout
03. Controls
04. Header
05. Main menu
06. Footer
07. Modals
08. Customizer
09. Tile list
10. Counter

=============================================================*/

 

CSS3 Animation

Classes

Description

 

rotateCircle

Rotate effect

.preloader

Framework used

jQuery v2.2.1

http://jquery.com/

JavaScript Structure

When designing a theme or a template, we rely both on our own code, as well as on open-source plugins developed by third-parties. In this section, you will find detailed information on relevant plugins and their functions.

Plugins are initialized and can be edited in the lower part of the code for each HTML file as follows:

<!— jQuery Plugin -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<!-- jQuery Validate -->
<script type="text/javascript" src="assets/plugins/jquery-validate/jquery.validate.min.js"></script>
<!-- Theme Plugins -->
<script type="text/javascript" src="js/wg-plugins.min.js"></script>
<!-- Themescripts -->
<script type="text/javascript" src="js/wg-scripts.min.js"></script>
<!-- ThemeCustomScripts -->
<script type="text/javascript" src="js/wg-custom.min.js"></script>

 

JavaScript folder structure and contents

Js/
├──wg-scripts.js
│   └── wg-scripts.min.js
├──wg-plugins.js
│   └── wg-plugins.min.js
├──wg-custom.js
│   └── wg-custom.min.js

 

JavaScript Plugins Initialization

Below we provide the code used to initialize JavaScript plugins used in the template.

Validate

{
rules: {
    email: {
        required: true,
        email: true
     }
},
debug: true,
errorLabelContainer: '#errorMsgBox',
errorClass: 'error',
errorElement: 'span',submitHandler: function (form) {…}
}

 

Callback Functions

Listed below are available callback functions and their relevant settings.

// Go to the next item
app.validate.init();
// inits validation plugin for all app.validate.el
app.menu.toggle();
//show/hide menu on mobile
app.modal.show($('{modal ID}'));
//show modal 
app.modal.hide($('{modal ID}'));
//hide modal

 

Credits

JavaScript Plugins and Credits

jQuery Validate

Used for forms validating

https://jqueryvalidation.org/documentation/


JavaScript