preview

Thank you very much for purchasing my template. We've put a lot of hard work into it, and we hope you love it as much as we do. As far as the documentation is concerned, we have tried to cover as much as possible to help you get your new template up and running and to help you customise it.

Editing files

If you don't know anything about HTML and web pages, before doing anything with this template I recommend you to take at least some basic tutorial or hire somebody experienced to do this.

As for tutorials I recommend w3schools.com

Editing php and JavaScript files is really advanced stuff, only experienced person should edit them. If you're not sure, do not change anything, it might cause serious damage to the scripts. Hiring somebody, who knows what to do, is better solution.

If you are not familiar with these technologies, do not play around with these files.

If you like this template, please remember to rate it on Themeforest - it really helps us to know what people think of our templates. To rate this item, go to your Downloads page on Themeforest, then next to this template click on a star rating you'd like to give us.

Thank you so much.

Show content

Inspect element - when editing html and css files utilities like firebug (free firefox plugin) are great helpers. With them you can easily find element style, even the stylesheet name and line number where the inspected style rule is.

Edit html/css/js/php files - use your favorite text editor. Editor, that highlights syntax is good choice, Pspad(free) or Notepad++(free) might be enough.

View pages - any common browser like Mozilla Firefox(free)...

Upload on server - look for some FTP program - filezilla(free)...

License

All items in this template package are mine or properly licensed as themeforest requires. For items that, are not mine, I try to keep license information close to them. So if you want to see the license, look into the items folder or perhaps it can be found on first lines of these files. Sometimes author release item under some license, but the license file is not available, then you could try to find the license on web site (if this item has url specified) or contact the author.

This html built with bootstrap

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

If you have any questions with this plugin please visit the author's website.

Example Code

          
                
                

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

File structure

The detailed structure of html files and folders

  • assets
    • js
      • custom.js custom js here
      • custom-map.jsgoogle map settings
    • lib bootstrap and jquery library
      • bootstrap
      • jquery-1.12.4.min.js
      • jquery-migrate-1.2.1.js
    • css
      • master.cssMaster Stylesheet
      • theme.cssmain theme styles
      • color.cssmain color styles
      • index.cssopreview page styles
      • responsive.cssstyles for different resolution
    • plugins third-party plug-ins and assets
    • fontsweb fonts icons
    • mediamedia files
  • mail contact form settings

Contact form

In this lesson we will tell you about how you can create the contact form. Unfortunately HTML cannot send messages and all actions you have to make on the web server.

Below is given the example of HTML code of contact form.

It is important to set identical NAME and ID of each field not to get confused in further control of your contact form. Placeholder for temporary filling of form with the text. You can write for it any text.

 

          
          
          

Send us a message

You will find the mail folder in each our HTML template. This folder has all necessary files for the contact form.

jqBootstrapValidation.js - A JQuery validation plugin for bootstrap forms.

contact_me.js – makes data checking and data receiving and also connects contact_me.php file for sending of message. If you created the contact form so you have to change or create fields which are martked in bold. It must be done in two places.

          
            
$(function() {
 $("input,textarea").jqBootstrapValidation({
 preventSubmit: true,
 submitError: function($form, event, errors) {
 // additional error messages or events
 },
 submitSuccess: function($form, event) {
 event.preventDefault(); // prevent default submit behaviour
 // get values from FORM
 var name = $("input#user-name").val();
 var lastname = $("input#user-lastname").val();
 var email = $("input#user-email").val();
 var phone = $("input#user-phone").val();
 var subject = $("input#user-subject").val();
 var message = $("textarea#user-message").val();
 var firstName = name; // For Success/Failure Message
 // Check for white space in name for Success/Fail message
 if (firstName.indexOf(' ') >= 0) {
 firstName = name.split(' ').slice(0, -1).join(' ');
 }
 $.ajax({
 url: "././mail/contact_me.php",
 type: "POST",
 dataType: 'json',
 data: {
 name: name,
 lastname: lastname,
 email: email,
 phone: phone,
 subject: subject,
 message: message
 },
 cache: false,
 success: function(data) {
 if(data.error){
 // Fail message
 $('#success').html("
"); $('#success > .alert-danger').html(""); $('#success > .alert-danger').append("Sorry " + firstName + ", Something is not right. Please try again."); $('#success > .alert-danger').append('
'); //clear all fields $('#contactForm').trigger("reset"); } else if(data.success){ // Success message $('#success').html("
"); $('#success > .alert-success').html(""); $('#success > .alert-success').append("Your message has been sent. "); $('#success > .alert-success').append('
'); //clear all fields $('#contactForm').trigger("reset"); } } }) }, filter: function() { return $(this).is(":visible"); }, }); }); /*When clicking on Full hide fail/success boxes */ $('#name').focus(function() { $('#success').html(''); });

contact_me.php – the file will collect data from contact form, to pack them in the message and to send by e-mail. = ‘yourname@yourdomain’ fill it field for receiving the message on your mailbox.

headers = “From: noreply@yourdomain.com\n”; will notify the sender on his specified e-mail aboput that his letter is successfully sent

          
          
          
'true'));
 return false;
}

$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];

$lastname = $_POST['lastname'];
$phone = $_POST['phone'];
$subject = ($_POST['subject'] ? $_POST['subject'] : "Website Contact Form: $name");



// Create the email and send the message
$to = 'yourname@yourdomain'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = $subject;
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nLast Name: $lastname\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers);
echo json_encode(array('success'=>'true'));
return true; 
?>


Images

All images are just used for Preview Purpose Only. They are not part of the item and NOT included in the final purchase files. This is the rule for all authors Envato . But if you need more information please contact us by e-mail

Google fonts

Google fonts - it is high-quality fonts to use on your web site. You can connect any available font family. All fonts are released under open source licenses. You can use them in any non-commercial or commercial project.

With so many unique fonts to use, you're bound to find something you like!

In our template we used fonts below .

Web Icons

We use the web icons. This speeds up the loading of your site to avoid unnecessary queries. Also web icons easy to change color and retina ready

Html live Editor

The system for servicing and maintaining websites based on static HTML files. It’s focused on smaller sized sites that require periodic updates. All the changes on the site get saved directly on the HTML files, this allows to eliminate the need of having a database server. Does not require any integration with the site, its enough to just fit the catalogue with the system in the root directory of the site. The system automatically scans the structure of the site and provides a convenient access to all the files through the web interface.

The main feature of Textolite is the visual editor with the ability to edit content without any forms of input, only requires a click on the element that is on the site. For more technical and serious changes provided a source code editor with a highlighted syntax and line numbering. Files with the following extensions are also supported html, htm, shtml, shtm, stm, xml, php, js, css. For downloading or deletion of files exists a convenient file manager with the ability to upload multiple files in batches to the server.

Installation

For a normal operation of the system users will need a web server Apache and PHP version 5.2 and above with a current mod_rewrite module. Users must unzip the downloaded archive to the root directory of the site. Must move on to the directory of the system through the address bar of the browser http://{mysite}/textolite/. The directory of the system can be renamed later on. If everything is done properly, the system will display an authorization form. The password is set by default as "admin". After the first login, users must change the password in the settings of the system.

The system needs a permission to record for its own catalogue and for all the files of the site. To prevent problems with displaying symbols that are not Latin, all the editable files should be in utf-8 encoding.

To launch the system under Nginx without Apache, users must configure the server using parameters from the file .htaccess. In this case the .htaccess can be deleted. For a standard installation the following code can be used:index textolite.php

          


if (!-e $request_filename) {rewrite ^/textolite/(.*)$ /textolite/textolite.php?query=$1}
location ~ \.(ini|log)$ {deny all;}