Welcome and thank you for purchasing our theme Sauce. We prepared a throughout documentation to make your experience as pleasant as possible. We tried to cover every aspect of this theme, however, if you still have any questions or need clarification, feel free to email us via user page contact form.
This theme is built using Materialize, a modern responsive front-end framework based on Material Design. Make sure you visit their web-site to learn more about it.
This theme requires a pretty basic setup. In fact, the only thing your server needs is PHP installed, which is usually 99.9% of the cases. If you happend to be that 0.1%, please contact your hosting administrator and let him know you need PHP installed on your server.
Sauce works great in all of the modern browsers, as well as mobile browsers. It supports Internet Explorer 10+.
Installing our theme is extremely simple — just upload all the files to your server. In fact, you can test your theme locally as well, except for the forms functionality, which requires a server side language.
To function properly, you need to follow an overall HTML stucture rules. This means that most of the tags need to be opened and closed. Consider a following example:
<div class="section-class" id="section-id">
<h2>Title</h2>
<p>
Paragraph
</p>
</div>
As you can see, there is always an opening tag, e.g. <div>
and a closing tag — </div>. There are, of course,
a few exceptions.
Using an online Markup Validation Service will always ensure that your code is healthy, allowing the theme to function properly. It will give you some nice advices as well.
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
sass-lang.com
Using Sass is optional, so don't worry about this section in case you prefer pure CSS. However, it does make modifying your styles a much more pleasant experience.
Sauce's styles have been written using Sass with help of Bourbon library.
Make sure you take full advantage of it, if you are familiar with this technology. The main file
styles/sass/sauce.scss contains imports of various components. All components are very specific, making
it very simply to maintain the code.
Using Sass, you can modify the whole color scheme by changing only one variable —
$color, found in
styles/sass/_colors.scss on line 4. This modify the following variables
that define base, light, dark and accent colors according to the
Materialize Color Palette.
You can choose to have your h2 titles be displayed in Roboto
or in Bukhari. To do the
latter, just include bukhari class in your
<body> tag.
Sauce has a lot of sections with image backgrounds. All of these are powered by Owl galleries, so you can have multiple slides per each section. This requires a certain HTML structure, that looks like this:
<div class="section owl-section" id="section-id">
<div class="owl-carousel">
<!-- Background slides -->
<div style="background-image:url(images/category/slide-1.jpg)"></div>
<div style="background-image:url(images/category/slide-2.jpg)"></div>
</div>
<!-- Vertically aligned container -->
<div class="container-wrapper valign-wrapper">
...
</div>
</div>
Make sure you include all the needed classes and follow this order.
Sauces uses WOW.js to animate its contents. You can easily customize, add or disable these animations.
Each animated element has got a wow class with a following animation
effect that you can pick on this page.
Too much WOW? Just remove the classes from individual elements you want to be static.
Way too much WOW?
Disable all animations by commenting the following line in scripts/sauce.js (towards the
end of the script):
init: function() {
...
//this.wow();
...
}
The menu section uses Materialize tabs. When using overlay navigation, the tabs will stick to the top as the user scrolls down. This will be disabled when using fixed navigation bar.
As described on Materialized web-site, a tab must have an href and
which will correspond to tab content container's id.
Sauce uses Masonry gallery to help you showcase some of your best photos. You can use different column sizes to create the layout that will most suit you.
Configuring your contact and reservations form is very simple. Just open the php/config.php file and
edit the following lines.
<?php
$me = array(
'email' => 'your@email.com',
'name' => 'Your Name'
);
If you are familiar with SMTP technology, you can enable it in the same php/config.php
file. Sending email with SMTP proves to be a little bit more reliable, so consider learning more about it.
The following is an example using a Gmail account.
$smtp = array(
'enabled' => true,
'host' => 'smtp.gmail.com',
'username' => 'googleid@gmail.com',
'password' => 'googlepassword',
'port' => 587,
'encryption' => 'tls'
);
You can always ask your hosting provider about your SMTP settings. If you tried configuring your SMTP server on port 465 (with SSL) and port 587 (with TLS), but are still having trouble sending mail, try configuring your SMTP to use port 25 (with SSL).
Required input fields must have a class="required" attached to them.
Contact form is using toasts to notify the user
about various statuses of the form. For instance, if user inserts an invalid email address, the form
will ask him or her to verify it. These messages can be configured in scripts/config.js file
under the toastMessages key:
var config = {
// Various toast messages
toastMessages: {
fillInRequiredFields: 'Please fill in the required fields.',
enterValidEmail: 'Please enter a valid email address.',
messageSent: "Your message has been sent. We'll get back to you soon.",
somethingWrong: 'Something went wrong, try again. Error: '
},
...
If your message contains an apostrophe or a single quote, make sure it's wrapped in double quotes,
like the messageSent message. Otherwise, feel free to use single quotes.
The events section must follow a certain HTML structure in order to function. Don't forget to include
event-container class to your outter container.
In case you want to use modal to provide additional information about the event, include a modal trigger like this:
<a class="modal-trigger" href="#modal-id">Learn More</a>
And a modal after the event container:
<div id="modal-id" class="modal bottom-sheet">
<div class="modal-content">
...
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close">Close</a>
</div>
</div>
Learn more about Materialize modals.
To show the point where your company is located, you need to go to Google maps page and look for your location. After finding the desired point and zoom level, take a look at the url field. You will see something like this
https://www.google.com/maps/place/Los+Angeles,+CA,+USA/@34.0196096,-118.31719,16z/data=!4m2!3m1!1s0x80c2c75ddc27da13:0xe22fdf6f254608f4
Note the following part @34.0196096,-118.31719,16z. These are your:
Now, open the scripts/config.js file, find the following lines towards the bottom
of the script and substitute the values with yours:
var config = {
...
// Google map position and marker name
googleMaps: {
lat: 34.0549946,
lng: -118.2475384,
zoom: 16
}
};
You may wish to create your own style, using the awesome Snazzy Maps.
In this case, just substitute scripts/map-style.js variable
mapStyle with your array of styles. Make sure you backup the old
file just in case.
You can take advantage of Skype's buttons to ease your customer's way of reaching you. By simply adding the following code, you allow the user to open the skype app and start chatting with you right away.
<a href="skype:username?chat"><i class="fa fa-skype"></i> Skype contact</a>
If you want to allow a direct call, just change ?chat to
?call.
To add an Instagram feed, just go to instansive.com and configure
a feed using either username or a hashtag. Paste the code in the footer area. Look for
<!-- INSTANSIVE WIDGET --> and substitute the existing code
with yours.
Sauce comes with a pre-configured, ajax-enabled MailChimp subscribe form. It can help you collect lists of subscribers, which you can use to send your newsletters to.
To make it all work, follow these simple steps:
Now, copy the code from the Copy/paste onto your site and, guess what, paste it onto
your site. Just look for <!-- Begin MailChimp Signup Form -->
in the footer area.
Now you just need to remove <link>...</link> and
<style>...</style>, so default MailChimp styles
don't interfer with Sauce styles. You're all set.
Touch icons are the icons of your web-site that are displayed on various mobile devices. For example, if someone wants to add your site to their home screen, they will view the icon you include. There are quite a few formats you need to handle, inculding iPhone, iPad, Android devices and Microsoft devices. To help you with this process, you can use a touch icons generator web-site, for example realfavicongenerator.net.
After you're done generating your icons, leave the favicon.ico in your root directory and
place everything else in favicons/ directory. Make sure the
href paths are correct, for example:
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
Huge thanks to all the awesome people who create and share their beautiful works.