Porto Admin - Responsive HTML5 Template

Tips

Most of the questions are already answered in the FAQ's: http://www.okler.net/forums/forums/template-porto-admin/faqs/

Due to local security restrictions, some things will not work locally, especially in Chrome. But everything will work once the files have been uploaded to your website/server.

Use Firebug or Chrome Developer Tools.

Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

Getting an error message? Someone might have seen it too, try a google search for a quick fix.

Explore the live demo for pages ideas and sample code.

Files Structure

/ajax (Ajax files)
/css (Template CSS)

/fonts (Font Faces, Font Awesome, etc..)
/skins
- default.css
- ... (Create your own skin)

/img (All Images)
/js (Template JS)
/master (You don't need to include that folder in your project, it has only the Style Switcher functions)
/vendor (All external libs. We keep all of them in this folder to make updates easily.)

Javascript

It's possible to change the JS settings by extending the defaults from the template, that way is so much easier to update the theme changing only one JS file.
Here are a few samples on how to do that:

Changing Settings

Changing the "scroll to top" icon: (js/custom.js)

$.extend(theme.PluginScrollToTop.defaults, {
	iconClass: 'fa fa-chevron-up'
});

You can find all the defaults of the plugins and partials in the file assets/javascript/theme.js as you can see here:

Changing Plugins Options

The template includes a very simple way to configure the elements that are initialized automatically, such as the sliders, you just need to put the settings in the "data-plugin-options" attribute, as you can see below:

<div class="slider" data-plugin-revolution-slider data-plugin-options='{"startheight": 700}'>

It works the same way for most of the plugins included in the template.

If you want to disable the auto initialization you can just add a class "manual" or remove the data-plugin-* attribute:

<div class="slider manual" id="myRevolutionSlider">

So now you can initialize that using the standard JS mode:

$(document).ready(function() {
	$('#myRevolutionSlider').revolution({
		delay:9000,
		startwidth:960,
		...
		...
	});
});

Remove/Disable a Plugin or Partial

If you want to remove/disable a plugin or partial that has a "initialize" function completely, follow this example: (js/custom.js)

theme.PluginScrollToTop.initialize = function() {};

Manually Initializing a Plugin

Some of the plugins/elements are initialized automatically, if you want to disabled that and call the plugin via Javascript, follow these steps:

FROM (HTML):

<div class="owl-carousel" data-plugin-options='{"items": 6, "singleItem": false, "autoPlay": true}'>

TO (HTML):

<div class="owl-carousel manual" id="owl-example">

(Javascript):

$(document).ready(function() {
	$("#owl-example").owlCarousel({
		"items": 6,
		"singleItem": false,
		"autoPlay": true
	});
});

HTML Structure

The template is based on Bootstrap 4 Framework - http://getbootstrap.com

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

<div class="row">
	<div class="col-md-12">
		Level 1 column
		<div class="row">
			<div class="col-md-6">Level 2</div>
			<div class="col-md-6">Level 2</div>
		</div>
	</div>
</div>

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS Structure

The organization of the CSS is one of our priorities.

These are the CSS file we're using in the template:

theme.css - (Basic layout structure styles)
invoice-print.css (Invoice Print CSS)
theme-admin-extension.css (Admin Extension to be used in the Front-End Template)
/skins (Skin Files)
/sass (SASS Source Files)

CSS Helper Classes

Text Helpers

Class	Description
.text-xs	Change text font-size
.text-sm	Change text font-size
.text-md	Change text font-size
.text-lg	Change text font-size
.text-xl	Change text font-size
.text-primary	Changes text color to the primary color
.text-primary-inverse	Changes text color to the primary color inverse
.text-dark	Changes text color to dark version
.text-dark-inverse	Changes text color to dark version inverse
.text-weight-light	Change text weight
.text-weight-normal	Change text weight
.text-weight-semibold	Change text weight
.text-weight-bold	Change text weight
.text-uppercase	Uppercase text
.text-lowercase	Lowercase text
.text-capitalize	Capitalize text

Spacements

Class	Description
.m-none	Changes all margins to none
.m-auto	Changes margin to 0 auto
.m-xs	Changes all margins
.m-sm	Changes all margins
.m-md	Changes all margins
.m-lg	Changes all margins
.m-xl	Changes all margins
.m-xlg	Changes all margins
.mt-none	Changes margin-top to none
.mt-xs	Changes margin-top
.mt-sm	Changes margin-top
.mt-md	Changes margin-top
.mt-lg	Changes margin-top
.mt-xl	Changes margin-top
.mt-xlg	Changes margin-top
.mb-none	Changes margin-bottom to none
.mb-xs	Changes margin-bottom
.mb-sm	Changes margin-bottom
.mb-md	Changes margin-bottom
.mb-lg	Changes margin-bottom
.mb-xl	Changes margin-bottom
.mb-xlg	Changes margin-bottom
.mr-none	Changes margin-left to none
.ml-xs	Changes margin-left
.ml-sm	Changes margin-left
.ml-md	Changes margin-left
.ml-lg	Changes margin-left
.ml-xl	Changes margin-left
.ml-xlg	Changes margin-left
.mr-none	Changes margin-right to none
.mr-xs	Changes margin-right
.mr-sm	Changes margin-right
.mr-md	Changes margin-right
.me-lg	Changes margin-right
.mr-xl	Changes margin-right
.mr-xlg	Changes margin-right
.p-none	Changes all paddings to none
.p-auto	Changes padding to 0 auto
.p-xs	Changes all paddings
.p-sm	Changes all paddings
.p-md	Changes all paddings
.p-lg	Changes all paddings
.p-xl	Changes all paddings
.p-xlg	Changes all paddings
.pt-none	Changes padding-top to none
.pt-xs	Changes padding-top
.pt-sm	Changes padding-top
.pt-md	Changes padding-top
.pt-lg	Changes padding-top
.pt-xl	Changes padding-top
.pt-xlg	Changes padding-top
.pb-none	Changes padding-bottom to none
.pb-xs	Changes padding-bottom
.pb-sm	Changes padding-bottom
.pb-md	Changes padding-bottom
.pb-lg	Changes padding-bottom
.pb-xl	Changes padding-bottom
.pb-xlg	Changes padding-bottom
.pr-none	Changes padding-left to none
.pl-xs	Changes padding-left
.pl-sm	Changes padding-left
.pl-md	Changes padding-left
.pl-lg	Changes padding-left
.pl-xl	Changes padding-left
.pl-xlg	Changes padding-left
.pr-none	Changes padding-right to none
.pr-xs	Changes padding-right
.pr-sm	Changes padding-right
.pr-md	Changes padding-right
.pr-lg	Changes padding-right
.pr-xl	Changes padding-right
.pr-xlg	Changes padding-right

Others

Class	Description
.ib	Changes display to inline-block and set vertical-align to top
.va-middle	Changes vertical-align to middle
.bg-primary	Changes background and text color to inverse color of background
.bg-secondary	Changes background and text color to inverse color of background
.bg-tertiary	Changes background and text color to inverse color of background
.bg-quartenary	Changes background and text color to inverse color of background
.bg-success	Changes background and text color to inverse color of background
.bg-warning	Changes background and text color to inverse color of background
.bg-danger	Changes background and text color to inverse color of background
.bg-info	Changes background and text color to inverse color of background
.bg-dark	Changes background and text color to inverse color of background

Customization & Styles

Colors

The style switcher was made to support unlimited skin colors, for that we use Less (http://www.lesscss.org/) to process the CSS dinamically in the demo and show the color right away.
You don't need to use LESS in your project, after you done customizing your skin you may want to grab the generated code and save it in a file in the folder: /css/skins/(skin-name).css

Learn More: How to change the Skin

Layout Style (Normal/Boxed)

The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the following class in the <html>:

<html class="boxed">

You can also customize the background color or image.

Background Color (Light/Dark)

The template has two different background colors, Light and Dark. The light one is the default option, if you want to use the Dark version, add the following class in the <html>:

<html class="dark">

Header Color (Light/Dark)

You can set the header color to dark, by adding the class in the HTML element:

<html class="header-dark">

Sidebar Left Size (XS/SM/MD)

You can set the sidebar left site, by adding the class in the HTML element:

<html class="sidebar-left-xs">

<html class="sidebar-left-sm">

<html class="sidebar-left-md">

Sidebar Color (Light/Dark)

You can set the sidebar color to light, by adding the class in the HTML element:

<html class="sidebar-light">

Fonts

To change the embedded font, please take a look in the head part of the website and you will find this tag:

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">

To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.

Skin

You can generate your own skin color:

Copy that and save as a css skin file (assets/stylesheets/skins/default.css)

Effects

You can add some Animations / Transitions to the elements which fires when an element scrolls into view, it's pretty simple to use and you can add it in any element.

Usage:

<div data-appear-animation="bounceIn" data-appear-animation-delay="200">
...
</div>

Heads up: The Attribute data-appear-animation-delay is Optional and is set in Miliseconds.

The animation can be set to:

flash
shake
bounce
tada
swing
wobble
wiggle
pulse
fadeIn
fadeInUp
fadeInDown
fadeInLeft
fadeInRight
fadeInUpBig
fadeInDownBig
fadeInLeftBig
fadeInRightBig
bounceIn
bounceInUp
bounceInDown
bounceInLeft
bounceInRight
rotateIn
rotateInUpLeft
rotateInDownLeft
rotateInUpRight
rotateInDownRight

Admin Extension

View Topic: How to integrate Porto Admin Extension on Porto

Source & Credits

The images included in preview are for demonstration purposes and should always be replaced with your own work.

Images:
- Photodune: http://photodune.net/
- Subtle Patterns: http://subtlepatterns.com/
Fonts:
- Google Fonts - http://www.google.com/webfonts
Scripts:
- autosize
- bootstrap
- bootstrap-colorpicker
- bootstrap-confirmation
- bootstrap-datepicker
- bootstrap-fileupload
- bootstrap-markdown
- bootstrap-maxlength
- bootstrap-multiselect
- bootstrap-tagsinput
- bootstrap-timepicker
- bootstrap-wizard
- chartist
- codemirror
- dropzone
- elusive-icons
- flot
- flot.tooltip
- font-awesome
- fuelux
- fullcalendar
- gauge
- gmaps
- hover
- intercooler-js
- ios7-switch
- isotope
- jquery
- jquery-appear
- jquery-browser-mobile
- jquery-cookie
- jquery-datatables
- jquery-datatables-bs3
- jquery-idletimer
- jquery-maskedinput
- jquery-matchheight
- jquery-mockjax
- jquery-nestable
- jquery-placeholder
- jquery-sparkline
- jquery-ui
- jquery-validation
- jquery.easy-pie-chart
- jqueryui-touch-punch
- jqvmap
- jstree
- less
- liquid-meter
- magnific-popup
- meteocons
- mocha
- modernizr
- moment
- morris.js
- nanoscroller
- nprogress
- owl.carousel
- pnotify
- raphael
- requirejs
- select2
- select2-bootstrap-theme
- simple-line-icons
- snap.svg
- store2
- style-switcher
- summernote

Changelog

View Changelog