Items filtered by date: December 2014

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;
	}
}

The @import line of code should be the very first line of LIVE code in your CSS file otherwise it will not work. You can put comments above without issue.

Embed Server Based Fonts

/* all text marvel-regular */
@font-face {
    font-family: 'Marvel-Regular';
    src:url('../custom/fonts/marvel-regular/Marvel-Regular.ttf.woff') format('woff'),
        url('../custom/fonts/marvel-regular/Marvel-Regular.ttf.svg#Marvel-Regular') format('svg'),
        url('../custom/fonts/marvel-regular/Marvel-Regular.ttf.eot'),
        url('../custom/fonts/marvel-regular/Marvel-Regular.ttf.eot?#iefix') format('embedded-opentype'); 
    /*font-weight: normal;
    font-style: normal;*/
}
body, body #jsn-menu ul.menu-mainmenu a, body #jsn-menu ul.menu-mainmenu li a span, h1, h2, h3, h4, h5, h6 {
	font-family: "Marvel-Regular", Verdana, Geneva, sans-serif;
}

/* Add a custom font that is installed locally on your server */
@font-face {
    font-family: 'LTKaliberItalic';
    src: url('../custom/fonts/linotype/linotypekaliberitalic.eot');
    src: url('../custom/fonts/linotype/linotypekaliberitalic.eot') format('embedded-opentype'),
         url('../custom/fonts/linotype/linotypekaliberitalic.woff') format('woff'),
         url('../custom/fonts/linotype/linotypekaliberitalic.ttf') format('truetype'),
         url('../custom/fonts/linotype/linotypekaliberitalic.svg#LTKaliberItalic') format('svg');
}
/* This declares the font aas white on a black background */
body {
	font-family: "LTKaliberItalic", Times, serif;	
	background-color: black !important;		
	color: white !important;
}

/* Alternative font-face declaration with extra styling in */
@font-face {
	font-family: 'Linotype Kaliber Italic';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/LinotypeKaliberItalic.ttf)format('truetype');
}

Embed Google Fonts

Inclusion Code

There are 2 basic methods to include google fonts and load the assest from Google

• Standard - Which is used in HTML
  

  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

• @import - Which is used in CSS stylesheets

  <style>
      @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  </style>

Code that is included

This is example code that is downloaded from google via the @import or stylesheet inclusion.

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff>) format('woff');
}

Declaration / Usage

The usage of the fonts is then very easy. you use the standard CSS declaration as noted below

font-family: 'Open Sans', sans-serif;

giving

body {
    font-family: 'Open Sans', sans-serif;    
}

Add to Joomlashine Framework List

in the custom.css.php i found the following code. Will it allow me to add a custom font in to the /{template}/uploads/fonts/ directory ?

http://www.joomlashine.com/forum/82-jsn-blank/139055-custom-font-code

/* Declare custom font face for use in <?php echo $section; ?> */
@font-face {
	font-family: '<?php echo $name; ?>';
	src: url('<?php echo $curDocument->templateUrl . "/uploads/fonts/{$name}.eot"; ?>') format('eot'),
	     url('<?php echo $curDocument->templateUrl . "/uploads/fonts/{$name}.woff"; ?>') format('woff'),
	     url('<?php echo $curDocument->templateUrl . "/uploads/fonts/{$name}.ttf"; ?>') format('truetype'),
	     url('<?php echo $curDocument->templateUrl . "/uploads/fonts/{$name}.svg"; ?>') format('svg');
}

Joomlashine Response

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"
                }

Joomlashine Embed Google Fonts Example

JSN Framework physically alters the file below when you make changes to the font styling in the template admin section, and in particular set a Google font.

You can also use this code to make your own google import CSS without needing the JSN-Framework.

templates/{template name}/css/styles/custom.css

/* Google Custom Font for all of the Site */

/* The @import line of code should be the very first line of LIVE code in your CSS file */

/* Import Google font face for use in heading */
@import url(https://fonts.googleapis.com/css?family=Ubuntu);

/* Import Google font face for use in menu */
@import url(https://fonts.googleapis.com/css?family=Lato);

/* Import Google font face for use in body */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* Set font style for body */
body {
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 100%;
}

/* Set font style for heading */
h1,
h2,
h3,
h4,
h5,
h6,
#jsn-gotoplink,
.page-header,
.subheading-category,
.componentheading,
.contentheading {
	font-family: 'Ubuntu', Verdana, Geneva, sans-serif;
}

/* Set font style for menu */
body #jsn-menu ul.menu-mainmenu a,
body #jsn-menu ul.menu-mainmenu li a span {
	font-family: 'Lato', Verdana, Geneva, sans-serif;
}

Other

These are some useful examples I have used.

/* set font in telephone module */
.telephone-font {
	font-family: "Eras ITC", sans-serif;
	font-weight: 900;
	font-size: 150%;
}