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.
<body class="full-layout">
<body class="box-layout">
Basic Navigation/Menu Structure:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="current"><a href="index.html"><strong>Single & Current Menu Item</strong></a></li>
<li><a href="#!">Menu Item with Dropdown</a>
<ul class="dropdown-menu">
<li> <a href="#!">Submenu Levels</a>
<ul class="dropdown-menu">
<li><a href="#">Second Level</a></li>
<li> <a href="#!">More</a>
<ul class="dropdown-menu">
<li><a href="#">Third Level</a></li>
<li><a href="#">Third Level</a></li>
</ul>
</li>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
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.
| File Name | Description |
|---|---|
logo.png |
Default logo (e.g.: 100x100px) |
logo@2x.png |
High resolution logo (e.g.: 200x200px) |
<img src="#" srcset="style/images/logo.png 1x, style/images/logo@2x.png 2x" alt="" />
There are 8 color options: aqua, blue, green, navy, orange, pink, purple and red the default being red. To change the default color scheme you will have to edit the color css file name in each HTML page.
<link href="style/css/color/red.css" rel="stylesheet">
Update contact/vanilla-form.php and specify recipients e-mail address by filling emailRecipients and emailSender options. These email addresses will receive all form inquires/messages..
/** * Recipient's e-mail. To this e-mail email will be sent. * E.g. Single recipient * 'emailRecipients' => 'john@domain.com', * * E.g. Multiple recipients * 'emailRecipients' => 'john@domain.com, andy@domain.com', */ 'emailRecipients' => 'your-email@domain.com', /** * 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' => 'john@domain.com', */ 'emailSender' => 'your-email@domain.com'
To translate the success and error messages please follow these steps
Find the following code in style/js/scripts.js:
document.addEventListener("DOMContentLoaded", function() {
var myForm;
myForm = new VanillaForm(document.querySelector("form.vanilla"));
});
and change it as follows:
document.addEventListener("DOMContentLoaded", function() {
var myForm;
myForm = new VanillaForm(document.querySelector("form.vanilla"));
myForm.dict.markedAsSpamError = "Your message was marked as spam and was not sent! Fix your message!";
myForm.dict.sendSuccess = "We have received your inquiry. Stay tuned, we’ll get back to you very soon.";
});
Then you can edit the messages as you wish.
If you would like to use a different font, copy the font link in Google Fonts page and paste it before closing head tag in your HTML files.
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,200,300,500,600,700,900' rel='stylesheet' type='text/css'>
Then you need to add the font name to your CSS styles.
body {
font-family: 'Source Code Pro';
}
The basic structure of the sections that have the parallax effect. Please make sure you enter correct width and height values of the images you use in the parallax sections.
<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>
You can find detailed information about revolution slider elements and options HERE