Help Documentation

Topics
Other

UPDATE AVAILABLE! Sandbox is now much easier to use with updated help documentation and code snippets. Get the latest version from the Downloads page on Themeforest.

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.

Project Structure

Folder / Files Description
assets / dev Contains template files with unminified .css and .js. Use this folder if you don't wish to use Node.js, Gulp or Sass.
assets / src All template source files like .html, .scss, .js that are then processed (compiled / minified) to assets/dist folder.
assets / dist All template distribution files like .html, .css, .js that have been processed (compiled / minified) from assets/src folder using Node.js and Gulp.
package.json Includes the list of dependencies to install from npm.
gulpfile.js Configuration file for Gulp library. It contains all tasks to perform with Gulp. Learn more about it from Working with Gulp section or official Gulp documentation.
assets / src / js This folder contains main theme.js and vendors .js. If you don't wish to use all included plugins and scripts, just remove unwanted vendors from assets/src/js/vendor then remove unwanted functions from assets/src/js/theme.js and recompile.
assets / src / css This folder contains vendor .css. If you don't wish to use all included plugins, just remove unwanted vendor css from assets/src/css/vendor and recompile.
assets / src / scss This folder contains all project sass files that are compiled and minified in assets/dist/css/ folder.
assets / src / html This folder contains all .html files and partials that are compiled into HTML in assets/dist folder.

Gulp Setup

This step aims for advanced users who want to speed up development process and is optional. You can still use plain HTML / CSS / JS to customize Sandbox. Files you need are located inside assets/dev folder.

If you'd like to speed up development process with node.js, gulp.js and Sass, then follow these steps:

  • Install Node.js if you don’t have it yet.
  • Unzip the template package and in the root project folder sandbox, go to your command line and run npm install. This will install the npm packages listed in the package.json file.
  • You should now have the project files set up, and all the npm packages installed.
  • gulp This command will fire default gulp task which includes: creating assets/dist folder, launching BrowserSync, merging vendor libraries, javascript minification, sass and html compilation and starting watch task.
  • gulp serve This command will launch watch task and BrowserSync. It will watch changes of your .scss / .js / .html files and automatically compile them into .css / .js / .html.
  • If you don't wish to use all included plugins and scripts, just remove unwanted vendors from assets/src/css/vendor and assets/src/js/vendor then remove unwanted functions from assets/src/js/theme.js and recompile.
Installing npm packages
npm install
Gulp Commands
gulp
gulp serve

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="img/logo.png" srcset="img/[email protected] 2x" alt="" />

Colors

There are 12 color options: aqua, blue, green, leaf, orange, pink, purple, red, violet, navy, yellow and ash, the default one being blue. To change the color scheme, add color CSS file in head tag after .style.css link in HTML pages.

To change the primary color to a custom color, open assets/src/scss/user-colors.scss and assign your custom color value to $primary as seen on the right.

Example
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/colors/green.css">
Custom Primary Color
(assets/src/scss/user-colors.scss)
$primary: #36a6cf;

Fonts

To use a custom font, first add the font files inside folder assets/src/fonts/ Then use the example on the right to import your custom font.

To use a Google font, use the example on the right.

Custom Font
@import "../../fonts/myfont/myfont.css";
$font-family-sans-serif: "My Font Name", sans-serif;
Google Font
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
$font-family-sans-serif: 'Montserrat', sans-serif;

SVG Icons

Please note that due to the same-origin policy SVGInject does not work when run from the local file system in many browsers (Chrome, Safari), yet in Firefox it works.

Spacing

Sandbox adds additional spacing classes to existing Bootstrap spacing classes: https://getbootstrap.com/docs/5.0/utilities/spacing/ from 6 to 25 which can be seen in _variables.scss

Blocks

We put together all the template blocks for you to easily copy and paste to your pages. Please refer to Blocks menu in the template demo to reach them.

Scroll Animations

ScrollCue plugin enables showing elements by scrolling. Please refer to https://sandbox.elemisthemes.com/animations.html to see details on usage and examples.

Slider

To add animations on the slider captions you can use animate.css classes: https://animate.style.

Make sure to have animated-caption class on your captions.

<div class="hero-slider-wrapper bg-dark">
  <div class="hero-slider owl-carousel dots-over" data-nav="false" data-dots="true">
    <div class="owl-slide d-flex align-items-center bg-overlay bg-overlay-400" style="background-image: url('img/photos/bg7.jpg');">
      <div class="container">
        <div class="row">
          <div class="col-md-10 offset-md-1 col-lg-7 offset-lg-0 col-xl-6 col-xxl-5 text-center text-lg-start">
            <h2 class="display-1 fs-56 mb-4 text-white animated-caption" data-anim="animate__slideInDown" data-anim-delay="500">We bring solutions to make life easier.</h2>
            <p class="lead fs-23 lh-sm mb-7 text-white animated-caption" data-anim="animate__slideInRight" data-anim-delay="1000">We are a creative company that focuses on long term relationships with customers.</p>
            <div class="animated-caption" data-anim="animate__slideInUp" data-anim-delay="1500"><a href="#" class="btn btn-lg btn-outline-white rounded-pill">Read More</a></div>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/.container -->
    </div>
    <!--/.owl-slide -->
  </div>
  <!--/.hero-slider -->
</div>
<!--/.hero-slider-wrapper -->

Mockups

If you wish to use/edit the mockups used in the demo, please contact us and we will send you the PSD files.

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.

<form action="INSERT YOUR CUSTOM NEWSLETTER ACTION KEY HERE" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target=" _blank" novalidate>  
  <div id="mc_embed_signup_scroll2">
    ...
  </div>
</form>

Contact Form

Configuration

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

$fromEmail
An email address that will be in the From field of the email
$sendToEmail
An email address that will receive the email with the output of the form.
php/contact.php
// an email address that will be in the From field of the email.
$fromEmail = '[email protected]';
$fromName = 'Sandbox Contact Form';

// an email address that will receive the email with the output of the form
$sendToEmail = '[email protected]';
$sendToName = 'Sandbox Contact Form';
Custom messages

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

contact/contact.php
// subject of the email
$subject = 'New message from Sandbox contact form';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage = 'We have received your inquiry. Stay tuned, we’ll get back to you very soon.';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';