We added extra classes that help you better customise the look. You can use regular buttons, filled buttons or plain link buttons. Let's see some examples:
Button groups, toolbars, and disabled states all work like they are supposed to.
Social Buttons
An extra category of buttons that are necessary for any project is the social buttons. We have added classes that provide the default colour for every social network.
To use them, you have to add to your button the general class btn-social and the specific network, for example btn-twitter. All styles described above can be applied to social buttons (default, filled, simple).
We used the Themify social icons which you can find here.
Here are examples for all the social buttons:
.on('toggle')
gets activated when the checkbox state changes between checked and unchecked.
.on('change')
the behaviour is the same as for the toggle, with the difference that the event is fired for each radio button that gets a change in its state.
If you want to use something more special than a checkbox, we recommend the switch. You can use it as plain, with text or with icons. The default version is the one with text (on and off states).
There are 2 ways to use this input: as a normal select, in which case you need to specify the style as form-control, or as a button, in which case you have to specify the style as btn-{type}. You can also have multiple select options by using the multiple attribute on the select tag. Here are some coded examples.
Fixed Navbar: If you want to have a "Fixed Navbar" on Desktop and Mobile please add the class navbar-fixed on the tag nav and move the entire nav structure outside of the div with class main-panel. Check the example implementation for more details:
<div class="sidebar" data-color="orange" data-image="../assets/img/full-screen-image-3.jpg">
....
</div>
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
....
</div>
</nav>
<div class="main-panel">
<-- .navbar used to be here, but was moved outside of this div -->
....
</div>
Besides the default navbar, we added 5 colors for the 5 classes: primary, info, success, warning, danger. If you want to use one of them, you have to replace the navbar-default with the class for the chosen color navbar-ct-{class}.
Besides the classic look, we also added the colour classes to offer more customisation. To use them add the class pagination-[primary/info/success/warning/danger].
The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean and minimal.
If you have information that you don't need to show at once, we suggest you use tabs. You can use them horizontally or vertically.
Here are the coded examples:
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.
There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.
It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.
It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.
It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.
All Boostrap classes for tables are supported and improved. Besides the simple and striped tables, we added tables that have actions and tables with switches.
You can see coded examples below:
We have also created the Big Boy table, that can be used for content management systems or in the checkout process of an e-commerce. It offers extended functionality, like adding pictures, descriptions and actions.
To offer you the possibility to better work with tables, we have integrated a third party for datatables. We have changed the design for the inputs, buttons, typography, pagination and dropdown, so it can look consistent with the rest of the dashboard.
It contains methods for sorting columns, searching, paginations, ajax calls, actions on rows and many other functions. For detailed description regarding usage, please see the original documentation from our friend Zhixin Wen.
To get things going, you can start with the basic coded example below.
We restyled the classic collapsable group, to make it look more like the other elements in paper dashboard. If you want to add a border for the panel, you can add the class panel-border.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
The notifications for Paper Dashboard PRO are looking fresh and clean. They go great with the navbar. They come with 4 classes, each for a different color: .alert-info, .alert-success, .alert-warning, .alert-danger.
If you want to add special animations for them, we integrated a third party plugin called Bootstrap Notify. To see the original repository for it, check it out here. Out friend Robert McIntosh did a wonderful job. If you want to see a coded example, you can see it below.
We have created the class .sidebar for navigation. It contains the company title, a photo of the logged in user with options inside a dropdown, and a list of all the pages. Every element in the list of pages can have a sublist of pages.
You have two options for the background colour data-background-color="white/brown".
If you want to change the colour of the links inside the sidebar, you can do so by modifying the following attribute data-active-color="primary/info/success/warning/danger".
If you want to have more space for the main panel, you can shrink the sidebar by adding the class sidebar-mini on the body of the page.
If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colours for the plugin provided by Tristan Edwards. If you want to see the full documentation, please check out this page.
If you want to see a basic coded example, here is one below.
<button class="btn btn-default btn-fill" onclick='swal("Good job!", "You clicked the button!", "success")'>Try me!</button>
<!-- for more actions that you can use onclick, please check out demo.js -->
We have created a date-time picker starting from this wonderful plugin created by Eonasdan. We have changed the colours, typography and buttons, so it can look like the rest of the dashboard.
For the implementation of graphic charts, we used the Chartist plugin and added our custom styles. The plugin is free to download and use here. Gion Kunz is the guy behind the project; he did an awesome job and we recommend using his stuff. Besides all the great options for customisation that you have using it, it is also fully responsive. We changed the colours, background and typography.
Line Chart
We recommend using this chart when you have easy to understand information, that can be conveyed in a single line throughout a continuous period.
We recommend you use this graphic when you need to show multiple functions in the same visual element. For example, you can see a correlation between the registered versus active users. Always try to use a legend when you have multiple elements in the graphic.
We changed the classic Google Maps by adding special skins and putting them in cards. If you want to see the full documentation from Google, you can see the docs here.
<!-- card for the map -->
<div class="card">
<div class="header">
<p class="category">Regular Map</p>
</div>
<div class="content">
<div id="regularMap" class="map"></div>
</div>
</div>
<!-- javascript for init -->
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = {
zoom: 8,
center: myLatlng,
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
}
var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Regular Map!"
});
marker.setMap(map);
});
We have integrated and changed the look for the jVector Maps. We recommend using them for statistics for countries. To see the original documentation from Kirill Lebedev, you can go here.
If you want to see how it looks and how you can use this map, here is an example.
If you have lengthy forms to complete, you can use the Bootstrap Wizard. This plugin allows you to cut the form into steps and let the user complete it gradually. We have worked over the original repository from Vincent Gabriel, which you can find here.
We have changed the typography, inputs, buttons and we have added validation for inputs. You can see how it looks and feels in the live demo.
If you have required fields in forms, the best way to add validation for them is through the jQuery Validation tool. We have imported it into the Paper Dashboard PRO library and changed its colours. To see the original and full documentation from jQueryValidation, you can go here.
If you want to see a basic login example and the code behind it, check out the example below: