We got you covered! If you have any questions that are beyond the scope of this documentation or find any difficulty using this template, please feel free to Contact Us.
Open the html Folder in package to find all the Templates Files. The structure is described as below:
/html : It contains all the demo html files./assets : It contains all the assets for the theme, i.e. css, js, fonts and images./css : It contains all the css files and vendor plugins./fonts : It contains all the fonts./images : It contains all the required images./favicon : It contains favicon images./logo : It contains the logo./includes : It contains all the PHP files and PHP plugins./js : It contains all the javascript files and vendor plugins./elements : It contains the detailed explanation of the components used in the theme. You do not need to upload this folder to the live server./elements/images : It contains all the required images for components explanation.The coding structure is simple in Cislunar making it very developer friendly. The structure is described as below:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<!-- Meta Info -->
<!-- Add Favicon -->
<!-- Page Title -->
<!-- Link Fonts and Icons -->
<!-- Link Vendor CSS files -->
<!-- Link Theme CSS files -->
</head>
<body>
<!-- Preloader -->
<!-- Navigation Bar -->
<!-- Page sections -->
...
<!-- Page sections -->
<!-- Video embed template -->
<!-- Back to top -->
<!-- Footer -->
<!-- Link Vendor JavaScript files -->
<!-- Link Theme JavaScript files -->
</body>
</html>
Cislunar is based on Bootstrap 4 Framework, Read more about it here.
Cislunar is based on Bootstrap 4 Framework, Read more about it here.
The theme CSS file is cl-main-style.css which contains all the css styles. Write your own custom styles in style.css file.
All the classes has been prefixed by cl- to avoid conflicts.
The theme JavaScript file is cl-core.js which contains all the JavaScript code. Write your own JavaScript code in custom.js file.
All the classes used for JavaScript components has been prefixed by cl- to avoid conflicts.
Follow "File Structure" to locate the Element Docs or click here for the online version.
Stay protected from spam with Google reCaptcha v2. To setup reCaptcha v2 Form Protection, you will need to obtain a Set of Site/Secret Keys from the Google reCaptcha Website.
After obtaining the Site/Secret keys, follow the steps below to setup the keys for your form:
1. Locate the following code in your form and replace your-recaptcha-site-key with your obtained Site key.
<!-- Google re-Captcha --> <div class="g-recaptcha" data-sitekey="your-recaptcha-site-key"></div>
2. Locate following code in your process_contact.php and process_job.php, and replace your-recaptcha-secret-key with your obtained Secret key.
// Enter your reCaptcha Secret key here $secret_key = "your-recaptcha-secret-key";
That's it!
There are two type of working forms in Cislunar, Contact and Job Application Form. After setting up the reCaptcha, you would need to setup email address to receive contact emails. Follow the below steps to proceed:
1. Locate process_contact.php and process_job.php files in includes folder.
2. Find the following code and replace example values to your email and your name.
// List of emails you would like this email to send to.
$send_to = array(
array(
"email" => "email1@example.com", // Your Primary Email
"name" => "John Doe" // Your Name
),
array(
"email" => "email2@example.com", // Your Secondary Email, remove this or add new arrays just like this
"name" => "Jane Doe" // Your Name
)
);
3. (Optional) You can setup multiple emails by repeating the following code for each new email.
array(
"email" => "email2@example.com", // Your Secondary Email, remove this or add new arrays just like this
"name" => "Jane Doe" // Your Name
),
That's it!
If you are having trouble receiving Emails from your Forms then it could be possible that your Server Configuration doesn't support PHP mail() function,
however you can use SMTP Authentication for this purpose.
Follow the below steps to setup SMTP Authentication:
1. Locate the Following code in process_contact.php and process_job.php files.
// Uncomment the below code if you want to use SMTP /*$mail->isSMTP(); $mail->Host = 'smtp.gmail.com'; // Your SMTP host $mail->SMTPAuth = true; $mail->Username = 'username@gmail.com'; // Your email/username username $mail->Password = 'yourpassword'; // Your password $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; $mail->Port = 587;*/
2. Uncomment the code and replace example values with your SMTP details.
// Uncomment the below code if you want to use SMTP $mail->isSMTP(); $mail->Host = 'smtp.gmail.com'; // Your SMTP host $mail->SMTPAuth = true; $mail->Username = 'username@gmail.com'; // Your email/username username $mail->Password = 'yourpassword'; // Your password $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; $mail->Port = 587;
That's it!
There are three ways to setup Newsletter Signup Form:
By default all Newsletter Signup Form detail will be sent to your email address. However you would need to setup the email address to receive contact Newsletter Signup Form details.
You can do this as same as setting email address and SMTP for Contact Forms. You would need to make changes in process_subscribe_email.php in includes folder.
Follow the steps below to setup your MailChimp Newsletter Signup Form:
1. Locate the following code in index.php and index-2.php files, and replace action="assets/includes/process_subscribe_email.php" to action="assets/includes/process_subscribe_mailchimp.php".
<form id="cl-subscribe-form" method="post" action="assets/includes/process_subscribe_email.php" novalidate>
2. Locate the following code in process_subscribe_mailchimp.php file, and add your MailChimp API Key & your List ID.
// Your MailChimp API Key $apiKey = ""; // Your MailChimp List ID $listId = "";
That's it! To add a subscriber to a Different List ID, you can simply add the ?list=your-list-id to your Form action attribute:
<form id="cl-subscribe-form" method="post" action="assets/includes/process_subscribe_mailchimp.php?list=your-list-id" novalidate>
Follow the steps below to setup your Campaign Monitor Newsletter Signup Form:
1. Locate the following code in index.php and index-2.php files, and replace action="assets/includes/process_subscribe_email.php" to action="assets/includes/process_subscribe_cm.php".
<form id="cl-subscribe-form" method="post" action="assets/includes/process_subscribe_email.php" novalidate>
2. Locate the following code in process_subscribe_cm.php file, and add your Campaign Monitor API Key & your List ID.
// Your Campaign Monitor API Key $apiKey = ""; // Your Campaign Monitor List ID $listId = "";
That's it! To add a subscriber to a Different List ID, you can simply add the ?list=your-list-id to your Form action attribute:
<form id="cl-subscribe-form" method="post" action="assets/includes/process_subscribe_cm.php?list=your-list-id" novalidate>
Cislunar includes all the Tools to make your Website completely RTL ready. Follow the below steps:
1. Add rtl to dir attribute of html tag.
<html dir="rtl" lang="ar">
2. Add the RTL CSS file cl-rtl-style.css in the end of Document <head> before custom style.css.
<head>
...
<!-- Link Theme RTL Support CSS File -->
<link href="assets/css/cl-rtl-style.css" rel="stylesheet">
<!-- Custom Styles File -->
</head>
3. Add the .rtl Class to the <body>
<body class="rtl">
There are two main classes for RTL support, .cl-maintain-layout and .cl-change-layout. You can use these classes together to make RTL supported custom sections.
Use .cl-change-layout with Bootstrap classes like text alignment, padding, margin, etc. to give it RTL support.
.cl-maintain-layout {
direction: ltr;
}
.cl-change-layout {
direction: rtl;
}
We thank these plugin/image/font/icon authors to make our work easy to provide you with such a good HTML template to make your work even more easier.