MISSIO: Professionally designed, extremely user friendly, attractive & powerful site template.

Check it out

Do You Need Support?

If you have any questions that are beyond the scope of this help file, please feel free to contact us with the links below. Please don't forget to provide your website link.

Contact Form Discussions Page
Please remember...
  • Requests sent during weekends or on holidays will be replied on business days.
  • We only provide support for fixing bugs and respond to questions regarding the features included in the items.

Do You Need Customizations?

If you need custom modifications regarding HTML and CSS, please contact us so we can discuss. Customizations are done within 1-2 business days starting at $30 (Safe Payments through Fiverr with credit card or PayPal).

Contact Form
Please remember to...

Identify and describe in detail the modification you would like to have. Any screenshots, screencasts, URLs are appreciated.

Full & Box Layout

The default layout of the template is full-layout. To turn your pages into boxed layout, you will have to change the body class name from full-layout to box-layout on all HTML files.

Full Layout
<body class="full-layout">
Box Layout
<body class="box-layout">

Retina Images

In order to display a high resolution image on devices with retina display, you need two versions of the image. One with regular size and another with twice its size. The high resolution one should have the exact same name with @2x at the end.

logo.png
Default logo (e.g.: 100x100px)
[email protected]
High resolution logo (e.g.: 200x200px)
Example
<img src="#" srcset="style/images/logo.png 1x, style/images/[email protected] 2x" alt="" />

Color Scheme

There are 9 color options: blue, brown, green, lime, navy, orange, pink, purple and red the default being blue. To change the default color scheme, edit the color CSS file name in each HTML page.

Example
<link rel="stylesheet" type="text/css" href="style/css/color/blue.css">

Changing Fonts

To use a different font, copy the font link from its Google Fonts page and paste it before closing head tag in your HTML files.

Then add the font name to your CSS styles in style.css.

HTML
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,800,900,300,200,100' rel='stylesheet' type='text/css'>
CSS
.classname {
	font-family: 'Work Sans', sans-serif;
}

Parallax Effect

The basic structure of the sections that have the parallax effect is shown on the right.

Please make sure you enter correct width and height values of the images you use in the parallax sections.

HTML
<div class="parallax" data-parallax-img="style/images/art/parallax1.jpg" data-parallax-img-width="1920" data-parallax-img-height="1123">
  <div class="container inner">
    Parallax Content
  </div>
</div>

Revolution Slider

You can find detailed information about Revolution Slider elements and options here.

Contact Form

Configuration

Open contact/vanilla-form.php and specify recipient's e-mail address by filling emailRecipients and emailSender options. These email addresses will receive all form inquires/messages.

emailRecipients
Recipient's e-mail. To this address, the email will be sent. You can provide multiple e-mail addresses comma separated.
emailSender
If is not empty it sets a header From in e-mail message (sets sender e-mail). Note that some hosting servers can block sending e-mails with custom From field in header. If so, leave this field empty.
/**
 * Recipient's e-mail. To this e-mail email will be sent.
 * E.g. Single recipient
 * 'emailRecipients' => '[email protected]',
 *
 * E.g. Multiple recipients
 * 'emailRecipients' => '[email protected], [email protected]',
 */
'emailRecipients' => '[email protected]',

/**
 * If is not empty it sets a header From in e-mail message (sets sender e-mail).
 * Note: some hosting servers can block sending e-mails with custom From field in header.
 * If so, leave this field as empty.
 * E.g. Single recipient
 * 'emailSender' => '[email protected]',
 */
'emailSender' => '[email protected]'
Custom messages

The example on the right shows how to change success and error messages.

style/js/script.js
/*-----------------------------------------------------------------------------------*/
/*	VANILLA
/*-----------------------------------------------------------------------------------*/
var myForm;
myForm = new VanillaForm($("form.vanilla-form"));
/* Add the lines below */
myForm.dict.sendSuccess = "Thank you for your message!";
myForm.dict.sendError = "Oh no... something went wrong. Please try again.";
myForm.dict.httpRequestError = "[%s] Are you running it with enabled PHP parser?";
Translations

The example on the right shows how to translate the contact form status messages into a different language.

style/js/script.js
/*-----------------------------------------------------------------------------------*/
/*	VANILLA
/*-----------------------------------------------------------------------------------*/
var myForm;
myForm = new VanillaForm($("form.vanilla-form"));
/* Add the lines below */
myForm.dict.sendSuccess = "Dziękujemy za wysłanie wiadomości!";
myForm.dict.sendError = "Oh nie, serwer nie mógł wysłać Twojej wiadomości. Spróbuj jeszcze raz.";
myForm.dict.markedAsSpamError = "Twoja wiadomość wygląda jak SPAM, proszę popraw ją.";
myForm.dict.markedAsSpamServerError = "Twoja wiadomość została oznaczona jako SPAM i nie została wysłana";
myForm.dict.httpRequestError = "[%s] Wystąpił problem z otrzymaniem odpowiedzi z serwera.";
myForm.dict.timeoutError = "Twoje żądanie przekroczyło czas przetwarzania. Spróbuj jeszcze raz!";
myForm.dict.parseResponseError = "Odpowiedź z serwera jest niezrozumiała.";
Troubleshooting
"Mail server has experienced an error."
This error reports that there is something wrong on server side. Please ask your hosting administrator to check that if mail() function in PHP parser is configured properly.
"Response from mailing server was unclear. Please contact administrator."
This means that PHP responses are unclear. To investigate this error, check the following:
  • Open PHP file in web browser and check if it display OK word.
  • Check that action attribute points to correct path to php file.
Sometimes PHP file contains some syntax errors (often made during customization). Copy & paste whole PHP content to this online tool http://phpcodechecker.com/ and click analyze. It should help you find syntax errors.

Newsletter

The template is compatible with Mailchimp Newsletter.

You can create your own custom newsletter form through Signup Forms - Embedded Forms in Mailchimp website. Replacing the form action with the one in your generated newsletter code should be enough to personalize the existing forms in the template.