Dialog Start tour

Toolbar

This theme has easy to use toolbars, which you can use for a basic toolbar with a couple of buttons or a toolbar which has navigation and a submit button in it. You can use the custom made eMenu, pixel buttons, widget navigation, Grouped iconss and more in these toolbars.

Basic

Easy to use toolbars.

How to use

How to use HTML elements.

Markup
<div class="toolbar">
    <div class="left">
        <a class="button-icon" href="javascript:void(0);">
            <span class="min-10 plix-10"></span>
        </a>
        <a class="button-icon" href="javascript:void(0);">
            <span class="plus-10 plix-10"></span>
        </a>
        <span class="separator"><!-- seperator --></span>                                                 
        <a class="button-icon" href="javascript:void(0);">
            <span class="home-10 plix-10"></span>
        </a>
        <a href="javascript:void(0);" class="button-icon">
            <span class="folder-10 plix-10"></span>
        </a>
        <a href="javascript:void(0);" class="button-icon">
            <span class="trashcan-10 plix-10"></span>
        </a>
        <span class="separator"><!-- seperator --></span> 
        <a href="javascript:void(0);" class="button-icon">
            <span class="tags-10 plix-10"></span>
        </a>                                                 
    </div>
    <div class="right">
        <div class="preloader">
            <span></span>
        </div>
        <input type="text" placeholder="Search"/>
    </div>
</div>

Music Toolbar

Easy to use toolbars.

How to use

How to use HTML elements.

Markup
<div class="toolbar">
    <div class="left">
        <a class="button-icon" href="javascript:void(0);">
            <span class="arrow-left-end-10 plix-10"></span>
        </a>
        <a class="button-icon" href="javascript:void(0);">
            <span class="arrow-right-end-10 plix-10"></span>
        </a>
        <span class="separator"><!-- seperator --></span>                                                  
        <a class="button-icon" href="javascript:void(0);">
            <span class="arrow-left-10 plix-10"></span>
        </a>
        <a href="javascript:void(0);" class="button-icon">
            <span class="stop-10 plix-10"></span>
        </a>
        <a href="javascript:void(0);" class="button-icon">
            <span class="pause-10 plix-10"></span>
        </a>  
        <a href="javascript:void(0);" class="button-icon">
            <span class="play-10 plix-10"></span>
        </a>                                                  
        <a class="button-icon" href="javascript:void(0);">
            <span class="arrow-right-10 plix-10"></span>
        </a>                                                   
    </div>
    <div class="right">
        <div class="toolbar-window">2:47 <span>/ 5:31</span></div>
        <span class="separator"><!-- seperator --></span> 
        <a class="button-icon" href="javascript:void(0);">
            <span class="folder-10 plix-10"></span>
        </a>                                                    
    </div>
</div>

Combi Toolbar 1

Easy to use toolbars.

How to use

How to use HTML elements.

Markup
<div class="toolbar">
    <div class="left">
       <ul class="e-splitmenu" id="demo-menu-2">
            <li><span>Dropdown</span><a href="javascript:void(0);"><span><!-- arrow --></span></a>
            
                 <div>
                    <ul>
                        <li><a href="javascript:void(0);">Sub link</a></li>
                        <li><a href="javascript:void(0);">Sub link</a></li>
                        <li><a href="javascript:void(0);">Sub link</a></li>
                        <li><a href="javascript:void(0);">Sub link</a></li>
                    </ul>                                      
                </div>                               

            </li>
        </ul>
        <span class="separator"><!-- seperator --></span>                                                
        <a class="button-icon" href="javascript:void(0);">
            <span class="home-10 plix-10"></span>
        </a>
        <div class="icon-group"> 
            <a href="javascript:void(0);"><span class="pencil-10"></span></a>
            <span></span>
            <a href="javascript:void(0);"><span class="trashcan-10 plix-10"></span></a>
            <span></span>
            <a href="javascript:void(0);"><span class="folder-10 plix-10"></span></a>                                          
        </div>
        <div class="preloader">
            <span></span>
        </div>
    </div>
    <div class="right">
        <div class="preloader">
            <span></span>
        </div>
        <a href="javascript:void(0);" class="button-icon">
            <span class="arrow-down-10 plix-10"></span>
        </a>
        <span class="separator"><!-- seperator --></span> 
        <a href="javascript:void(0);" class="button-text-icon"><span class="plus-10 plix-10"></span> Open</a>
    </div>
</div>

Example 1

Toolbar with navigation and select(eSelect).

How to use

How to use HTML elements.

Markup
<div class="toolbar">
   <div class="left">
        <ul class="widget-navigation">
            <li><a href="javascript:void(0);" title="" class="first">First</a></li>
            <li><a href="javascript:void(0);" title="" class="prev">Prev</a></li>
            <li><a href="javascript:void(0);" title="" class="active">1</a></li>
            <li><a href="javascript:void(0);" title="" class="num">2</a></li>
            <li><a href="javascript:void(0);" title="" class="num">3</a></li>
            <li>...</li>
            <li><a href="javascript:void(0);" title="" class="num">24</a></li>
            <li><a href="javascript:void(0);" title="" class="next">Next</a></li>
            <li><a href="javascript:void(0);" title="" class="last">Last</a></li>
        </ul>
    </div>
    <div class="right">
        <select name="" class="bulk-actions">
            <option value="">Bulk Actions</option>
            <option value="">Edit</option>
            <option value="">Delete</option>
        </select>
        <input type="submit" value="Apply" class="button-text"/>
    </div>
</div>

Example 2

Toolbar with text.

How to use

How to use HTML elements.

Markup
<div class="toolbar">
   <div class="left">
        <a href="javascript:void(0);" class="button-icon">
            <span class="upload-10 plix-10"></span>
        </a>
        <span class="separator"><!-- seperator --></span>
        <span class="label">Displaying 1–20 of 476</span>    
    </div>
    <div class="right">
        <div class="icon-group">
            <a class="selected" href="javascript:void(0);">
            <span class="grid-10 plix-10"></span>
            </a>
            <span></span>
            <a href="javascript:void(0);">
            <span class="rows-10 plix-10"></span>
            </a>
        </div> 
        <span class="separator"><!-- seperator --></span>                                                
        <select name=""class="per-page">
            <option value="">10</option>
            <option value="">20</option>
            <option value="">30</option>
            <option value="">40</option>
            <option value="">50</option>                                                        
        </select>
    </div>
</div>

Changed position

Toolbar positioned at the bottom.

How to use

How to use HTML elements.

Markup
<div class="toolbar toolbar-bottom">
    <div class="left">
        <a href="javascript:void(0);" class="button-icon">
            <span class="min-10 plix-10"></span>
        </a>
        <a href="javascript:void(0);" class="button-icon">
            <span class="plus-10 plix-10"></span>
        </a>
        <span class="separator"><!-- seperator --></span>                                                 
        <a href="javascript:void(0);" class="button-icon">
            <span class="home-10 plix-10"></span>
        </a>
        <a href="javascript:void(0);" class="button-icon">
            <span class="folder-10 plix-10"></span>
        </a>
        <a href="javascript:void(0);" class="button-icon">
            <span class="trashcan-10 plix-10"></span>
        </a>
        <span class="separator"><!-- seperator --></span> 
        <a href="javascript:void(0);" class="button-icon">
            <span class="tags-10 plix-10"></span>
        </a>                                                 
    </div>
    <div class="right">
        <div class="preloader">
            <span></span>
        </div>
        <input type="text" placeholder="Search"/>
    </div>
</div>

CSS dropdowna

Toolbar with css dropdowns.

How to use

How to use HTML elements.

Markup
<div class="toolbar">
    <div class="left">
        <ul class="css-menu">
            <li>
                <ul>
                    <li>
                        <a href="javascript:void(0);"><span class="bookmark-10 plix-10"></span> Bookmarks</a>
                    </li> 
                    <li>
                        <a href="javascript:void(0);"><span class="comment-10 plix-10"></span> Comments</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><span class="tags-10 plix-10"></span> Tags</a>
                    </li>                                                                                                                      
                </ul>  
                <a href="javascript:void(0);"><span class="home-10 plix-10"></span> Dashboard</a>    
            </li>    
            <li>
                <ul>
                    <li>
                        <a href="javascript:void(0);"><span class="document-10 plix-10"></span> Documents</a>
                    </li> 
                    <li>
                        <a href="javascript:void(0);"><span class="trashcan-10 plix-10"></span> Trashcan</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><span class="pencil-10 plix-10"></span> New folder</a>
                    </li> 
                    <li>
                        <a href="javascript:void(0);"><span class="delete-10 plix-10"></span> Delete folder</a>
                    </li>                                                                                                                    
                </ul>  
                <a href="javascript:void(0);"><span class="folder-10 plix-10"></span> Directory</a>     
            </li>                                                 
        </ul>                                            	                                            
    </div>
    <div class="right">
        <ul class="css-menu">
            <li>
                <ul>
                    <li>
                        <a href="javascript:void(0);">Server 1</a>
                    </li> 
                    <li>
                        <a href="javascript:void(0);">Server 2</a>
                    </li> 
                    <li>
                        <a href="javascript:void(0);">Server 3</a>
                    </li> 
                    <li>
                        <a href="javascript:void(0);">Server 4</a>
                    </li>                                                                                                                   
                </ul>  
                <a href="javascript:void(0);">Server</a>    
            </li> 
           <li>
                <a href="javascript:void(0);"><span class="stats-10 plix-10"></span> Statistics</a>
           </li> 
        </ul>
    </div>
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
toolbar div Main toolbar class. 1.0
toolbar-bottom div Class that will pin the toolbar to the bottom instead of the default position(top). 1.0
toolbar-size-small div Used for a smaller size of toolbar. 1.0
left & right div These are classes to float a part to the left or right. These are framework classes, which you can use everywhere. 1.0
seperator span Seperator line between elements. 1.0
preloader div Shows a animated preloader image. 1.0
toolbar-window div Used to display some kind of info(example can be found in the music toolbar). 1.0
home-10 span Icon class, you can find a overview of all of the icons here. 1.0
plix-10 span Custom icon size class. 1.0