Items filtered by date: December 2015

This is a cool 4 point graph with animation and CSS effects. I have changed this to work with FontAwesome. You need to include the optional CSS and Javascript to get some of the animations which are triggered by the Waypoint code.

CSS

/* FEATURE GRAPH */

/* It is the padding of the items and the amnount of text, the template.css rule and the amount of text that is causing the boggle */
/* I need to hive off each of the top items so the text push and padding matchines up*/
/* less text would make things better */
/* the grey bar goes to the bottom of the padding */

/* from template.css line 667 - corrects the template.css rule 'div.grid-col' - check for others in yopur template */
.jsn-demo-page #demo-feature-graph div.grid-col {
	margin-bottom: 0;
}

.jsn-demo-page #demo-feature-graph {
	/*padding: 50px 0;*/
	/*background-color: #f6fafc;*/
}
.jsn-demo-page #demo-feature-graph .feature-graph {
	padding: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
	border-bottom: 3px solid #cbd4d8;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
	overflow: hidden;
}
/* this controls the height of the items - i might need to hive this of for indivduals items */
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
	padding: 60px 0 0 0; /* slightly different removing the bottom padding makes the first bubble work correctely*/
	width: 300px; /* This controls the width of an item */
	max-width: 100%;
}
/* add individual item overrides here for padding to correct the vertical bar meeting */
/*.jsn-demo-page #demo-feature-graph .feature-graph .graph-item.item2 .graph-item-inner {
	padding-bottom: 52px;
}*/

.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"] {
	position: relative;
	float: left;
	display: block;
	width: 75px;
	height: 75px;
	color: #fff;
	background-color: #222;
	font-size: 2.5em;
	line-height: 72px;
	text-align: center;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transform: scale(1,1);
	-moz-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="link-icon fa fa-"] {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="link-icon fa fa-"] {
	background-color: #5bace2;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="link-icon fa fa-"] {
	background-color: #6ece97;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="link-icon fa fa-"] {
	background-color: #e9974e;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="link-icon fa fa-"] {
	background-color: #c08dd7;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
	padding-left: 120px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
	text-transform: uppercase;
	font-size: 1.65em;
	line-height: 1.65em;
	margin: 0;
	padding: 20px 0 0;
	letter-spacing: 3px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	float: right;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	float: left;
}

/* BOF Item offset */
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 150px;
}
.jsn-desktop.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
	padding-left: 50px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	padding-right: 0;
	width: 350px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	padding-left: 100px;
}
/* EOF Of Item offset */

.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"]:after {
	content: "";
	display: block;
	position: absolute;
	width: 3px;
	height: 200px;
	background-color: #cbd4d8;
	left: 50%;
	margin-left: -2px;
}
/* top item vertical bar location */
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="link-icon fa fa-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="link-icon fa fa-"]:after {
	top: 90px;
}
/* bottom item vertical grey bars this controls the height - the smaller the number the longer the line */
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="link-icon fa fa-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="link-icon fa fa-"]:after {
	bottom: 90px;
}

/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
	.jsn-desktop.jsn-demo-page #demo-feature-graph {
		padding: 50px;
	}
}

@media only screen and (max-width: 960px), (max-device-width: 960px) {	
	/* Feature graph */
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		width: 300px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
		padding-right: 50px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
		padding-right: 0;
		width: 280px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
		padding-left: 50px;
	}
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"]:after {
		display: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
		padding: 0 40px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		padding: 30px 0;
		float: none;
		width: auto;
		text-align: center;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
		border: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
		font-size: 1.2em;
		line-height: 1.8em;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"] {
		float: none;
		margin: 0 auto;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="link-icon fa fa-"] {
		transform: none;
		-moz-transform: none;
		-webkit-transform: none;
	}
}

CSS (Optional / Animation / Waypoints)

This code allows the icons to animate into existance when they are scolled too. I do not know if all of this code is required.

/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */

/* Declare scale-fade animation */
@keyframes scale-fade
	{
		0% 		{ 	transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes scale-fade
	{
		0% 		{ 	-moz-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes scale-fade
	{
		0% 		{ 	-webkit-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

/* Declare translate-fade animation */
@keyframes translate-fade
	{
		0% 		{ 	transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes translate-fade
	{
		0% 		{ 	-moz-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes translate-fade
	{
		0% 		{ 	-webkit-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

.appearing .project-item,
.appearing .main-features .feature-item [class*="fa fa-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="fa fa-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number  {
	-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.appearing .apple-devices {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	-ms-transform: translate(0,50px);
	transform: translate(0,50px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices  {
	-webkit-animation: translate-fade 1s 1 ease-in-out;
	-moz-animation: translate-fade 1s 1 ease-in-out;
	animation: translate-fade 1s 1 ease-in-out;
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

JS (Optional / Animation / Waypoints)

/* ==================== JSN MINI CUSTOM JS ==================== */

// i have seperated out each complete function with //----------------------------------------
// use the whole file for Mini effects and just delete stuff you do not want

setTimeout(function() {
(function($) {

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

// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later

/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);
	
//----------------------------------------

// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{	

	/* Add timeout for animation */
	// 'Back to', simplicity, the 6 grid with icons starting 'modern design'
		setTimeout(function(){
			$(".ping.title").addClass("pop");
		},1000);
		setTimeout(function(){
			$(".ping.desc").addClass("pop");
		},1200);
		setTimeout(function(){
			$(".ping.scroll-down").addClass("pop");
		},4500);

		/* Waypoint script to add action when scroll onto objects */
		/* This effect brought by http://imakewebthings.com/jquery-waypoints/ */
		
		// This sets the Waypoint triggers
		// Waypoints is the easiest way to trigger a function when you scroll to an element.
		// this adds a scrolling action to elements but not the 'counting up'
		// delete the ones you dont use
		$( '#demo-feature-graph' ).waypoint(function()
			{
				$( '#demo-feature-graph' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})
			
	});		
	
//----------------------------------------			

})(jQuery);
}, 0);

HTML

<div id="demo-feature-graph" class="appearing">

	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item1 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-mobile"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Mobile Ready</a></h3>
						<p class="desc">We have specialized in mobile ready websites for more than 2 years so we understand what is required when designing a responsive website.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item2 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-search"></a>
					<div class="text">
						<h3 class="heading"><a href="#">SEO Optimized</a></h3>
						<p class="desc">Our websites as standard come with a lot of SEO work already done.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item3 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-eyedropper"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Various Styles</a></h3>
						<p class="desc">We have many styles and colours we can build your personalized site with.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item4 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-folder-open-o"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Our Portfolio</a></h3>
						<p class="desc">We have built up a good customer base because of our ongoing customer support</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>

Notes

• This code is untouched from the original JSN Mini demo but collated in one place.
• The module name in JSN Mini is 'Feature Graph'
• There are notes in the CSS about which elements to alter
• you could swap jsn-demo-page  for jsn-feature-graph-module  etc.. in the css and java script and then either use that in the menu item or put it in the module
• Add the class suffix,  jsn-demo-page, to page
  
• To get this demo working without adding the page suffix .jsn-demo-page I wrapped the code in

  <div class="jsn-mobile jsn-demo-page"></div>

  • This simulates adding the class but this technique can also be used if you want to use it in a module.
  • You can remove the .jsn-demo-page from the CSS as another option instead of wrapping the CSS code in the<div> above.
• I changed the following from the original code to get working
  • Remmed out (Disabled background colour and padding)
    

    .jsn-demo-page #demo-feature-graph {
    	padding: 50px 0;
    	background-color: #f6fafc;
    }

  • Changed width 400px to 300px

    .jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
    	padding: 60px 0 0 0; /* slightly different removing the bottom padding makes the first bubble work correctely*/
    	width: 400px; /* This controls the width of an item */
    	max-width: 100%;
    }

  • Changed all the icon references to a Font Awesome reference so I could use Font Awesome icons instead

    [class*="jsn-icon-"]
    
    to
    
    [class*="link-icon fa fa-"]

  • and I changed the icon references in the HTML. Each icon can be different reference.
    

    class="jsn-icon-cup"
    
    to
    
    class="link-icon fa fa-mobile"

  • added this extra rule
    

    	/* add individual item overrides here for padding to correct the vertical bar meeting */
    	.jsn-demo-page #demo-feature-graph .feature-graph .graph-item.item2 .graph-item-inner {
    		padding-bottom: 52px;
    	}

• There is a new version of the 'Feature Graph' without the use of icons. I will add it here at some point or you can check out the current demo at Joomlashine.

This responsive module is a great way to display Quotes or testimonials from your customers.

CSS

/* TABULOUS by http://git.aaronlumsden.com/tabulous.js/ */
#demo-tab-news {
	padding: 50px 0;
}
#demo-tab-news #tabs {
	width: 1100px;
	max-width: 100%;
	margin: 50px auto;
}

#demo-tab-news ul.tabs_title {
	display: inline-block;
	float: right;
	width: 50%;
	margin: 0;
	padding: 20px 0;
	border-left: 1px solid #e1e1e1;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#demo-tab-news #tabs ul.tabs_title li {
	display: block;
	margin-right: 2px;
	margin: 0;
}

#demo-tab-news #tabs ul.tabs_title li a {
	position: relative;
	display: block;
	padding: 20px 0 20px 60px;
	text-decoration: none;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a:hover,
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active {
	color: #000;
}
#demo-tab-news #tabs ul.tabs_title li a:before {
	content: "";
	display: block;
	position: absolute;
	left: -10px;
	width: 9px;
	height: 9px;
	background-color: #ddd;
	border: 5px solid #fff;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-color-blue #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #34a7c8;
}
.jsn-color-red #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #e95e53;
}
.jsn-color-green #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #40af6f;
}
.jsn-color-orange #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #f39c12;
}
.jsn-color-violet #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #b485c7;
}
.jsn-color-grey #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #222;
}

#demo-tab-news #tabs_container {
	overflow: hidden;
	float: left;
	position: relative;
	padding-top: 40px;
	width: 50%;
	color: #999;
	line-height: 2em;
}
#demo-tab-news #tabs_container > div {
	margin-right: 60px;
}
#demo-tab-news #tabs_container .news-title {
	text-transform: uppercase;
	color: #000;
	letter-spacing: 5px;
	font-size: 1.8em;
	margin: 0 0 30px;
}

.transition {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.make_transist {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.hidescale {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
}

.showscale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hideleft {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.showleft {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hidescaleup {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.showscaleup {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hideflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-transform: rotatey(-90deg) scale(1.1);
	-moz-transform: rotatey(-90deg) scale(1.1);
	-o-transform: rotatey(-90deg) scale(1.1);
	-ms-transform: rotatey(-90deg) scale(1.1);
	transform: rotatey(-90deg) scale(1.1);

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.showflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;

	-webkit-transform: rotatey(0deg) scale(1);
	-moz-transform: rotatey(0deg) scale(1);
	-o-transform: rotatey(0deg) scale(1);
	-ms-transform: rotatey(0deg) scale(1);
	transform: rotatey(0deg) scale(1);

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.tabulousclear {
	display: block;
	clear: both;
}

/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
	.jsn-desktop #demo-tab-news #tabs_container > div {
		margin-left: 60px;
	}
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {

	/*.jsn-mobile.jsn-demo-page #jsn-usermodules1,
	.jsn-mobile.jsn-demo-page #jsn-usermodules2 {
		padding: 0 !important;
	}*/

	.jsn-mobile #demo-tab-news {
		padding: 30px 50px;
	}
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile #demo-tab-news #tabs_container {
		width: 89%;
		padding-top: 0;
	}
	.jsn-mobile #demo-tab-news ul.tabs_title {
		width: 10%;
	}
	.jsn-mobile #demo-tab-news #tabs ul.tabs_title li a {
		text-indent: -1000px;
		padding-left: 0px;
	}
	.jsn-mobile #demo-tab-news #tabs_container .news-title {
		font-size: 1.4em;
		margin-bottom: 10px;
	}
	.jsn-mobile #demo-tab-news #tabs_container > div {
		margin-right: 30px;
	}
}

JS

setTimeout(function() {
(function($) {
	
//----------------------------------------

// Tabulous - The Vertical Line Thing

/* Tab function */
(function ( $, window, document, undefined ) {

    var pluginName = "tabulous",
        defaults = {
            effect: 'scale'
        };

       // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

    function Plugin( element, options ) {
        this.element = element;
        this.$elem = $(this.element);
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {

        init: function() {

            var links = this.$elem.find('ul li a');
            var firstchild = this.$elem.find('li:first-child').find('a');
            var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');

            if (this.options.effect == 'scale') {
             tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
            } else if (this.options.effect == 'slideLeft') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
            } else if (this.options.effect == 'scaleUp') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
            } else if (this.options.effect == 'flip') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
            }

            var firstdiv = this.$elem.find('#tabs_container');
            var firstdivheight = firstdiv.find('div:first').height();

            var alldivs = this.$elem.find('div:first').find('div');

            alldivs.css({'position': 'absolute'});

            firstdiv.css('height',firstdivheight+'px');

            firstchild.addClass('tabulous_active');

            links.bind('click', {myOptions: this.options}, function(e) {
                e.preventDefault();

                var $options = e.data.myOptions;
                var effect = $options.effect;

                var mythis = $(this);
                var thisform = mythis.parent().parent().parent();
                var thislink = mythis.attr('href');


                firstdiv.addClass('transition');

                links.removeClass('tabulous_active');
                mythis.addClass('tabulous_active');
                thisdivwidth = thisform.find('div'+thislink).height();

                if (effect == 'scale') {
                    alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
                } else if (effect == 'slideLeft') {
                    alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
                } else if (effect == 'scaleUp') {
                    alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
                } else if (effect == 'flip') {
                    alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
                }

                firstdiv.css('height',thisdivwidth+'px');

            });         
            
        },

        yourOtherFunction: function(el, options) {
            // some logic
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
	// not 100% if this is required for Tabulous
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            new Plugin( this, options );
        });
    };

})( jQuery, window, document );


// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{
	/* Fabulous tab news */
		$('#tabs').tabulous({
	    	effect: 'scale' // Available effects: scale, slideLeft, scaleUp, flip
	    });
	});

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

})(jQuery);
}, 0);

HTML

<div id="demo-tab-news">
	<div id="tabs" class="clearfix">

		<div id="tabs_container">

			<div id="tabs-1">
				<h3 class="news-title">Minimalist Style</h3>
			    <p>A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements</p>
			</div>

			<div id="tabs-2">
				<h3 class="news-title">130+ font-icons for many purposes</h3>
			    <p>JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.</p>
		
			</div>

			<div id="tabs-3">
				<h3 class="news-title">Extended style for three extensions</h3>
			    <p>JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.</p>
			</div>

			<div id="tabs-4">
				<h3 class="news-title">Joomla! 2.5 &3.x Compatibility</h3>
			    <p>Natively compatible with Joomla! 2.5 & Joomla! 3.x versions</p>
			    
			</div>

			<div id="tabs-5">
				<h3 class="news-title">Sticky menu </h3>
			    <p>Sticky menu makes websites quicker to navigate.</p>
			    
			</div>

		</div><!--End tabs container-->

		<ul class="tabs_title">
			<li><a href="#tabs-1" title="">Minimalist Style</a></li>
			<li><a href="#tabs-2" title="">130+ font-icons for many purposes</a></li>
			<li><a href="#tabs-3" title="">Extended style for three extensions</a></li>
			<li><a href="#tabs-4" title="">Joomla! 2.5 &3.x Compatibility</a></li>
			<li><a href="#tabs-5" title="">Sticky menu </a></li>
		</ul>
		
	</div><!--End tabs-->	
</div>

CSS Fix for this template

/* Fixes White / Missing Balls */
/* Correct an applied global rule - template.css line 8 */	
	*:before,
	*:after {
		box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
}

Changed settings for a client

These were made to make Tabulous for a better fit on a clients website.

/* Tabulous - changes for a better fit */
#demo-tab-news {
	padding: 1px 0;
}

#demo-tab-news #tabs {
	width: 1100px;
	max-width: 100%;
	margin: 20px auto;
}

#demo-tab-news #tabs_container > div {
	margin-right: 30px;
}

Notes

• The Tabulous script is from http://git.aaronlumsden.com/tabulous.js/
• This is taken from the JSN Mini template demo
• In the JSN Mini demo the module is called 'Tab News'
• Add the class jsn-demo-page to the page suffix to get the code to work
• To get this demo working without adding the page suffix .jsn-demo-page I wrapped the code in

  <div class="jsn-mobile jsn-demo-page"></div>

  • This simulates adding the class but this technique can also be used if you want to use it in a module
  • You can remove the .jsn-demo-page from the CSS as another option instead of wrapping the CSS code in the<div> above.
• If the text looks of center it is probably down to the module that you select that is right on the edge. The telling sign is that the dividing line is in the very middle of the page
  • outer container =  <div id="demo-tab-news" style="margin: auto auto; max-width: 1100px;">  - this will show you the edges clearly in firebug
  • inner container = <div id="tabs" class="clearfix">  - this will show you the edges clearly in firebug
• This code can cause everything to look off center especially if the website you are adding this on is not a wide website. Try reducing it

  #demo-tab-news #tabs_container > div {
  	margin-right: 60px;
  }

• Also the title and the main content of the tab is used to push the container wider as you would expect. So if you have short titles and less than 1 long line of text, the content the tab will also appear of center to the left.

CSS

/* Module - Pink Paint Title - Background */
.module-pink-paint-title h3 {
	/*padding-top: 100px;
	padding-left: 20px;*/
	height: 80px;
	background-image: url(../images/custom/module-title.jpg) !important;
	background-repeat: no-repeat !important;
}

/* Module - Pink Paint Title - Text */
.module-pink-paint-title h3.jsn-moduletitle span {
	color: white;
	padding-top: 20px;
	padding-left: 20px;
}

/* Change all Font colors */
#jsn-page {
	color: #6B1D10;
}

/* Set Site Font */
p, #jsn-body{
	font-family: "Comic Sans MS",cursive;
}

Adding a Font into the Template Framework

If you want to add google font into your template. You can add google font into

plugins/system/jsntplframework/libraries/joomlashine/form/fields/jsnfont.php

protected $google = array(
		'Open Sans',
		'Oswald',
		'Droid Sans',
		'Lato',
		'Open Sans Condensed',
		'PT Sans',
		'Ubuntu',
		'PT Sans Narrow',
		'Yanone Kaffeesatz',
		'Roboto Condensed',
		'Source Sans Pro',
		'Nunito',
		'Francois One',
		'Roboto',
		'Raleway',
		'Arimo',
		'Cuprum',
		'Play',
		'Dosis',
		'Abel',
		'Droid Serif',
		'Arvo',
		'Lora',
		'Rokkitt',
		'PT Serif',
		'Bitter',
		'Merriweather',
		'Vollkorn',
		'Cantata One',
		'Kreon',
		'Josefin Slab',
		'Playfair Display',
		'Bree Serif',
		'Crimson Text',
		'Old Standard TT',
		'Sanchez',
		'Crete Round',
		'Cardo',
		'Noticia Text',
		'Judson',
		'Lobster',
		'Unkempt',
		'Changa One',
		'Special Elite',
		'Chewy',
		'Comfortaa',
		'Boogaloo',
		'Fredoka One',
		'Luckiest Guy',
		'Cherry Cream Soda',
		'Lobster Two',
		'Righteous',
		'Squada One',
		'Black Ops One',
		'Happy Monkey',
		'Passion One',
		'Nova Square',
		'Metamorphous',
		'Poiret One',
		'Bevan',
		'Shadows Into Light',
		'The Girl Next Door',
		'Coming Soon',
		'Dancing Script',
		'Pacifico',
		'Crafty Girls',
		'Calligraffitti',
		'Rock Salt',
		'Amatic SC',
		'Leckerli One',
		'Tangerine',
		'Reenie Beanie',
		'Satisfy',
		'Gloria Hallelujah',
		'Permanent Marker',
		'Covered By Your Grace',
		'Walter Turncoat',
		'Patrick Hand',
		'Schoolbell',
		'Indie Flower'
	);

and plugins/system/jsnframework/assets/joomlashine/js/visualdesignstyle.js

var listFont = {
                    "Open Sans":"Open Sans", "Oswald":"Oswald", "Droid Sans":"Droid Sans", "Lato":"Lato", "Open Sans Condensed":"Open Sans Condensed", "PT Sans":"PT Sans", "Ubuntu":"Ubuntu", "PT Sans Narrow":"PT Sans Narrow",
                    "Yanone Kaffeesatz":"Yanone Kaffeesatz", "Roboto Condensed":"Roboto Condensed", "Source Sans Pro":"Source Sans Pro", "Nunito":"Nunito", "Francois One":"Francois One", "Roboto":"Roboto", "Raleway":"Raleway", "Arimo":"Arimo",
                    "Cuprum":"Cuprum", "Play":"Play", "Dosis":"Dosis", "Abel":"Abel", "Droid Serif":"Droid Serif", "Arvo":"Arvo", "Lora":"Lora", "Rokkitt":"Rokkitt", "PT Serif":"PT Serif", "Bitter":"Bitter", "Merriweather":"Merriweather", "Vollkorn":"Vollkorn",
                    "Cantata One":"Cantata One", "Kreon":"Kreon", "Josefin Slab":"Josefin Slab", "Playfair Display":"Playfair Display", "Bree Serif":"Bree Serif", "Crimson Text":"Crimson Text", "Old Standard TT":"Old Standard TT", "Sanchez":"Sanchez",
                    "Crete Round":"Crete Round", "Cardo":"Cardo", "Noticia Text":"Noticia Text", "Judson":"Judson", "Lobster":"Lobster", "Unkempt":"Unkempt", "Changa One":"Changa One", "Special Elite":"Special Elite",
                    "Chewy":"Chewy", "Comfortaa":"Comfortaa", "Boogaloo":"Boogaloo", "Fredoka One":"Fredoka One", "Luckiest Guy":"Luckiest Guy", "Cherry Cream Soda":"Cherry Cream Soda",
                    "Lobster Two":"Lobster Two", "Righteous":"Righteous", "Squada One":"Squada One", "Black Ops One":"Black Ops One", "Happy Monkey":"Happy Monkey", "Passion One":"Passion One", "Nova Square":"Nova Square", "Metamorphous":"Metamorphous", "Poiret One":"Poiret One", "Bevan":"Bevan", "Shadows Into Light":"Shadows Into Light", "The Girl Next Door":"The Girl Next Door", "Coming Soon":"Coming Soon",
                    "Dancing Script":"Dancing Script", "Pacifico":"Pacifico", "Crafty Girls":"Crafty Girls", "Calligraffitti":"Calligraffitti", "Rock Salt":"Rock Salt", "Amatic SC":"Amatic SC", "Leckerli One":"Leckerli One", "Tangerine":"Tangerine", "Reenie Beanie":"Reenie Beanie", "Satisfy":"Satisfy", "Gloria Hallelujah":"Gloria Hallelujah", "Permanent Marker":"Permanent Marker", "Covered By Your Grace":"Covered By Your Grace", "Walter Turncoat":"Walter Turncoat", "Patrick Hand":"Patrick Hand", "Schoolbell":"Schoolbell", "Indie Flower":"Indie Flower"
                }

/* Correct Modal Positioning */
@media (max-width: 767px) {
.modal {
		position: inherit !important;
	}
}

/* Rounded Logo Border CSS - thebayhorsearkholme.co.uk */
logo-background {
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 4px solid #000000;
}

Page Adornments are images that are tagged on to pages without affecting its functionality to make the look nicer or unique.

The technique is easy when you know the CSS to add.

Depending on the extension you want these effect to appear on you might need to change the element that you have them attached to. Also do not forget the order of the elements so they look correct. i.e. the Barber's Line needs to appear before the paint can as the paint is falling on the line etc..

Barber Line

This can be any image you want running alone the bottom of your page to make it look nice. You can make it global or specific to a page by making a specific class.

/* Barber Line at the bottom of articles */
#jsn-mainbody-content{
	background: url(../images/custom/article-footer.jpg) repeat-x bottom;
	padding-bottom: 10px !important;
}

Page Icons

These look great in conjuction with the Barber Line effect. The icons do not need to go in the bottom right corner.

These are set as classes so you can use them on multiple pages easily. all you have to do is add the appropriate .page-footer-branding-pack-1 to the page class suffix.

/* Page Icons */
#jsn-mainbody{padding-bottom: 150px !important;}
.page-footer-branding-pack-1 #jsn-mainbody {background: url(../images/custom/pages/branding-pack-1.png) no-repeat bottom right;}
.page-footer-branding-pack-2 #jsn-mainbody {background: url(../images/custom/pages/branding-pack-2.png) no-repeat bottom right;}
.page-footer-desk-clip #jsn-mainbody {background: url(../images/custom/pages/desk-clip.png) no-repeat bottom right;}
.page-footer-easel #jsn-mainbody {background: url(../images/custom/pages/easel.png) no-repeat bottom right;}
.page-footer-paint-can #jsn-mainbody {background: url(../images/custom/pages/paint-can.png) no-repeat bottom right;}
.page-footer-search #jsn-mainbody {background: url(../images/custom/pages/search.png) no-repeat bottom right;}
.page-footer-services #jsn-mainbody {background: url(../images/custom/pages/services.png) no-repeat bottom right;}

sigProPolaroids can possibly be swapped for sigProContainer so you can alter the settings for other styles.

/* Simple Image Gallery Pro - Make Polaroid container slimmer - Polaroids Line 15 */
ul.sigProPolaroids {
    /*clear: both;
    list-style: outside none none;
    margin: 20px !important;
    overflow: hidden;
    padding: 40px 60px !important;*/
	padding: 20px 20px !important;
}

/* Simple Image Gallery Pro - Add baclground to the gallery container - Polaroids Line 15 */.
ul.sigProPolaroids {
  
  /*background-image: url('../../../images/pages/home/farm-shadow.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  
  or shorthand below
  
  */
  
  background: url('../../../images/pages/home/farm-shadow.jpg') no-repeat center;
  background-size: 100%;
}

Center Simple Image Gallery

This works for both the Pro and non-Pro, but does not centre properly in mobile/narrow view.

<div style="margin: auto auto; max-width: 80%;">{gallery}images{/gallery}</div>

The key is that the div must have a width set less than 100%. you cannot center somethign that is 100% wide.

The following does not work:

<div style="max-width: 80%; text-align: center;">{gallery}images{/gallery}</div>

Center Single/Multiple Simple Image Gallery

This works in desktop, when in mobile, the galleries do not center but do form a single column

<div style="text-align: center;">
    <div style="display: inline-block;">
        <div style="float: left;">{gallery}sophie/1{/gallery}</div>
        <div style="float: left;">{gallery}sophie/2{/gallery}</div>
    </div>
</div>
<div style="clear: both;">&nbsp;</div>

This code works in all viewports (using floats)

<div style="text-align: center;">
    <div style="display: inline-block;">
        <div style="float: left;">{gallery}sophie/1{/gallery}</div>
    </div>
    <div style="display: inline-block;">
        <div style="float: left;">{gallery}sophie/2{/gallery}</div>
    </div>
</div>
<div style="clear: both;">&nbsp;</div>

<div style="text-align: center;">
    <div style="display: inline-block;">{gallery}sophie/1{/gallery}</div>    
    <div style="display: inline-block;">{gallery}sophie/2{/gallery}</div>    
</div>
<div style="clear: both;">&nbsp;</div>

Gallery Images are rotated

when you upload images to use in the simple image gallery some or all images have been rotated 90 deg.

This is down to the the image dimensions, there seems to be an issue with the max size. You will notice this more with portrait.

eg:

A portrait image of 1536px wide X 2048px High will rotate 90deg both in the thumbnail and the full size image (possibly points to the liabry or server).

To fix this just reduce the image height (keep ratio if you want) down from 2048. Reducing it even by 1px fixes the issue as it seems to be >= 2048px that the setup does not like

This is a style that I used for a client on the Nuru template but at the very least shows you the classes you need to alter.

/* JComments Wrapper */
#jc {
	padding: 5px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	background-color: #220203;
	/*border: 1px solid #DBB054;*/
	max-width: 1070px;
	margin: 0 auto;
}

/* Comment Box */
#jc .rbox {
	background: transparent;
	border: none;  
	padding: 10px;
	border-top: 1px dotted #ee9200; 
	border-radius: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Comment Content - Set Font for the comments */
#jc .comment-body{
  font-family: Georgia,"Times New Roman",Times,serif;
  font-size: 18px;
  line-height: 22px;
  color: #ee9200;
  text-align: left;
  margin-bottom: 20px;
}

/* Latest Module */
.jcomments-latest {
	font-family: Georgia,"Times New Roman",Times,serif;
	font-size: 18px;
	line-height: 22px;
	color: #ee9200;
	padding: 20px !important;
	border-radius: 25px;
	background-color: #220203;
	border: 1px solid #DBB054;
}

/* Latest Module - Rounded Corners */
ul.jcomments-latest .rounded {
	padding: 20px !important;
	border: none !important;
	border-top: 1px dotted #ee9200 !important;
    -moz-border-radius: 5px;
    border-radius: 0px !important;
	margin-top: 20px;
}

Modules / Positions

/* make bottom module backgrounds white */
#jsn-content-bottom .jsn-modulescontainer {
    background: #fff;
}

/* make menu and footer background purple */
#jsn-header, #jsn-footer {
	background: #162156;
}

/* make header background orange */
.jsn-color-orange #jsn-promo {
  background-color: #DC2B02;
}

/* make footer background orange */
#jsn-footer {
  background-color: #DC2B02; 
}

/* change footer menus to white */
#jsn-footer a {
	color: white;
 }

/* Make Module background this color */
div.solid-1 div.jsn-modulecontainer_inner {
	background: #162156;
}

/* make header black */
#jsn-headerright-inner {background: black;}

/* Reduce border to inner only */
#jsn-header_inner {border: none;}
#jsn-header_inner2 {border-bottom: 1px solid #DDD;}

/* remove gap between content and footer */
#jsn-footer {padding: 0px 0px 10px;}

/* add padding to the content as it is on the edge */
#jsn-mainbody { padding-left: 10px; padding-right: 10px;}

/* corrects login box background - same as jsn uni-form - grey */
.well {background-color: #444444;}

/* main content area*/
#jsn-page {
	color:#e4e4e4;
	overflow: hidden;
	margin: 0 auto;
	background: url(../images/lancastrian/content-background-strip.png) repeat;
	padding: 0 20px;
}

/* main page styling - Black background and gold border */
#jsn-mainbody {
	padding: 10px 10px;
	background-color: black;
	border: 1px solid #DBB054;
}

#jsn-content-bottom {
	background: none;
	/*border-top: 1px solid #e4e4e4;*/
	border-top: none;
	padding: 10px 0;
}

/* Main Page Content Area */
#jsn-page {
	color:#e4e4e4;
	overflow: hidden;
	margin: 0 auto;
	background: url(../images/lancastrian/content-background-strip.png) repeat;
	padding: 0 20px;
}

/* main page styling - Black background and gold border - this is the main content DIV */
#jsn-mainbody {
	padding: 10px 10px;
	background-color: black;
	border: 1px solid #DBB054;
}

/* Make Header White */
#jsn-header {
    background: #fff none repeat scroll 0 0;
}

/* style footer */
#jsn-footer {
	color: #5f5f5f;
	font-size: 12px;
	background: #EFEFEF;
}
#jsn-footer-inner {
	border-top: none;
}

Set a black background with a gold border for all devices and then have an inline css code to overide it for some pages.

I used this for a client's project using the Nuru template so it might need a bit of work for other templates.

This tecnique can be used for variations to get the desired effect.

Solution

add the following code to your custom.css or template css file.

/* main page styling - add black background and gold border */
#jsn-mainbody {
	padding: 10px 10px;
	background-color: black;
	border: 1px solid #DBB054;
}

On the our team page (selected page) I have used inline css to remove the black background and gold border because i do not want it there. I used the following code below as inline css.

/* inline css to remove the black background and gold border */
#jsn-mainbody {
	padding: 0px;
	border: none;
	background-color: transparent;
}

Get rid of black/white box that appears when the display is mobile

When you make the window small the code above does not work so i added this code in to my custom.css

/* get rid of black/white box that appears when the display is mobile */
@media only screen and (max-width: 960px) {
	#jsn-content #jsn-maincontent {
		background-color: black;
		border: 1px solid #DBB054;
	}
}

and now i added the following code inline

#jsn-mainbody {
	padding: 0px;
	border: none;
	background-color: transparent;
}

@media only screen and (max-width: 960px) {
	#jsn-content #jsn-maincontent {
		background-color: transparent;
		border: none;
	}
}

The border dissapears, but the black background goes white, (the original colour).

Remove background for any device below 960px - not sure if this is realted to the above code

The mobile styling seems to be called separately and so i cannot overide it.

/* remove background for any device below 960px - not sure if this is realted to the above code */
@media only screen and (max-width: 960px), (max-device-width: 960px){
	[id*="jsn-content_inner"], [id*="jsn-maincontent_inner"] {
		background: transparent !important;
	}
}
@media only screen and (max-width: 960px){
	#jsn-content #jsn-maincontent {
		background: transparent !important;
	}
}