Introduction

Tempera is a one page website theme built on the Twitter Bootstrap framework.

Thank you for very much for purchasing Tempera Theme! These docs provide usage instructions for functionality built into the theme. If you have any further problems with the theme, or encounter any bugs, please do not hesitate to contact wawidesign Themes.

Theme Features

The Tempera Theme offers two types of themes yet ( more coming up soon in future releases ), including 15 diffrent color schemes.

The theme also includes Less files for deeper customization, a working contact form, and a variety of powerful jQuery plugins.

Plugins

The following plugins are used in the Tempera theme. For more detailed usage instructions for each plugin, please visit the plugin website using the links provided below.

Font Awesome
The iconic font designed for Bootstrap.
Plugin Website

Superslides.js
A lightweigt and responsive fullscreen slideshow.
Plugin Website

Owl Carousel
A touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders.
Plugin Website

jQuery Mixitup
A jQuery plugin for sorting Elements. This plugin
Plugin Website

fitvids
A jQuery plugin for responsive video embeds from diffrent sources.
Plugin Website

photoswipe.js
A fully responsive image gallery.
Plugin Website

jq Bootstrap Validation
A jQuery valdiation plugin for Bootstrap forms.
Plugin Website

Formstone - Wallpaper
A jQuery plugin for smooth-scaling image and video backgrounds.
Plugin Website

WOW.js
A jQuery plugin for reveal animations when you scroll.
Plugin Website

Animate.css
A CSS plugin for CSS animations.
Plugin Website

Updating Plugins

Always keep in mind, that updating a plugin to a newer version may cause some elements in the theme to malfunction. Please contact wawidesign Themes. It then will be updated in a future release.

Color Schemes

Tempera comes built with 15 different color schemes. Each color scheme has it's own CSS file associated with it. After you've picked a color scheme, make sure to uncomment it within the <head> tag. You can use any of the following color schemes:

  • <link rel="stylesheet" type="text/css" href="assets/css/styles-grey.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-dark-blue.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-light-blue.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-turquoise.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-brown.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-red.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-orange.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-green.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-purple.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-pink.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-soft-grey.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-soft-blue.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-soft-brown.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-soft-green.css">
  • <link rel="stylesheet" type="text/css" href="assets/css/styles-soft-pink.css">

Use Only One Stylesheet

Make sure to only use one of the 15 available stylesheets available!

CSS Styles

Custom Button Styles

Tempera has a customized Button Style, which is styled in the Main-Color, defined in the assigned CSS-file.

CSS-Class btn-custom

An example of the Custom Button Style:

<a href="#" class="btn btn-custom">Sign Up</a>

CSS-Class btn-circle

if you want a the same Custom Button Style with rounded corners, use this style instead the btn-custom:

<a href = "#our-way" class="btn btn-circle"> Learn more</a>

Special Content-Styles

content-inverted

Tempera has a special Content-Inverted-Style-Class, which is used to make diffrent objects look great on dark backgrounds, like dark images or colored background-sections. In this case for example all the font-styles and other elements are set to white.

Simply add the class named content-inverted to the container, which includes the elements that should be displayed in that way:

The slogan of this Theme is a nice example for that usage:

<div class = "slogan content-inverted text-center">
	...
</div>

More Info about the Content Inverted Style

If you want more information about which objects are affected by the content-inverted-class, or if you want to customize the look by your own, just take a look at the Less file assets/Less/styles/content-inverted.Less.

transparent-content-box

The Class transparent-content-box will add a nearly transparent content-box with 65% white in the background of the included tags. to get more readability for dark objects upon dark backgrounds.

On the other hand, you can also add this style in addition to the content-inverted-style explained in the chapter before. Then the color of the box will be 35% white. This is useful, if the background is not dark enough for the white objects of the content-inverted-style and you can't read the white text on the background without it. Then the transparent-content-box is a good solution to get more readability

In the Tempera Theme this is used for example in the Testimonials section. First the content-inverted-class is assigned to the whole section:

<section id="testimonials" class="testimonials content-inverted parallax-background" style="background-image: url('assets/img/background/img_10.jpg')">
Then inside the section, the Bootstrap-div col-lg-10, which includes the carousel, gets the class transparent-content-box:
<div class="col-lg-10 col-lg-offset-1 transparent-content-box">
   <div class="testimonials-carousel owl-carousel owl-theme" style="opacity: 1; display: block;">
   	   ...
   </div>
</div>

main-color-dark

The class main-color-dark can be used to style some Call-To-Action-Sections. If this class is added to a section it will get a 5% darker background-color than the assigned main-color of the Theme:

<section class="main-color-dark">
	...
</section>

The main-color-dark-Class will result in a Call-to-Action-Box like this, if the styles-grey.css is choosen:

parallax-background

The class parallax-background can be added to a section with a background-image, to create an easy Parallax-Effect, which works on devices with a screen-resolution greater than 1025 pixels width:

Example-Usage in the Footer of the Tempera Theme:

<footer class ="content-inverted parallax-background" 
  style="background-image: url('assets/img/background/img_7.jpg')">
  ...

Using the Less files

The Tempera Theme includes several Less files to make is easy to manage the CSS-Code of the diffrent Color-Schemes and make it easy to arrange the parts of the Main-CSS-file in a logical manner.

The Less folder

In the folder assets/less/... you find the Less files for the diffrent Color-Schemes.

Each Color-Scheme includes only one variable @main-color = ... which will be used in all the following Less files that are imported after the declaration via @import ...

When you compile all the Less files explained in this Documentation, these Color-Scheme-Less-files will output the diffrent Color Schemes, which you can embed as Main-CSS-files in the head tag.

Example of the styles-dark-blue.less:

/*styles-dark-blue*/
@main-color:#0000A0;

@import "styles.less";

The styles.less

As you can see at the end of the Example for the Color-Scheme above, each Less file in the Less folder imports the styles.Less at the end ( @import "styles.less"; ). This is required to include the same basic Less files in each and every Color-Scheme.

Basic Less files imported into the styles.Less:

@import "styles/media-queries.less";
@import "styles/mixins.less";
@import "styles/parallax-background.less";
@import "styles/navigation.less";
@import "styles/header.less";
@import "styles/content.less";
@import "styles/content-inverted.less";
@import "styles/portfolio.less";
@import "styles/team.less";
@import "styles/pricing.less";
@import "styles/forms.less";
@import "styles/footer.less";
@import "styles/portfolio.less";

/* extending Plugin-Styles*/
@import "styles/superslides.less";
@import "styles/photoswipe.less";
@import "styles/owl-carousel.less";

The Styles folder

In the Styles folder inside the Less folder ( assets/less/styles/... ) you can find all the basic Less files of this Theme. They all use one color-variable ( @main-color ), which is declared in each Color-Scheme-Less-file, inside the Less folder explained before.

Smooth Page Scrolling

Tempera is a One Page Theme. By clicking on a link in the navigation or inside the content it scrolls smoothly to the section-id with the same name.

This example shows you the link to the section:

<a href="#portfolio">Portfolio</a>

This example shows you the target-section:

<section id ="portfolio">...</section>

The Header

The Tempera Theme has diffrent headers in the diffrent .html-files.

Fullscreen Slideshow

You can change the images inside the slides-container...

<div id="slides" class = "top-slider">
	<div class = "slogan content-inverted text-center">
		...
	</div>
	
	<ul class="slides-container">   
		<li>
			<img src="assets/img/slides/img_1.jpg" alt="">
		</li>	
		<li>
			<img src="assets/img/slides/img_2.jpg" alt="">
		</li>
	        ...
	        
	</ul>
</div>

Finding the right images

The slogan has the color white ( content-inverted ). For a good readability you should only use images, which are dark enough.

Fullscreen Video

To configure a background video for your header, you have to configure the Formstone Wallpaper plugin in the assets/js/custom-scripts.js file. You must also be using the header structure used in the fullscreen-video.html sample file. You will also want to edit the file path of the mobile fallback image.

Example: Edit the poster and mp4 file paths in the custom-scripts.js file. Supported file formats are mp4, ogg, and webm. For more information on using the Formstone Wallpaper plugin, visit http://formstone.it/components/wallpaper.

// Formstone Wallpaper - Video Background Settings
$("header.video").wallpaper({
    source: {
        poster: "assets/img/imagevideo.jpg",
        mp4: "assets/video/imagevideo.mp4"
    }
});

Video Compression Tip

When you're using a background video for your header, you want to keep the file size as small as possible so you don't have pauses or stuttering in your video as it plays in the background. A great, open source tool you can use is a program called Handbrake. To compress your video, download Handbrake and run your video through the program with the "Web Optimized" box checked. It can convert a 20MB mp4 video file down to 2MB without quality loss!

Fullscreen Image

The fullscreen image version uses the same Formstone Wallpaper plugin like the video version. The only diffrence is the class="image" instead in the header section of the fullscreen-image.html. You will also have to change the extra function call in the assets/js/custom-scripts.js

Example: Edit only the poster file paths in the custom-scripts.js

// Formstone Wallpaper - Image Background Settings
$("header.image").wallpaper({
    source: {
        poster : "assets/img/background/img_11.jpg"
    }
});

Photoswipe Image Gallery

To add Images to the Photoswipe Gallery you must make sure to make it in the following syntax:

<div class="row my-simple-gallery" itemscope itemtype="http://schema.org/ImageGallery">
   
   <figure class="col-lg-3 col-md-4 col-sm-6" 
    itemprop="associatedMedia" itemscope 
    itemtype="http://schema.org/ImageObject">
	  <a href="assets/img/gallery/img_1.jpg" itemprop="contentUrl" 
	   data-size="1080x720"> <img class="img-thumbnail" 
	   src="assets/img/gallery/thumbs/img_1.jpg"  itemprop="thumbnail"  
	   alt="Image description" /> </a>
	  
	  <figcaption itemprop="caption description">
			Image-Text
	  </figcaption>
	  
	</figure>

	... 

</div>
	
                        

Syntax of the Photoswipe Gallery

The Syntax should be written that way to keep the Gallery SEO-friendly: http://photoswipe.com/documentation/seo.html.

It is also important to set the individual property (Example: data-size="1080x720" (width*height)) for each image

Adding some Bootstrap Classes to the images

To make the Photoswipe Gallery look responsive, wawidesign Themes just added the Class row to the Container my-simple-gallery and then added the Bootstrap Column classes to the tag figure .

Container with class=" row ":

<div class="row my-simple-gallery" itemscope itemtype="http://schema.org/ImageGallery">

Figure with class=" col-lg-3 col-md-4 col-sm-6 ":

<figure class="col-lg-3 col-md-4 col-sm-6" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">

Contact Form

Tempera includes a working contact form. In order to activate the form, follow these directions:

  • Open the mail/contact_me.php file.
  • On line 19, enter the email address you want mail sent to. $to = 'mailto@yourmail.com'; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE FORM TO SEND MAIL TO*
  • On line 22, enter the email address you want messages sent to you to be from. $headers = "From: yourSender@yourmail.com\n"; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE MESSAGE TO BE FROM* . Typically, an email address like noreply@your-domain.com will work here.
  • Save, and upload the file.

Adding Fields to the Contact Form

If you want to add fields to the contact form, you will need to edit the mail/contact_me.php file as well as the assets/js/contact_me.js file. Requires basic working knowledge of PHP and JavaScript.

If Your Form Isn't Working

If you have followed the instructions above, and uploaded your website to a live server and the form is still not working then it is likely that your web host is blocking the form from sending messages. In order to troubleshoot form functionality after it's been uploaded it is best to contact your server administrator or web host to see if there are permissions or security features preventing the form from sending, or if the version of PHP on your web server is not compatible with the form scripts.

Credits

Images and Videos

The images and videos used in the Tempera theme are for demo purposes only.