1. Start
  2. Quick setup
  3. CSS Files and Structure
  4. javascripts
  5. Sources and Credits
  6. NOTES

Sushi

responsive multipurpose html5 css3 template


Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Checkout http://www.template-responsive.nl/ for more examples made with this template

 

examples

Quick setup


Open index.html into your browser or in your favorite html editor (not dreamweaver!)

First replace the background images which can be found in the dir images/backgrounds/
There are two as an example bg1.jpg and bg2.jpg. You can add as many images as you like.

Now open js/main.js and find // fullscreen image background.

Change or add them here

slides : [ // Slideshow Images
   {
    image : 'images/backgrounds/bg2.jpg',
    title : 'Image Credit: Maria Kazvan'}
    , {
    image : 'images/backgrounds/bg1.jpg',
    title : 'Image Credit: Maria Kazvan'}
] }

Now open css/theme.css and find /* right container and /* left container
Here you can set the colors for the two containers in. Set both hex and rgba color

#content
{
 background:#fff;
 background:rgba(255,255,255,0.7);
}

aside
{
 background:#9A8652;
 background:rgba(154,134,82,0.7);
}

For the menu colors and fontsize open css/vertical-menu.css

For the scrollbar colors open jquery.mCustomScrollbar.css and find. Here you can set the different colors

.mCSB_scrollTools .mCSB_draggerRail{
 background:#A28955; /* rgba fallback */
 background:rgba(162, 137, 85, 0.4);
 filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
 background:#330000; /* rgba fallback */
 background:rgba(51,0,0,0.75);
 filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
 background:rgba(0,0,0,0.85);
 filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
 background:rgba(0,0,0,0.9);
 filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
}

If you want to use the ajax contact form open php/submit-form-ajax.php and change your mail adress

$to='here your emailadress' 

 

CSS Files and Structure


The css files has to be loaded in a particular sequence. The same goes for the js files

css/print.css
css/reset.css
css/style.css
css/theme.css

css/colorbox.css (colorbox lightbox)
css/vertical-menu.css (menu)
css/supersized.core.css (stretched background)
css/youtube-responsive.css (youtube playlist responsive)
css/call-us.css (callme buttons)
css/jquery-ui-1.8.24.custom.css (jquery UI)
css/jquery.mCustomScrollbar.css (custom scrollbars)
http://fonts.googleapis.com/css?family=Arbutus+Slab (google fonts)

The print.css is for printer friendly purpose

The reset.css to reset all css styles

The style.css for common css settings

The theme.css to overule or add your own styles so this has to set at last

The styles who are following after that are seperate addons

For the js files the most important one is js/main.js

Here you can set some main settings

I wrote some comments in the css and js files so you will know what the purpose is for the code
 

javascripts


Like I said before. js/main.js is where you can set all main js settings

There are several plugins used which can be modified to your needs

These are the ones which are needed!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="js/jquery-ui.min.js"%3E%3C/script%3E'))</script>

<!-- mousewheel plugin -->
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<!-- custom scrollbars plugin -->
<script type="text/javascript" src="js/jquery.mCustomScrollbar.min.js"></script>
<!-- Stretched background -->
<script type="text/javascript" src="js/supersized.core.3.2.1.min.js"></script>
<!-- Lightbox colorbox -->
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

and these ones

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/html5.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="js/PIE.js"></script>
<![endif]-->

First the supersized background plugin. Info for more settings can be found here http://www.buildinternet.com/project/supersized/ like setting up a slideshow for example

The jquery UI can also be modified or you can add more elements to your website.
Here
you will find the current css theme settings

There are are also two unique files added which are not availible for other projects

1. call me button. Examples here http://www.cfconsultancy.nl/callus/ and setting info here http://www.cfconsultancy.nl/callus/documentation/index.html

2. Responsive jquery html5 youtube auto playlist player. Examples here http://www.cfcms.nl/youtube-responsive/ and documentation here http://www.cfcms.nl/youtube-responsive/documentation/ 
 

Sources and Credits


NOTES


This is an modern css3 html template and there is just a simple fallback for IE8.

In IE8 the containers looses there transparency but it is still viewable and doesn't look that bad :-) 

IE7 isn't supported anymore.

If you use your browser to resize the lightbox colorbox has to be iniated again. So just refresh your browser if you set a small viewport and want to check the lightbox

If you want to use the contact form remember that php must be supported !

The images used in our demo are included in the download package but watermarked and cannot be used for any purpose!