Apricot Bootstrap 3 Admin Dashboard Template

• Created: 04/05/2014
• By: themesmiles
• Email: mailto:agous.riyadi@yahoo.com

Dear buyer,

We are grateful for your choice of our theme and appreciation of our work. We ask you to take a moment for your comment and rating our theme.

Lots of love

Apricot - Admin Dashboard Team

FEATURES

Great Side Bar Menu

Apricot Bootstrap 3 Admin Dashboard Template has a sidebar menu that represents a modern user experience

Searchable Side Menu List

by Apricot Bootstrap 3 Admin Dashboard Template you can find the menu that you want, this much-needed facility for the menu with a lot number. eg megamenu

Clean & Simple Design

With a clean design, this template does not seem complicated. but very attentive to function as a backend template

Bootsrap

All the facilities available in order to accommodate all the features theVira can support with Bootstrapping.

HTML STRUCTURE

In total there are 29 main theme .html files:

1. 400.html - 404 Not found page
2. 500.html - 500 Not Found page
3. andvance-form.html - Andvance Form page
4. button.html - Buton and Dropdown menu page
5. blog-list.html - Blog List page
6. blog-detail.html - Blog Detail page
7. calender.html - Calendar and Date Picker page
8. chart.html - Flot Chart and Chart.js diagram and chart page
9. dashboard.html - Dashboard page
10. element.html - Element Page
11. file-upload.html - File Upload and DragDrop Ulpad Page html
12. form-element.html - Form Input, Radio Button, color Picker and Masked Input
13. grids.html - Grids bostrap element page
14. icon.html - Icon Font Page
15. invoice.html - Invoice Page
16. lock-screen.html - Lock Screen Page
17. login.html - Login Form alternative 1 page
18. mail.html - E-mail Page
19. map.html - Map Option Page
20. media.html - Media Page
21. pricing-table.html - Pricing Table Page
22. social.html - Social Page
23. table-dynamic.html - Data Table and Footable page
24. table-static.html - Responsive Standar Table
25. text-editor.html - Text Editor page
26. timeline.html - Timeline page
27. tree.html - treeviem menu page
28. typhography.html - Typhography page
29. wizard.html - wizards tab page

All these html files have certain html blocks in their source code. All the html blocks are clearly commented out and should be easy to spot. Most HTML files contain left navigation sidebar. The main structure of a typical page would be:

    



    


             SIDEMENU

    
 



    

        


                
                

                    

                        TITTLE
                    
                
                

                
                

                    
BREADCRUMB
                
                

                

                **CONTENT**


                 
                

                    


                         FOOTER

                    
               

        
    
      
  
    
    


        

                    RIGHT SLIDE CONTENT
        


    
         
          

CSS files and structure

Below are additional CSS files structure, there total there are 14 css files:

• animation.css
• bootstrap.css
• bootstrap-theme.min.css
• docs.css
• dripicon.css
• entypo.css
• entypo-icon.css
• extra-pages.css
• font-awesome.css
• hint.css
• icons-style.css
• loader-style.css
• mail.css
• maki-icons.css
• media.css
• signin.css
• style.css
• social.css
• typicons.css
• typicons-codes.css
• typicons-embedded.css
• typicons-ie7.css
• weather-icons.min.css

loader-style.css file imports all alternative stylesheets, so you don't need to include all .css files in each HTML page, simply add/remove necessary line in main.css (first lines):

@import "../js/skin-select/skin-select.css";
@import "font-awesome.css";
@import "entypo-icon.css";
@import "maki-icons.css";
@import "weather-icons.min.css";
@import "dripicon.css";



@import "../js/vegas/jquery.vegas.css";
@import "../js/pace/themes/pace-theme-center-simple.css";
@import "../js/datepicker/daterangepicker-bs3.css";
@import "../js/pnotify/jquery.pnotify.default.css";
@import "../js/tip/tooltipster.css";
              

Please keep in mind also that all the entries in the css is not ONLY in the folder assets/css, but also in the assets/js/.. it is mainly for css required by plugin of certain jquery

JQUERY PLUGIN

Here's some jquery files used for this template, each folder contains plugins that use this template

For Example for plugins related to the following date picker and also for the other

JQUERY LOADER

Explanations for plugin loaders, which are placed into main.js file. main.js serves as the main jquery to run Sidebar Menu, Searchable Menu, Tooltip Menus and other things that become the main plugin in this template

//Sliding Effect Control
head.js("assets/js/skin-select/jquery.cookie.js");
head.js("assets/js/skin-select/skin-select.js");

//Showing Date
head.js("assets/js/clock/date.js");

//Bootstrap
head.js("assets/js/bootstrap.js");

////Acordion and Sliding menu

head.js("assets/js/custom/scriptbreaker-multiple-accordion-1.js", function() {

    $(".topnav").accordionze({
        accordionze: true,
        speed: 500,
        closedSign: '',
        openedSign: ''
    });

});

////Right Sliding menu

head.js("assets/js/slidebars/slidebars.min.js", "http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js", function() {

    $(document).ready(function() {
        var mySlidebars = new $.slidebars();

        $('.toggle-left').on('click', function() {
            mySlidebars.toggle('right');
        });
    });
});

//-------------------------------------------------------------

//SEARCH MENU
head.js("assets/js/search/jquery.quicksearch.js", function() {

    $('input#id_search').quicksearch('#menu-showhide li');

});
//-------------------------------------------------------------



//EASY PIE CHART
head.js("assets/js/gage/jquery.easypiechart.min.js", function() {

    $(function() {


        $('.chart').easyPieChart({
            easing: 'easeOutBounce',
            trackColor: '#ffffff',
            scaleColor: '#ffffff',
            barColor: '#FF0064',
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
        var chart = window.chart = $('.chart').data('easyPieChart');
        $('.js_update').on('click', function() {
            chart.update(Math.random() * 100);
        });

        $('.speed-car').easyPieChart({
            easing: 'easeOutBounce',
            trackColor: 'rgba(0,0,0,0.3)',
            scaleColor: 'transparent',
            barColor: '#0085DF',

            lineWidth: 8,
            onStep: function(from, to, percent) {
                $(this.el).find('.percent2').text(Math.round(percent));
            }
        });
        var chart = window.chart = $('.chart2').data('easyPieChart');
        $('.js_update').on('click', function() {
            chart.update(Math.random() * 100);
        });
        $('.overall').easyPieChart({
            easing: 'easeOutBounce',
            trackColor: 'rgba(0,0,0,0.3)',
            scaleColor: '#323A45',
            lineWidth: 35,
            lineCap: 'butt',
            barColor: '#FFB900',
            onStep: function(from, to, percent) {
                $(this.el).find('.percent3').text(Math.round(percent));
            }
        });
    });

});
//-------------------------------------------------------------

//TOOL TIP

head.js("assets/js/tip/jquery.tooltipster.js", function() {

    $('.tooltip-tip-x').tooltipster({
        position: 'right'

    });

    $('.tooltip-tip').tooltipster({
        position: 'right',
        animation: 'slide',
        theme: '.tooltipster-shadow',
        delay: 1,
        offsetX: '-20px',
        onlyOne: true

    });
    $('.tooltip-tip2').tooltipster({
        position: 'right',
        animation: 'slide',
        offsetX: '-20px',
        theme: '.tooltipster-shadow',
        onlyOne: true

    });
    $('.tooltip-top').tooltipster({
        position: 'top'
    });
    $('.tooltip-right').tooltipster({
        position: 'right'
    });
    $('.tooltip-left').tooltipster({
        position: 'left'
    });
    $('.tooltip-bottom').tooltipster({
        position: 'bottom'
    });
    $('.tooltip-reload').tooltipster({
        position: 'right',
        theme: '.tooltipster-white',
        animation: 'fade'
    });
    $('.tooltip-fullscreen').tooltipster({
        position: 'left',
        theme: '.tooltipster-white',
        animation: 'fade'
    });
    //For icon tooltip
   


});
//------------------------------------------------------------- 

//NICE SCROLL

head.js("assets/js/nano/jquery.nanoscroller.js", function() {

    $(".nano").nanoScroller({
        //stop: true 
        scroll: 'top',
        scrollTop: 0,
        sliderMinHeight: 40,
        preventPageScrolling: true
        //alwaysVisible: false

    });

});
//------------------------------------------------------------- 




//------------------------------------------------------------- 

//toggle close

head.js("", function() {
    $('.nav-toggle').click(function() {
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).slideToggle(function() {
            if ($(this).css('display') == 'block') {
                //change the button label to be 'Show'
                toggle_switch.html('');
            } else {
                //change the button label to be 'Hide'
                toggle_switch.html('');
            }
        });
    });


});



//------------------------------------------------------------- 
//PAGE LOADER
head.js("assets/js/pace/pace.js", function() {

    //
    paceOptions = {
        ajax: false, // disabled
        document: false, // disabled
        eventLag: false, // disabled
        elements: {
            selectors: ['.my-page']
        }
    };

});

//------------------------------------------------------------- 

//SPARKLINE CHART
head.js("assets/js/chart/jquery.sparkline.js", function() {

    $(function() {
        $('.inlinebar').sparkline('html', {
            type: 'bar',
            barWidth: '8px',
            height: '30px',
            barSpacing: '2px',
            barColor: '#A8BDCF'
        });
        $('.linebar').sparkline('html', {
            type: 'bar',
            barWidth: '5px',
            height: '30px',
            barSpacing: '2px',
            barColor: '#44BBC1'
        });
        $('.linebar2').sparkline('html', {
            type: 'bar',
            barWidth: '5px',
            height: '30px',
            barSpacing: '2px',
            barColor: '#AB6DB0'
        });
        $('.linebar3').sparkline('html', {
            type: 'bar',
            barWidth: '5px',
            height: '30px',
            barSpacing: '2px',
            barColor: '#19A1F9'
        });
    });

    $(function() {
        var sparklineLogin = function() {
            $('#sparkline').sparkline(
                [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], {
                    type: 'line',
                    width: '100%',
                    height: '25',
                    lineColor: '#ffffff',
                    fillColor: '#0DB8DF',
                    lineWidth: 1,
                    spotColor: '#ffffff',
                    minSpotColor: '#ffffff',
                    maxSpotColor: '#ffffff',
                    highlightSpotColor: '#ffffff',
                    highlightLineColor: '#ffffff'
                }
            );
        }
        var sparkResize;
        $(window).resize(function(e) {
            clearTimeout(sparkResize);
            sparkResize = setTimeout(sparklineLogin, 500);
        });
        sparklineLogin();
    });


});

//------------------------------------------------------------- 

//DIGITAL CLOCK
head.js("assets/js/clock/jquery.clock.js", function() {

    //clock
    $('#digital-clock').clock({
        offset: '+5',
        type: 'digital'
    });


});


//------------------------------------------------------------- 

//NEWS STICKER
head.js("assets/js/newsticker/jquery.newsTicker.js", function() {

    var nt_title = $('#nt-title').newsTicker({
        row_height: 18,
        max_rows: 1,
        duration: 5000,
        pauseOnHover: 0
    });


});

//------------------------------------------------------------- 

//PAGE LOADER
head.js("assets/js/vegas/jquery.vegas.js", function() {

    $(function() {
        //$.vegas({
        // src: "assets/img/bg.jpg"
        //});
        //$.vegas('overlay', {
        //   src: 'assets/img/overlays/06.png'
        // });

        $("#button-bg").click(function() {
            $("body").css({
                "background": "url('assets/img/bg5.jpg')no-repeat top center fixed"
            });
        });
        $("#button-bg2").click(function() {
            $("body").css({
                "background": "url('assets/img/bg2.jpg')no-repeat top center fixed"
            });
        });


        $("#button-bg3").click(function() {
            $("body").css({
                "background": "url('assets/img/bg.jpg')no-repeat top center fixed"
            });


        });

        $("#button-bg5").click(function() {
            $("body").css({
                "background": "url('assets/img/giftly.png')repeat"
            });

        });

        $("#button-bg6").click(function() {
            $("body").css({
                "background": "#2c3e50"
            });

        });

        $("#button-bg7").click(function() {
            $("body").css({
                "background": "url('assets/img/bg3.png')repeat"
            });

        });
        /**
         * Background Changer end
         */
    });

});
            

CREDIT

I've used the following jQuery plugin, Fonts, Images, Icons or other files as listed.

• ACC Wizards Bootsrap
• Bootstrap Calendar
• Datepicker for Bootstrap
• Bootstrap Timepicker
• Clockface timepicker
• Simple date/time picker component
• Easy Pie Chart - Pie charts with the HTML5
• Animating nice & Clean gauges.
• Nice, downward compatible, touchable, jQuery dial
• Easy, object oriented client side graphs
• Flot Chart is a pure JavaScript plotting library for jQuery
• Responsive Tables
• An easy way of converting wide tables to Responsive
• Foo Table is a jQuery plugin that aims to make HTML tables on smaller devices look awesome
• Responsive Data Table
• Colorpicker for Twitter Bootstrap
• Color Palette for Bootstrap
• Masked Input Plugin
• jQuery Validate
• Tiny wysiwyg rich text editor for Bootstrap
• DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.
• X Editable - library allows you to create editable elements on your page
• Bootstrap Markdown

FONT

• Open Sans Condensed — for Content title
• Open Sans — for Content

ICONS

• We Love Icon Font

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest.