Tempera Documentation
A detailed overview of the Tempera Theme.
A detailed overview of the Tempera Theme.
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.
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.
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.
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.
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">
Make sure to only use one of the 15 available stylesheets available!
Tempera has a customized Button Style, which is styled in the Main-Color, defined in the assigned CSS-file.
An example of the Custom Button Style:
<a href="#" class="btn btn-custom">Sign Up</a>
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>
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>
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.
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>
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:
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')">
...
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.
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";
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";
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.
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 Tempera Theme has diffrent headers in the diffrent .html-files.
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>
The slogan has the color white (
content-inverted
). For a good readability you should only use images, which are dark enough.
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"
}
});
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!
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"
}
});
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>
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
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">
Tempera includes a working contact form. In order to activate the form, follow these directions:
mail/contact_me.php
file.
$to = 'mailto@yourmail.com'; // *REPLACE WITH THE EMAIL ADDRESS YOU WANT THE FORM TO SEND MAIL TO*
$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.
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 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.
The images and videos used in the Tempera theme are for demo purposes only.