The
kernel

Customize in your favorite flavor

What is this?

This is a sample, easy and fast template that let you to easy configure your website with amazing effects, options and settings.

Features

HTML5 & CSS3.
Notifications option with sound alert.
Cart view option.
User settings control.
Multi-backgrounds.
Flexible layout.
Fast loading.
Clean & simple.

How is it works?

It's a collections of classes that you easily call it and it working automatically.

The page contents of a sample HTML page like the following:

<!DOCTYPE html>
<html>
    <head>
        <title>Your title here</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="lib/css/app.css" />
        <script type="text/javascript" src="lib/js/jquery-2.1.0.min.js"></script>
        <script type="text/javascript" src="lib/js/app.js"></script>
    </head>
    <body>        
        <div id="body">
            Background images goes here.    
        </div>
        <div id="contentsBack" class="backgroundColor1"></div>
        <div id="contents">
            <header id="logo">  
                    <div id="topMenu" class="backgroundColor2 color2 border2">
                           All top bar goes here.
                    </div>                
                <img id="logo" src="lib/images/logo.png" />                    
            </header>
            <div id="banner">Banners goes here.</div>
            <div id="content">
                <ul id="menu" class="theMenu"> Menu goes here </ul>
                <div class="content"> contents goes here </div>
         </div>
         <div id="footer"> Footer goes here </div>


         <div id="sounds">
            Sound files goes here.        
        </div>
        <div id="equalizer" class="sides left"></div>


        <div id="noJavascript">
            <div class="title">JAVASCRIPT IS DISABLED</div>
            Please enable your Javascript in order to use all of the functions on our website.
        </div>
    </body>
</html>

How to add multi-backgrounds?

Add your images tags inside a div with id (body):

<div id="body">
  Background images goes here.    
</div>

with each image tag you can set the effect class (random is default) for example:

<div id="body">
            <img class="random fade" src="images/1.png" />
            <img class="horizontal fade" src="images/2.png" />
            <img class="vertical fade" src="images/3.png" />
            <img class="vertical horizontal fade" src="images/4.png" />              
            <img class="zoom fade" src="images/5.png" />       
            <img class="zoom vertical horizontal fade" src="images/6.png" />       
     
</div>

The list of class effects:

fade: to show the image background with fade in and out.
horizontal: to move the background slower horizontal.
vertical: to move the background slower vertical.
zoom: to scale the background from (100% to 110 %) and vice versa.
random:let the system choose the effect between the last 3 effects above or make a mix max of them.
none: to disable effects.

How to configure the top bar?

The top bar is locate under the path: #contents -> #logo -> #topMenu

<div id="contents">
            <header id="logo">  
                    <div id="topMenu">
                           All top bar goes here.
                    </div>                
            </header>
</div>

You can customize the top bar by add / remove the next features:

1- Notifications: by adding a DIV with id (notifications) and class icon under DIV#topMenu

if the is a new notification and you want to create a notification sound (with calculate all new notifications) just add a class (newItem) to each new item like in the next example.
notificationsIsEmpty attribute let you to set the default text that appears in case of there is not notifications items found.

<div id="notifications" notificationsIsEmpty="No notifications found !" class="icon">  
                            <div class="menu focus"><a href="#">You have 2 new notifications, See all</a></div>
                            <div class="items">
                                    <div class="menu item newItem alert">Domain will expire soon</div>
                                    <div class="menu item newItem analysis">New analysis avaliable</div>
                                    <div class="menu item error">System Error !</div>
                                    <div class="menu item ok">System checked !</div>
                                    <div class="menu item file">Read our new rules</div>
                                    <div class="menu item copy">Backup success</div>
                                    <div class="menu item point">5 people liked your link</div>
                                    <div class="menu item info">Informations are required</div>
                                    <div class="menu item announce">New Announce</div>
                                    <div class="menu item block">You are blocked</div>                        
                            </div>
</div>

2- user account: by adding a DIV with id (account) and class icon under DIV#topMenu
- You can add a form login for example:

<div id="account" class="icon">
                            <div class="menu form">
                                <form action="#" method="post">
                                    <input class="inputs" type="text" value="Username" />
                                    <input class="inputs" type="password" value="Password" />
                                    <input class="submitButton" type="button" value="Login »" />
</form>
                            </div>
                            <div class="menu createAccount">
                                <a class="newaccount" href="#">Create a new account</a>
                            </div>
</div>

- Also you can add account links for example:

<div id="account" class="icon">                
                <div class="items">
                                    <div class="menu item">Edit account</div>
                                    <div class="menu item">Change password</div>
                                    <div class="menu item">Logout</div>                                       
                  </div>            
</div>

3- Cart view:by adding a DIV with id (cart) and class icon under DIV#topMenu

emptyCart attribute let you to set the default text that appears in case of there is not items found in the cart.

<div id="cart" emptyCart="Your cart is empty" class="icon">
                            <div class="menu focus"><a href="#">You have 4 items, view cart ( 46.99 $)</a></div>
                            <div class="items">
                                <div class="menu item">example.com <span class="price">10.99 $</span></div>
                                <div class="menu item">shared host monthly <span class="price">6.00 $</span></div>
                                <div class="menu item">support service <span class="price">10.00 $</span></div>
                                <div class="menu item">example product <span class="price">20.00 $</span></div>
                              </div>
</div>

4- Setting user control:by adding a DIV with id (settings) and class icon under DIV#topMenu

You can remove the menu that you don't want the user control it.

<div id="settings" class="icon">
                            <!-- Notification controls (volume & on/off switch) -->
                            <div class="menu">
                                <div class="blod">Notification sound: </div>
                                <div id="notify"></div>
                            </div>

                            <!-- Music control (volume & on/off switch) -->
                            <div class="menu">
                                <div class="blod">Music sound: </div>
                                <div id="music"></div>
                            </div>

                            <!-- Play / Stop background slide show -->
                            <div class="menu">
                                <input type="checkbox" id="backgroundCtrl" />
                                <label for="backgroundCtrl">
                                    Play background slide show
                                </label>
                            </div>
</div>

How to configure the banners?

The banners is locateing under the path: #contents -> #banner

<div id="contents">
            <div id="banner">Banners goes here.</div>
</div>

To create a banner add a new DIV under #contents -> $banner with class "banners"
add a image tag of banner path with size (980 X 332)
also all text you want to appear on this banner with tag (p)
for example:

<div id="banner">
                <div class="banners">
                    <img src="Banner 1 image path goes here" />
                    <p timeout="1" class="effects class goes here">Texts goes here</p>
                </div>
                <div class="banners">
                    <img src="Banner 2 image path goes here" />
                    <p timeout="1" class="effects class goes here">Texts goes here</p>
                </div>
                <div class="banners">
                    <img src="Banner 3 image path goes here" />
                    <p timeout="1" class="effects class goes here">Texts goes here</p>
                </div>
</div>

To add effect to text add the effect class to the p tag Also the settings effect you want form the next list:

1- The text position class:

right: to make the class on the right.
left: to make the class on the left.
center: to make the class on the center.
top: to make the class on the top.
bottom: to make the class on the bottom.

The next shape is clearing how to call the position for each banner text:

2- The text effect classes:

show: to show the text from text top left cornor to text right bottom.
slideDown: to show the text from text top to text bottom.
comeH: to make the text appear from right to left in case of the position is left or center. Also come from left to right in case the position is right.
comeV: to make the text appear from bottom to top in case of the position is top. Also come from top to bottom in case of the position is bottom.
maximize: to maximize the text from text left to text right.
minimize: to minimize the text from text right to text left.
No effect selected: (default) make the text fade in.

Timeout attribute

This attribute let you to set the time out to appear the text for exampe:

<div id="banner">
                <div class="banners">
                    <img src="Banner 1 image path goes here" />
                    <p timeout="1" class="effects class goes here">Texts goes here</p>
                    <p timeout="10" class="effects class goes here">Texts goes here after 10 times</p>
                    <p timeout="20" class="effects class goes here">Texts goes here after 20 times</p>
                </div>
</div>

How to configure the menu?

The menu is locateing under the path: #contents -> #content -> #menu with class (theMenu)

<ul id="menu" class="theMenu">
       <li><a href="Page path">Page Name</a></li>
</ul>

You can select the selected page on the menu by adding class (selectedpage) to the page link tag
for example we have a 3 pages on the menu (Home / products / Contact) and the selected page now is products:

<ul id="menu" class="theMenu">
                    <li>
                        <a href="index.html">Home</a>
                    </li>               
                    <li>
                        <a class="selectedpage" href="products.html">Products</a>
                    </li>
                    <li><a href="contactus.html">Contact</a></li>                    
</ul>

Also you can add a quick search on the menu by adding the last code a bove the search form:

<ul id="menu" class="theMenu">
                    <li>
                        <a href="index.html">Home</a>
                    </li>               
                    <li>
                        <a class="selectedpage" href="products.html">Products</a>
                    </li>
                    <li><a href="contactus.html">Contact</a></li>
                    <form action="#" id="quickSearch">
                        <input title="Search for Something" class="searchInput" type="text" value="" />
                    </form>
</ul>

How to configure the music list?

1- Add a the music file paths in a DIV inside a DIV with id #sounds include this format:

<div title="The music Title here">The path to the music file here</div>

for example:

<div id="sounds">
            <div title="Demo music 1 (Hurry up) - created by codesgit.com">lib/sounds/hurry_up.mp3</div>
            <div title="Demo music 2 (Danger) - created by codesgit.com">lib/sounds/danger.mp3</div>
</div>

2- To appear the music list add this part after the DIV#sounds

<div id="equalizer" class="sides left"></div>

For example:

<div id="sounds">
            <div title="Demo music 1 (Hurry up) - created by codesgit.com">lib/sounds/hurry_up.mp3</div>
            <div title="Demo music 2 (Danger) - created by codesgit.com">lib/sounds/danger.mp3</div>
</div>
<div id="equalizer" class="sides left"></div>

3- You can let the user control the music volume from user settings as discus before.

How to configure the tempalte color?

To configure the template color choose the color between (gray - violet - blue - red - green) and add it ass a class to the body tag for example to load the blue colors:

<body class="blue">

The kernel v1 . 0

The kernel Customize in your favorite flavor