Documentation version 1.0.0
Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email via our contact form Here. Thanks so much!
Download Now Visit Our Product PageRecruitZ - HTML Template is an awesome HTML template built with modern technologies like HTML5, CSS3, jQuery, Bootstrap3.x, Font Awesome 4.x, LESS, Gulp, and more which is specially designed for any kind of promotion . To easily modify all those pages according to your need, this documentation is going to help you. The theme contains 32 html template files:
It is accepted that before you start modifying the HTML for your need at least you have basic knowledge in html and twitter Bootstrap3. If you need custom development as well as need to know any thing specific for this Template that doesn't cover in this documentation, you are always welcome to contact us.
The whole theme contains html
, css
, less
,
js
, php
and image
files.Files and Folder Structure of
theme folder:
To start customizing the theme need to do little setup. See there is a package.json
file in the theme root folder. Open command promt in the theme root folder. Please
note that, you need to do this if you want to compile less to css and compile js and
minify as per our theme setup or how provided.
Make sure you opened the command prompt to current theme root directory. Now type:
npm install
. It will install necessary node modules. If you don't have
node.js
installed then download and install for
your os version.
After all node modules are installed successfully type gulp
in command
prompt and see it will compile all less files from assets/less
dir and
put
single css file(s) in assets/css
dir. Same time from dir assets/js
theme.js
will be minified and new file theme.min.js
will
be
created/updated
The codes for the Header lies within lines101 - 161
in every file.The header section contains the logo and the navigation menu, to modify the
contents, simply edit the text for logo and lists items for navigation
menu.
The codes for the Subscription lies within lines974 - 986
in index.html .To modify the
contents follow the instruction.
There are some javascript code. The codes for the ajax Subscription lies within lines106 - 147
in theme.js .To modify the
javascript code follow the instruction.
$('form#cbx-subscribe-form').on( 'submit', function (evnt) { evnt.preventDefault(); var $form = $(this); var emailInput = $( 'form#cbx-subscribe-form' ).find( 'input#subscribe' ); if (isEmail( emailInput.val() )) { $.ajax({ url: cbx_path + '/php/subscribe.php', type: 'post', data: { 'email': emailInput.val().toLowerCase()}, beforeSubmit: function (argument) { // body... }, success: function (ajaxResponse) { console.log(ajaxResponse); try { var ajaxResponse = $.parseJSON(ajaxResponse); if ( !ajaxResponse.error ) { emailInput.css('color', '#0f0'); } else { emailInput.removeAttr( 'style' ); //css('color', '#f00'); throw ajaxResponse.message; } //alert( ajaxResponse.message ); } catch (e) { //e.message; //alert(e.message ); } }, error: function (argument) { // body... } }); $form[0].reset(); } else { emailInput.css('color', '#f00'); return false; } });
There are some php code. The codes for the ajax Subscription lies in php/subscribe.php .To modify the javascript code follow the instruction.
$save_in_csv = false; $send_email = true; $api_key = 'c9bee5a70d502b2939e274a8a64ae602-us11'; //$list_id = 208869; $list_id = 'd1c6438b35'; $ajax_response = array( 'success' => false, 'message' => 'Email is not valid.', ); function is_already_subscribe($email) { if (is_file('subscribe.csv')) { $fp = fopen('subscribe.csv', 'r'); while (!feof($fp) ) { $subscribe_list = fgetcsv($fp); if ($subscribe_list[0] == $email) { fclose($fp); return true; } } fclose($fp); return false; } return false; } if ($_POST['email']) { $email = strtolower($_POST['email']); if ($email != null && filter_var($email, FILTER_VALIDATE_EMAIL)) { $ajax_response = array( 'success' => true, 'message' => 'Thanks for subscribe us.', ); //saving in csv file if ($save_in_csv && !is_already_subscribe($email)) { $fp = fopen('subscribe.csv', 'a'); $list = array ($email); fputcsv($fp, $list); fclose($fp); } if ( $send_email && $api_key != null && $list_id != null ) { require_once( 'Mailchimp.php' ); $lz_mailchimp = new Mailchimp( $api_key ); try { $subscriber = $lz_mailchimp->lists->subscribe( $list_id, array( 'email' => htmlentities($_POST['email'] ) ) ); if ( empty( $subscriber['euid'] ) || empty( $subscriber['leid'] ) ) { throw new Exception( 'Subscribe is not available now.' ); } } catch( Exception $Exp) { $ajax_response = array ( 'success' => false, 'message' => $Exp->getMessage() ); } } echo json_encode($ajax_response); } else { echo json_encode($ajax_response); } }
The codes for the Subscription lies within lines180 - 208
in contact.html .To modify the
contents follow the instruction.
There are some javascript code. The codes for the ajax Subscription lies within lines33 - 95
in theme.js .To modify the
javascript code follow the instruction.
var $contactForm = $( 'form#cbx-contact-form' ); $contactForm.validate({ submitHandler: function(form) { // console.log(form); //form.submit(); var $contactForm = $(form); $.ajax({ url: cbx_path + '/php/contact.php', type: 'post', data: $contactForm.serialize()+'&action=cbx_contact_us', beforeSubmit: function (argument) { // body... }, success: function (ajaxResponse) { try { var ajaxResponse = $.parseJSON(ajaxResponse); console.log(ajaxResponse); if (ajaxResponse.error) { //for field error $.each(ajaxResponse.error_field, function(i) { $('label#'+ajaxResponse.error_field[i]+'-error').text(ajaxResponse.message[ajaxResponse.error_field[i]]); }); } else if(ajaxResponse.successmessage) { //alert(ajaxResponse.successmessage); //$( '.cbx-formalert' ).addClass( "alert alert-success" ); $('#cbx-formalert').addClass( "alert alert alert-success" ).html(ajaxResponse.successmessage); $contactForm[0].reset(); } } catch (e) { //consoe.log(e.message ); //alert(ajaxResponse.message); } $contactForm.reset(); }, error: function (argument) { // body... //console.log('error'); //alert('Sorry, Mail could not be sent. Please contact server admin.'); //$('#cbx-formalert').addClass( "alert alert-danger" ).html('Sorry, Mail could not be sent. Please contact server admin.'); $contactForm.reset(); } }); return false; }, rules: { 'cbxname': { required: true }, 'cbxemail': { required: true }, 'cbxmessage': { required: true } } });
There are some php code. The codes for the ajax Contact Form lies in php/contact.php .To modify the javascript code follow the instruction.
define('DS', DIRECTORY_SEPARATOR); //defined('DS') or die('Error'); //options parameter for user //if you want to save the contact informations in csv then change the below params to true, by default it's false // the csv file location is /php/contacts.csv $save_in_csv = false; $admin_email_to = 'admin@yourdomain.com'; // admin email who will get the contact email alert $admin_email_to_name = "Company Name"; // Admin Name/Company name who will get the email alert $admin_email_from = 'noreply@yourdomain.com'; // admin email from which email address email will be sent $admin_email_from_name = 'System'; //admin name from which email will be sent $admin_send_subject = 'Contact form alert'; //email subject what the admin will get as contact email alert $user_send_subject = 'Thanks for contact, your copy'; //email subject what the user will get if the user agreed or select "copy me" //end options parameter for user $list = array(); $validation_message = array( 'error' => false, 'error_field' => array(), 'message' => array() ); $rules = array( 'cbxname' => 'trim|required', 'cbxemail' => 'trim|required|email', 'cbxmessage' => 'trim|required|alpha_numeric_spaces', ); if ($_POST) { require_once(__DIR__.DS.'class.validation.php'); $frm_val = new validation; foreach ($rules as $post_key => $rule) { $frm_val->validate($post_key, $rule); } $validation_info = $frm_val->validation_info(); $validation_message['error'] = !$validation_info['validation']; foreach ($validation_info['error_list'] as $error_field => $message) { $validation_message['error_field'][] = $error_field; $validation_message['message'][$error_field] = $message; } $cbxname = $frm_val->get_value('cbxname'); //var_dump($cbxname); $cbxemail = $frm_val->get_value('cbxemail'); ///var_dump($cbxemail); $cbxsendme = isset( $_POST['cbxsendme'] ) ? 'on' : ''; ///var_dump($cbxsendme); $cbxmessage = $frm_val->get_value('cbxmessage'); //var_dump($cbxmessage); //exit(); //if save in csv true if ($save_in_csv && $validation_info['validation']) { $list[] = $cbxname; $list[] = $cbxemail; $list[] = $cbxmessage; $fp = fopen('contacts.csv', 'a'); fputcsv($fp, $list); fclose($fp); } //end if save is csv true // $validation_message['message'] = 'This is success Process'; //send email if($validation_info['validation']){ //now prepare for sending email //include the php emailer library require 'phpmailer/PHPMailerAutoload.php'; //create an instance of phpmailer class $mail = new PHPMailer; //some config if you need help based on your server configuration // $mail->Host = 'localhost'; // Specify main and backup SMTP servers // $mail->Username = 'user@example.com'; // SMTP username // $mail->Password = 'secret'; // SMTP password // $mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted //$mail->Port = 25; // TCP port to connect to //add admin from email $mail->From = $admin_email_from; //add admin from name $mail->FromName = $admin_email_from_name; //add admin to email and name $mail->addAddress($admin_email_to ,$admin_email_to_name); //add more if you need more to recipient //$mail->addAddress('ellen@example.com'); // Name is optional //add if you need reply to //$mail->addReplyTo('info@example.com', 'Information'); //add if you need cc //$mail->addCC('cc@example.com'); //add if you need bcc // $mail->addBCC('bcc@example.com'); //$mail->addAttachment('/var/tmp/file.tar.gz'); // Add attachments //$mail->addAttachment('/tmp/image.jpg', 'new.jpg'); // Optional name $mail->isHTML(true); // Set email format to HTML $mail->Subject = $admin_send_subject; $mail->Body = $cbxmessage; //$mail->AltBody = 'This is the body in plain text for non-HTML mail clients'; if($mail->send() === true) { $validation_message['successmessage'] = 'Message has been sent successfully !'; } else { $validation_message['successmessage'] = 'Sorry, Mail could not be sent. Please contact server admin.'; } //send email to user if user agreed or selected "copy me" if($cbxsendme == 'on'){ $mail2 = new PHPMailer; //some config if you need help based on your server configuration //$mail2->Host = 'localhost'; // Specify main and backup SMTP servers // $mail->Username = 'user@example.com'; // SMTP username // $mail->Password = 'secret'; // SMTP password // $mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted // $mail2->Port = 25; // TCP port to connect to //add admin from email $mail2->From = $admin_email_from; //add admin from name $mail2->FromName = $admin_email_from_name; //now send to user //$mail->From = $admin_email_from; // $mail->FromName = $admin_email_from_name; //$mail->all_recipients = array(); $mail2->addAddress($cbxemail ,$cbxname); // Add a recipient, user who fillted the contact form //$mail->addAddress('ellen@example.com'); // Name is optional //$mail->addReplyTo('info@example.com', 'Information'); //$mail->addCC('cc@example.com'); // $mail->addBCC('bcc@example.com'); //$mail->addAttachment('/var/tmp/file.tar.gz'); // Add attachments //$mail->addAttachment('/tmp/image.jpg', 'new.jpg'); // Optional name $mail2->isHTML(true); // Set email format to HTML $mail2->Subject = 'Copy Mail:'.$admin_send_subject; $mail2->Body = $cbxmessage; //$mail->AltBody = 'This is the body in plain text for non-HTML mail clients'; if($mail2->send() === true) { $validation_message['successmessage'] = 'Message has been sent successfully !'; } else { $validation_message['successmessage'] = 'Sorry, Mail could not be sent. Please contact server admin.'; } } } else{ } //end send email echo json_encode($validation_message); die(1); }
The codes for the Feedback Slider lies within lines577 - 666
in index.html .To modify the
contents follow the instruction.
feedback
Here you see, latest and atracttive jobs these are curently open
![]()
Jhone Hafty
CEO at Envato
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbierst imperdiet egestas ullamcorperet.
![]()
Jhone Hafty
CEO at Envato
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbierst imperdiet egestas ullamcorperet.
![]()
Jhone Hafty
CEO at Envato
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbierst imperdiet egestas ullamcorperet.
There are some javascript code. The codes for the Slider lies within lines32 - 41
in theme.js .To modify the
javascript code follow the instruction.
// feedback slider $('#feedback-slider').owlCarousel({ loop:true, margin:10, navText: ['',''], nav:true, dots: false, autoplay: true, items:1, });
The codes for the Client Slider lies within lines859 - 907
in index.html .To modify the
contents follow the instruction.
There are some javascript code. The codes for the Slider lies within lines43 - 62
in theme.js .To modify the
javascript code follow the instruction.
// client slider $('#client-slider').owlCarousel({ loop:true, margin:10, nav:false, dots: false, autoplay: true, responsiveClass: true, responsive:{ 0:{ items:1, }, 600:{ items:3, }, 1000:{ items:5, } } });
----------------------------------------------------------------------------------------- Version 1.0 - 17.12.2017 ----------------------------------------------------------------------------------------- - Initial Release