Shortcodes Shortcodes

Liferay theme settings

4 different color schemes, when you choose one of those color a new ccs class will be added to the page body - green:default theme skin
- blue theme skin: skin-1
- ultra theme skin: skin-2
- yellow theme skin: skin-3


Liferay theme settings

Elements

Inspinia uses the same elements and classes of Bootstrap v3.3.4 and it is using the font awesome

Bellow we are going to give you a hint on how to use any of the theme components:

1- Graphs and Chart

For more example take a look to the float section


					<!-- Flot -->
					< script src="/inspinia-theme/js/plugins/flot/jquery.flot.js">< /script>
					< script src="/inspinia-theme/js/plugins/flot/jquery.flot.tooltip.min.js">< /script>
					< script src="/inspinia-theme/js/plugins/flot/jquery.flot.spline.js">< /script>
					< script src="/inspinia-theme/js/plugins/flot/jquery.flot.resize.js">< /script>
					< script src="/inspinia-theme/js/plugins/flot/jquery.flot.pie.js">< /script>
					
					< script>
					    $(document).ready(function() {
					    	var data1 = [
					            [0,4],[1,8],[2,5],[3,10],[4,4],[5,16],[6,5],[7,11],[8,6],[9,11],[10,30],[11,10],[12,13],[13,4],[14,3],[15,3],[16,6]
					        ];
					        var data2 = [
					            [0,1],[1,0],[2,2],[3,0],[4,1],[5,3],[6,1],[7,5],[8,2],[9,3],[10,2],[11,1],[12,0],[13,2],[14,8],[15,0],[16,0]
					        ];
					        $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
					            data1, data2
					        ],
					                {
					                    series: {
					                        lines: {
					                            show: false,
					                            fill: true
					                        },
					                        splines: {
					                            show: true,
					                            tension: 0.4,
					                            lineWidth: 1,
					                            fill: 0.4
					                        },
					                        points: {
					                            radius: 0,
					                            show: true
					                        },
					                        shadowSize: 2
					                    },
					                    grid: {
					                        hoverable: true,
					                        clickable: true,
					                        tickColor: "#d5d5d5",
					                        borderWidth: 1,
					                        color: '#d5d5d5'
					                    },
					                    colors: ["#1ab394", "#464f88"],
					                    xaxis:{
					                    },
					                    yaxis: {
					                        ticks: 4
					                    },
					                    tooltip: false
					                }
					        );
					    });
					< /script>
					
				


2- Forms

For more example take a look to the forms section


					

Sign in

Sign in today for more expirience.

Sign in

Sign in today for more expirience.



3- Spinners

For more details visist this link

		   			<script src="/inspinia-theme/js/plugins/jsKnob/jquery.knob.js"> </script>
					< script>
				   		$(document).ready(function(){
				        	$(".dial").knob();
				   		});
			   		</script>
		   		
					
					
					
				


4- Sliders

For more details visist this link

					<link href="/inspinia-theme/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet" />
	    			<link href="/inspinia-theme/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet"/>
	    			<script src="/inspinia-theme/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"><script>
	    			
					<script >
						$("#ionrange_1").ionRangeSlider();
		
				        $("#ionrange_2").ionRangeSlider({
				        	grid: true,
				            from: 5,
				            values: [
				                "zero", "one",
				                "two", "three",
				                "four", "five",
				                "six", "seven",
				                "eight", "nine",
				                "ten"
				            ]
				        });
					</script>
					


5- Date picker

For more details visist this link

					


6- Switcher

For more details visist this link

					








For more details about the css style take a look to the UI Elements section and grid section.

Plugins

Bootstrap css front-end framework.
jQuery fast, small, and feature-rich JavaScript library.
DataTables advanced interaction controls in any HTML table.
DropzoneJS library that provides drag'n'drop file uploads with image previews.
EasyPieChart plugin to render and animate nice pie charts with the HTML5 canvas element
Flot simple but powerful chart plugin
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar
Gritter Notification plugin
iCheck Custom radio and checkbox buttons
IonRangeSlider Easy and light range slider plugin
Jasny additional components for bootstrap framework.
Jeditable Edit In Place Plugin For jQuery
jQueryUI set of user interface interactions, effects, widgets, and themes built on top of the jQuery
bootstrapdatepicker datepicker
Chosen plugin that makes long, unwieldy select boxes much more user-friendly
jsKnob Nice, downward compatible, touchable, jQuery dial.
metisMenu Easy menu jQuery plugin for Twitter bootstrap
Morris.js good-looking charts library
nouislider Lightweight javascript range slider
Pace Automatic page load progress bar
Peity simple jQuery plugin that converts an element's content into a simple svg mini, pie, line or bar chart
Rickshaw toolkit for creating interactive time series graphs
Sparkline jQuery inline chart library
Steps smart UI component which allows you to easily create wizard-like interfaces
Summernote Super Simple WYSIWYG Editor on Bootstrap
Switchery simple component that turn default HTML checkbox inputs into iOS 7 style switches.
Validation jQuery Validation Plugin
jvectormap Java Script pluggin for vector maps
Unsplash all images from Unsplash - Free hi-resolution photos
UiFaces all avatar faces from UiFaces
UICalendar Directive for FullCalendar
Nestable Nestable list jQuery plugin
codeMirror Code editor jQuery plugin
GoogleMapsApi Google maps API
EmailTemplate Transactional Email template
jqGrid jqGrid plugin for jQuery
ClassHelper Class helper
AnimatedHeader Animated header plugin
Timeline: Vertical timeline inspiration
OpenSans Google Open Sans Web Font
ImageCrop: Plugin for image crop function
Toastr: Notification plugin
BootstrapColorPicker: jQuery color picker plugin
WOW: Animations for scroll down page
Meanjs: MEANJS full-stack JavaScript
LightboxGallery: touch-enabled, responsive and customizable image & video gallery
jsTree: jsTree is jquery plugin, that provides interactive trees
RTLbootstrap: Bootstrap RTL provides simple yet robust right-to-left capability for Bootstrap 3
googleDiff: The Diff Match and Patch libraries offer robust algorithms to perform the operations required for synchronizing plain text.
tinycon: A small library for manipulating the favicon
idletimer: jQuery idle timer
spinners: A collection of loading indicators animated with CSS
meteor: Open-source platform for building top-quality web apps
meteorDropZone: A Meteor package for the popular file picker
prettyTextDiff: A wrapper around Google's diff_match_patch library
clockPicker: Special clock picker
chartist: Javascript chart library
dateRangePicker: Date range picker for Bootstra
awesomeBootstrapCheckbox: Custom checkbox and radio controls
fooTable: Table jQuery plugin
sweetAlert: Custom javascript alerts