This is issue is caused when i want to add 3 unequally sized modules in the content-bottom module postioin which is a horizontally 'dynamically divided' DIV.
module posistions are automatically sliced equally vertically or horizontally  depending on their type (see module position map in the manual).

Joomlashine suggestion

Joomlashines method to prevent overlapping, was to alter the number of slices of a particular module posistion by manually setting this in the template. This solution still had issues. Hardcoding setting the number of slices is done in the template (index.php)

The template layout for content-bottom shows it as 1 , for a noobie this is what i expect. But what actually happens is that your template system divides content-bottom up depending on how many modules are published to it. This leads to my issue where one of the modules was to big to fit in on of these divisions.

In the instructions you might want to mention the template system automatically divides content-bottom in to equal sections when more than 1 module is published there.

My Instructions

• I removed the module positions from the 3 modules i wanted in content-bottom
• I created a new 'Custom HTML' module and published it in content-bottom
• I used the plugin 'Modules Anywhere' from NoNumbers and used the following code to add these module in to the 'custom html' module via a plugin

<div>
	<div style="float: left;">{module Aftercare}</div>
	<div style="float: left;">{module Highlights}</div>
	<div style="float: left;">{module Click To Buy}</div>
</div>

The following code snippets help you sculpt your website whilst keeping it mobile friendly via responsive CSS rules

Element Level

/* hide a module at a specific width */
@media only screen and (max-width: 960px), (max-device-width: 960px) {
	#jsn-pos-user-bottom {
		display:none;
	}
}

Other Examples

@media only screen and (max-width: 960px), (max-device-width: 960px) {	
}	

@media only screen and (max-width: 1024px), (max-device-width: 1024px) {	
}

Ranged Examples

/* Set a Range */
@media (min-width: 980px) and (max-width: 1200px) {
    #rsfe_searchbox {
        width: 100%;
    }
}

Style Examples

/* For Mobiles - Black background and gold border for content */
@media only screen and (max-width: 960px) {
	#jsn-content #jsn-maincontent {
		background-color: black;
		border: 1px solid #DBB054;
	}
}

/* Removes the white background issue on mobiles  */
@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;
	}
}

J51 Resonate

/* Adds a space between modules */
.sidecol_block .module, .sidecol_block .module_menu {
    margin-bottom: 5px;
}

Single Background Image

These instructions tell you hgow to change the background images as there are a couple ways of doing it and they do not work for every template as they are slighty different, ie not all have a background image position that is visible.

Module Method

This method utilises the JSN Background Module position and can be easy to use.

https://www.joomlashine.com/forum/74-jsn-metro/108636-background-image-only-on-frontpage

Please follow my instructions below:

1. Go to Component -> Banners -> Categories then create a new Category and name 'Category Background' .
2. Go to Component -> Banners -> Banner then create a new banner and name 'Banner Background' . Upload new image to make background http://take.ms/0dUyRz . Look at option named 'Category' and select 'Category Background' . http://take.ms/k4244Y
3. Go Module manager then create a new module with 'Banner type'. http://take.ms/gxzAn
4. Set the module in 'background' position . http://take.ms/CZyiv .
5. Look at option named 'Category' and select 'Category Background' . http://take.ms/CZyiv .
6. Please re-check .

Does not work for:

• Metro
• Solid

CSS Method

In order to get the background image for the JSN template solidand others you can use the following method that is purley CSS.

1. Place background image in 'templates/jsn_solid_pro/images/backgrounds' folder .
2. Open the lancastrian.css file in 'templates/jsn_solid_pro/css' folder .
3. Then insert the following code below at the end of the file .

   /* Set Background Image */
   #jsn-master {
       background: url("../images/backgrounds/bg-body.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   }

    

Q: does this mean the background position in solid is pointless?
A: Yes, the background position in solid is pointless .

Other

/* Repeating Custom Background */
#jsn-master {
    background:url("../images/tile.jpg") repeat scroll 0 0 transparent ;
}

/** Custom background but leave inner white **/
#jsn-page {background: url("../images/custom/background.jpg") no-repeat fixed center;}

/* remove white background */
#jsn-header_inner,
#jsn-headerright,
#jsn-footer {
    background: none;
}

/* make content background white */
#jsn-content, #jsn-header_inner2 {background: white;}

/* make footer black */
#jsn-footer_inner {background: #111111;}

#jsn-master {
    /*background-color: #fff;*/
    background: url(../images/lancastrian/main-background-tile.jpg) repeat;
    background-size: none;
    /*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='templates/jsn_nuru_pro/images/colors/brown/bg.jpg',
    sizingMethod='scale');

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='templates/jsn_nuru_pro/images/colors/brown/bg.jpg',
    sizingMethod='scale')";*/
}

/* make all backgrounds yellow */
body,
#jsn-header,
#jsn-content,
#jsn-content #jsn-maincontent,
#jsn-content #jsn-leftsidecontent,
#jsn-content #jsn-rightsidecontent {
    background-color: #FFFFCA;
}

 This is from Sweet Smiles with the Hood

/* Background image */
#jsn-page {
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.jsn-color-green #jsn-page {
    background-image: url(../custom/images/bgmaster.png);
}

These are variations on headers for Joomlashine templates. The header section of these templates is under developed so you need to do workarounds to get a standard header section you can control.

Notes

When using logo position

• use <div style="clear: both"></div> to seperate the menu and logo position if the are on the same line. using css causes the mobile menu to go funny.
• you can also use the logo in the template as this will show in the 404 pages etc.. whilst not being shown in the logo position
• you need to remove the pull-left from the logo position in index.php - dealt with below

Joomlashine Prerequisite Fix

All of these headers will require the following fix when using a joomlshine template and they should be put in the 'Top' position.

This allows you to use the whole header area as one module position and unless mentioned you do not use the Joomlashine logo position.

When you use the header there is usually a float applied to the 'Top' position and the following code (pick 1) will fix that

Inline CSS

You need to put this version of the code in your module code. You might also need to remove the float from jsn-headerright by adding the element declaration to the code below.

<style type="text/css">
	/* Allow Position Top to act as a normal div */
	#jsn-pos-top div.jsn-modulecontainer {
		float: none;
		/* margin: 0 0 0 20px; - adds a margin below this and the menu - set to 0 if no margin required */
	}
</style>

Template CSS

This code can be added into your custom.css template file. I have not tested this but it should work. You might also need to remove the float from jsn-headerright by adding the element declaration to the code below.

/* Allow Position Top to act as a normal div */
#jsn-pos-top div.jsn-modulecontainer {
	float: none !important;
}

Remove class="pull-right" or class="pull-left"

I have been removing the following code by editing the template.php and removing the class declarations from the following code. Editing the template.php should be a last resort but it is effective.

<div id="jsn-pos-top" class="pull-right;">

and if required

<div id="jsn-headerright" class="pull-right">

Header 1 - Pool Table Style

This is a simple header with the logo on the left and the phone number on the right that will flow under the logo when the screen gets too small.

Call for a free quote today
07747 123456

HTML

<div style="margin: 10px;"><img style="float: left;" src="/images/kb/2016/719/demo-logo-450px.png" alt="" /></div>
<div style="float: right; text-align: center; margin: 10px;">
	<span style="font-size: 18pt; color: #ffffff;">Call for a free quote today</span><br />
	<span style="font-size: 18pt; color: #ffffff;"><strong><a href="tel:07747 123456">07747 123456</a></strong></span>
</div>

Header 2 - Danson Style

Logo on the left, large phone number on the right and then when the window is made smaller (goes mobile) the phone number is made smaller and goes underneath the logo.

CSS

/* Header Blurb CSS to allow for large phone number and logo to be responsive */
@media screen and (max-width: 899px) {
	.header-large-phone-number {display: none;}
}
@media screen and (min-width: 900px) {
	.header-small-phone-number {display: none;}
	.header-large-phone-number {
		width: 500px;
		height: 100px;
		line-height: 100px;
		margin-left: 100px;
	}
	.header-large-phone-number span strong{		
		vertical-align: middle;
		font-size: 32pt; 		
	}
}

HTML

<div id="header-logo" style="float: left; margin: 5px;">
	<div><span style="font-size: 36pt; color: #162156;"><strong>My Demo Company</strong></span></div>
	<div style="width: 100%; background-color: #162156;"><span style="font-size: 14pt; color: #ffffff; padding: 5px;"><strong>&nbsp;IT Consultants Ltd.</strong></span></div>
	<div class="header-small-phone-number" style="text-align: center;"><span style="font-size: 14pt; color: #162156;"><strong>Tel: 07747 123456</strong></span></div>
</div>
<div style="float: left;">
	<div class="header-large-phone-number"><span style="color: #162156;"><strong>Tel: 07747 123456</strong></span></div>
</div>

Header 3 - Barnett Style

This header is comprised of both a desktop and mobile version. The cross over width is 1151px/1152px. The logo is centered with association logos either side which are moved to below the logo when in the mobile view.

CSS

/* Header Control */
@media only screen and (min-width: 1152px) {
	.header-display-mobile {
		display: none;
	}
}
@media only screen and (max-width: 1151px) {
	.header-display-desktop{
		display: none;
	}
}

HTML

<!-- Desktop Version -->
<div class="header-display-desktop">
	<a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/cycles_time_128.png" alt="cycles time 128" style="margin: 10px; float: left;" /></a>
	<div style="width: 60%; text-align: center; display: inline-block;"><img src="/images/kb/2016/719/demo-logo-450px.png" alt="demo logo 450px" style="margin: 10px;" /></div>
	<a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/quality_128.png" alt="quality 128" style="margin: 10px; float: right;" /></a>
	<a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/administrator_128.png" alt="administrator 128" style="margin: 10px; float: right;" /></a>
</div>
<!-- Mobile and Tablet Version -->
<div class="header-display-mobile">
	<div style="text-align: center;"><img src="/images/kb/2016/719/demo-logo-450px.png" alt="demo logo 450px" /></div>
	<div style="text-align: center;"><img src="/images/kb/2016/719/cycles_time_128.png" alt="cycles time 128" style="margin: 10px;" />
	<a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/administrator_128.png" alt="administrator 128" style="margin: 10px;" /></a>
	<a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/quality_128.png" alt="quality 128" style="margin: 10px;" /></a>
	</div>
</div>

Header 4 - IVR Style

This header is very simple and comes in 2 formats, with and without Tap To Call. It has a desktop version which when gets to squashed changes into a single column at 640px. A very elegant header and can be used for many things.

This works better when in the header because it is sized for that but you can definately see how it works.dddddd

Call for a free quote today

01234 567890
no-reply@quantumwarp.com

With Tap To Call

CSS

/** Standard Logo Header Block **/

/* remove large gap above and below - when you have seperated menu and logo */
#jsn-logo a {
	margin-top: 10px;
    margin-bottom: 0;
}

/* make the header sections responsive so they look nice */
@media screen and (max-width: 640px) {
    #lancastrian-header-left{
        float: none !important;
        text-align: center;
    }
    #lancastrian-header-right{
        float: none !important;
        text-align: center;
    }        
}


/* Tap To Call */
@media only screen and (max-width: 959px) {
	.tap-to-call-desktop {
		display: none;
	}
}
@media only screen and (min-width: 960px) {
	.tap-to-call-cellphone {
		display: none;
	}
}

HTML

<div id="lancastrian-header-left" style="float: left; margin: 10px;">
    <img src="/images/common/logo-200px.jpg" alt="logo 200px" />
</div>

<div id="lancastrian-header-right" style="float: right; margin: 10px; text-align: center;">
    <span style="font-size: 18pt;">Call for a free quote today</span><br />
    <div class="tap-to-call-cellphone">
        <div style="text-align: center;"><a href="tel:01234 567890">
            <img src="/images/modules/tap-to-call/tap-to-call.png" alt="Call us" /></a>
        </div>        
    </div>
    <span style="font-size: 18pt; color: #630033;"><strong>01234 567890</strong><br />
    <a href="mailto:no-reply@quantumwarp.com">no-reply@quantumwarp.com</a></span>
</div>

Without Tap To Call

CSS

/** Standard Logo Header Block **/
 
/* remove large gap above and below - when you have seperated menu and logo */
#jsn-logo a {
    margin-top: 10px;
    margin-bottom: 0;
}
 
/* make the header sections responsive so they look nice */
@media screen and (max-width: 640px) {
     
    #lancastrian-header-left{
        float: none !important;
        text-align: center;
    }
     
    #lancastrian-header-right{
        float: none !important;
        text-align: center;
    }   
     
}

HTML

<div id="lancastrian-header-left" style="float: left; margin: 10px;">
    <img src="/images/common/logo-200px.jpg" alt="logo 200px" />
</div>



<div id="lancastrian-header-right" style="float: right; margin: 10px; text-align: center;">
    <span style="font-size: 18pt;">Call for a free quote today</span><br />
    <span style="font-size: 18pt; color: #630033;"><strong>01234 567890</strong><br />
    <a href="mailto:no-reply@quantumwarp.com">no-reply@quantumwarp.com</a></span>
</div>

Custom Classes

Joomlashine has removed this valuable tool from all of their templates. There is another narrow option but this does not seem to be used, it is there should the eed ever arise.

The following code is designed to allow you to use the Joomlashine responsive display options but as class that you can use for elements in your WYSIWYG code. These classes use to work on their own but this feature was removed. I have used the real code out of the template to create this code. I based this code on the JSN Time template.

Add the following CSS to your a custom.css file.

Just add any of the following as a class to your html element and the normal Joomlashine responsive behaviour will occur.

• display-desktop
• display-mobile
• display-tablet
• display-smartphone

NB: when using @media statements, they need to be in the correct order otherwise errors will occur and the rules will not work. I am not a 100% how the rules should be ordered but he rules below worked. Netbeans IDE can help you put them into order if you get stuck.

/************************************************************************************
 Desktop Layout (960+)
 *************************************************************************************/
 @media only screen and (min-width: 961px), (min-device-width: 961px) {
     
    .display-mobile,
    .display-smartphone,
    .display-tablet {
        display: none;
    }
    
    .display-desktop {
        display: block;
    }
    
 }

/************************************************************************************
Mobile Layout (240 - 960)
*************************************************************************************/
@media only screen and (max-width: 960px), (max-device-width: 960px) {
    
    .display-desktop {
        display: none;
    }
    
    .display-mobile {
        display: block;
    }

}

/************************************************************************************
 Tablet Wide Layout (481 - 960)
*************************************************************************************/
@media only screen and (min-width: 481px) and (max-width: 960px), (min-device-width: 481px) and (max-device-width: 960px) {
    
    .display-smartphone,
    .display-desktop {
        display: none;
    }
    
    .display-tablet {
        display: block;
    }
    
}

/************************************************************************************
 Tablet Narrow Layout (481 - 767) - Not Need For Anything - Just here for reference
*************************************************************************************
@media only screen and (min-width: 481px) and (max-width: 768px), (min-device-width: 481px) and (max-device-width: 768px) and (orientation:portrait) {
 
}*/

/************************************************************************************
Smartphone Layout (320 - 480)
*************************************************************************************/
@media only screen and (max-width: 480px), (max-device-width: 480px) { 
    
    .display-tablet,
    .display-desktop {
        display: none;
    }
    
    .display-smartphone {
        display: block;
    }

}

Workaround method

You can also create a div with the following format which works because it matches the CSS code in the template.

<div class="jsn-modulecontainer display-desktop"></div>

The 3 factors that are required:

• Must be a <div>
• jsn-modulecontainer must be first
• followed by display-desktop

Styling

/* Imageshow - Rounded Corners */
.jsn-gallery .box_skitter .image,
.jsn-gallery .box_skitter .box_clone img {	
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

/* Rounded Corners - Remove the coloured background */
#jsn-promo {
    background-color: transparent;
}

Full Styles (grabbed from templates)

Teki

CSS

/* Imageshow - Teki Style */
.jsn-demo-page .galleria-info {
	position: absolute;
	max-width: 100% !important;
	width: 500px !important;
	height: 100%;
	left: 150px !important;
	top: 150px !important;
	right: auto;
	margin: auto;
}
.jsn-demo-page .galleria-info .galleria-info-text {
	background-color: transparent !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.6em !important;
	background-color: rgba(0,0,0,0.6);
	margin: 0;
	padding: 10px 20px;
}
.jsn-color-blue.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #009ACA !important;
}
.jsn-color-red.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #D52722 !important;
}
.jsn-color-green.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #6AA019 !important;
}
.jsn-color-orange.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #E08A00 !important;
}
.jsn-color-pink.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #ED6C6A !important;
}
.jsn-color-cyan.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
	color: #4B7E6A !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-description {
	display: inline-block;
	background-color: rgba(0,0,0,0.4);
	padding: 15px 20px;
	color: #EEE !important;
	font-size: 13px !important;
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-demo-page .galleria-info {
		left: 0 !important;
		top: 0 !important;
	}
	.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
		font-size: 1.2em !important;
	}
}

CSS - This is an alternative that I am getting to run on JSN Medis

/* Imageshow - Teki Style */
.jsn-demo-page .galleria-info {
    position: absolute;
    max-width: 100% !important;
    width: 350px !important;
    height: 100%;
    left: 150px !important;
    top: 150px !important;
    right: auto;
    margin: auto;
}
.jsn-demo-page .galleria-info .galleria-info-text {
    background-color: transparent !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.2em !important;
    background-color: rgba(0,0,0,0.6);
    margin: 0;
    padding: 10px 20px;
}
.jsn-color-blue.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #009ACA !important;
}
.jsn-color-red.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #D52722 !important;
}
.jsn-color-green.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #6AA019 !important;
}
.jsn-color-orange.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #E08A00 !important;
}
.jsn-color-pink.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #ED6C6A !important;
}
.jsn-color-cyan.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
    color: #4B7E6A !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-description {
    display: block; /* changed this from inline-block to fix stacking */
    background-color: rgba(0,0,0,0.4);
    padding: 15px 20px;
    color: #EEE !important;
    font-size: 13px !important;
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
    .jsn-demo-page .galleria-info {
        left: 100px !important;
        top: 100px !important;        
    }
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
    .jsn-demo-page .galleria-info {
        left: 0 !important;
        top: 0 !important;
    }
    .jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
        font-size: 1.2em !important;
    }
}

Settings

Remove .jsn-demo-page class to allow use any where, or use the jsn-demo-page as a page class to be more specific. The code is otherwise untouched.

These sliders are based on the theme, Theme Classic and uses the following settings. The rest are left as default.

Theme Classic Settings

Image Tab
Default Presentation Mode = Expand Out
Expand Out/Image click Action = No Action

Thumbnail Tab
Thumbnail Panel Presentation = Hide

Toolbar Tab
Toolbar Panel Presentation = Hide

Slideshow Tab
Sliding Timing = 10
Auto Play = Yes

CSS - Demo/Default code from within the Imageshow admin

Title
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #E9E9E9;

Description
font-family: Arial;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #AFAFAF;

Link
font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-align: right;
color: #E06614;

see citygate or luton accountants

Epic

CSS - Demo code from within the Imageshow admin

title
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #E9E9E9;

Description
font-family: Arial;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #AFAFAF;

link
font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-align: right;
color: #E06614;

One

This is all of the mobile code for the One slider style, but the reduced version below might be all that is required.

CSS

/* Imageshow - One Style */
.jsn-demo-page .container_skitter,
.jsn-demo-page .container_skitter .image img {
	width: 100% !important;
}
.jsn-demo-page .label_skitter {
	left: 50% !important;
	top: 50% !important;
	margin-top: -100px;
	margin-left: -580px;
	width: 400px !important;
	max-width: 100%;
	opacity: 1;
	background: rgba(0,0,0,0.6);
	padding: 20px;
}
.jsn-demo-page .jsn-themeslider-caption-title {
	text-transform: uppercase;
	font-size: 2em;
	color: #fff;
	padding: 10px 0;
	border-bottom: 2px solid #8D84E4;
	display: inline-block;
}
.jsn-color-violet.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #8d84e4;
}
.jsn-color-blue.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #2980B9;
}
.jsn-color-green.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #6ECE97;
}
.jsn-color-red.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #e95e53;
}
.jsn-color-orange.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #F38645;
}
.jsn-color-grey.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #668499;
}
.jsn-demo-page .jsn-themeslider-caption-description {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 4em;
	color: #fff;
	padding: 15px 0;
	display: block;
}
@media only screen and (max-width: 1366px), (max-device-width: 1366px) {
	.p-item .pthumb h3 {
		font-size: 28px;
		margin-top: -20px;
	}
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
	.jsn-desktop-on-mobile.jsn-demo-page .demo-join-newsletter { 
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkitbox-sizing: border-box;
	}
	.jsn-desktop-on-mobile.jsn-demo-page .label_skitter {
		margin-left: -500px;
	}
	.jsn-mobile.featured-fashion .container {
		width: 100%;
	}
	.jsn-mobile.jsn-demo-page .demo-join-newsletter {
		width: auto;
		padding: 30px;
	}
	.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading {
		font-size: 1.1em;
		line-height: 45px;
	}
	.jsn-mobile.jsn-demo-page #jsn-pos-content-bottom {
		padding: 0 !important;
	}
	.jsn-mobile.product-block [class*="span"] {
		width: 100% !important;
		margin: 0 !important;
	}
	.jsn-mobile div.grid-layout4 .services-box.standard-box.grid-col {
		width: 24.96%;
	}
	.jsn-mobile.jsn-demo-page div.jsn-modulecontainer:first-child,
	.jsn-mobile.jsn-demo-page div.jsn-horizontallayout div.jsn-modulecontainer {
		margin-top: 30px;
	}
	.jsn-mobile.owl-carousel {
		margin-top: 20px;
	}
	.jsn-mobile.demo-promo-products .owl-carousel {
		margin-top: 0;
	}

	.jsn-mobile.jsn-demo-page .label_skitter {
		left: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		margin-left: 0;
		margin-top: 0;
		padding: 10px;
	}
	.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-title {
		font-size: 1em;
	}
	.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-description {
		font-size: 1.4em;
		padding: 0;
		margin: 0 10px;
	}
	.jsn-mobile.demo-promo-box .promo-heading {
		font-size: 2.5em;
	}
}
@media only screen and (max-width: 768px), (max-device-width: 768px) {
	.jsn-mobile #jsn-content-top-below .row-fluid.product-block [class*="span"] {
		width: 100%;
	}
	.jsn-mobile #jsn-content-top-below .row-fluid.product-block .span9 {
		margin-left: 0;
	}
}
@media only screen and (max-width: 640px), (max-device-width: 640px) {
	.jsn-mobile .demo-promo-box .promo-heading {
		font-size: 3em;
	}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading,
	.jsn-mobile.jsn-demo-page .demo-join-newsletter .link-button {
		float: none;
		margin-bottom: 25px;
	}
	.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading {
		line-height: 30px;
	}
	.jsn-mobile div.grid-layout4 .services-box.standard-box.grid-col {
		width: 100%;
	}
	.jsn-mobile .text-heading.large-head span {
		max-width: 100%;
	}
	.jsn-mobile.jsn-demo-page .label_skitter {
		display: none;
	}
	.jsn-mobile.jsn-demo-page div.jsn-modulecontainer:first-child {
		margin-top: 0;
	}
	.jsn-mobile .demo-promo-box {
		padding: 30px 0 60px;
	}
	.jsn-mobile .demo-promo-box .promo-heading {
		font-size: 1.5em;
	}
	.jsn-mobile .text-heading.large-head > h1 {
		font-size: 23px;
	}
	.jsn-mobile .p-item .pthumb .mask a {
		display: none;
	}
	.jsn-mobile .p-item .pthumb .mask h3 {
		font-size: 1em;	
	}
	.jsn-mobile .p-item .pthumb .mask h3 a {
		display: block;
	}
	.jsn-mobile .sec-recent-work1 .btn-group {
		white-space: normal;
	}
}

CSS - One Trimmed down

This might be the only required code of the above version to get the One slider style working. Please sort when next using.

/* Imageshow - Unknown Style */
/* Need to make the module it sits in have  0 border */
.jsn-demo-page .container_skitter,
.jsn-demo-page .container_skitter .image img {
	width: 100% !important;
}
.jsn-demo-page .label_skitter {
	left: 50% !important;
	top: 50% !important;
	margin-top: -100px;
	margin-left: -580px;
	width: 400px !important;
	max-width: 100%;
	opacity: 1;
	background: rgba(0,0,0,0.6);
	padding: 20px;
}
.jsn-demo-page .jsn-themeslider-caption-title {
	text-transform: uppercase;
	font-size: 2em;
	color: #fff;
	padding: 10px 0;
	border-bottom: 2px solid #8D84E4;
	display: inline-block;
}
.jsn-color-violet.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #8d84e4;
}
.jsn-color-blue.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #2980B9;
}
.jsn-color-green.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #6ECE97;
}
.jsn-color-red.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #e95e53;
}
.jsn-color-orange.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #F38645;
}
.jsn-color-grey.jsn-demo-page .jsn-themeslider-caption-title {
	border-color: #668499;
}
.jsn-demo-page .jsn-themeslider-caption-description {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 4em;
	color: #fff;
	padding: 15px 0;
	display: block;
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
	.jsn-desktop-on-mobile.jsn-demo-page .label_skitter {
		margin-left: -500px;
	}	
	.jsn-mobile.jsn-demo-page .label_skitter {
		left: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		margin-left: 0;
		margin-top: 0;
		padding: 10px;
	}
	.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-title {
		font-size: 1em;
	}
	.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-description {
		font-size: 1.4em;
		padding: 0;
		margin: 0 10px;
	}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page .label_skitter {
		display: none;
	}
}

Imageshow Defaults (inside admin)

CSS

Title CSS

font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #E9E9E9;

Description CSS

font-family: Arial;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #AFAFAF;

Link CSS

font-family: Verdana;
font-size: 11px;
font-weight: bold;
text-align: right;
color: #E06614;

Promo Intro Text (ImageShow Overlay)

I grabbed this from the JSN Dona template and have adapted it below so I can use it anywhere I want. This overlay fits over ImageShow and allows you to rotate images behind it. The button is also a Joomlashine Button with animation and styling.

CSS

/*--- Promo Intro Text ---*/

/* Optional -  Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
	margin: 0;
	position: relative;
}

.promo-intro-text {
	text-align: center;
	position: absolute;
	top: 210px; /* This changes the position of the text on image show */
	width: 100%;
	z-index: 99;
	color: #fff;
}

.promo-intro-text .promo-intro-text-inner h2 {
	padding: 0 10px;
}

.promo-intro-text .promo-intro-text-inner h2 span {
	text-transform: uppercase;
	font-size: 72px;
	line-height: 80px;
	font-weight: 700;
	text-shadow: 1px 1px 1px #333;
}

.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
	display: block;
}

.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
	display: inline-block;
	font-size: 48px;
	line-height: 56px;
	border-top: 2px solid rgba(255,255,255, 0.6);
	border-bottom: 2px solid rgba(255,255,255, 0.6);
	padding: 2px 0;
	margin-top: 10px;
}

.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
	font-size: 18px;
	line-height: 30px;
	margin-top: 30px;
	color: #fff;
	text-shadow: 1px 1px 1px #333;
}

.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
	margin-top: 20px;
	padding: 10px 25px;
}

@media screen and (max-width: 1400px) {
	.promo-intro-text {
	  top: 150px;
	}
}

@media screen and (max-width: 1280px) {
	.promo-intro-text {
	  top: 110px;
	}
}

@media screen and (max-width: 1024px) {
	.promo-intro-text .promo-intro-text-inner h2 span {
	  font-size: 50px;
	  line-height: 58px;
	}
	.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
	  font-size: 30px;
	  line-height: 38px;
	}
	.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
	  font-size: 14px;
	  line-height: 22px;
	  margin-top: 15px;
	}
	.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
	  margin-top: 10px;
	}
}

@media screen and (max-width: 799px) {
	.promo-intro-text {
	  top: 20px;
	}
}

@media screen and (max-width: 640px){
	.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
	  display: none;
	}
}

@media screen and (max-width: 480px) {
	.promo-intro-text {
	  top: 10px;
	}
	.promo-intro-text .promo-intro-text-inner h2 span {
	  font-size: 30px;
	  line-height: 38px;
	}
	.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
	  font-size: 20px;
	  line-height: 28px;
	}
}

@media screen and (max-width: 360px) {
	.promo-intro-text {
	  top: 0;
	}
	.promo-intro-text .promo-intro-text-inner h2 span {
	  font-size: 20px;
	  line-height: 28px;
	}
	.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
	  font-size: 12px;
	  line-height: 20px;
	  margin-top: 5px;
	}
	.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
	  margin-top: 5px;
	  padding: 6px 15px;
	}
}

CSS (Optional)

/*-- Orange Button - not required in Joomlshine templates --*/

.link-button {
	cursor: pointer;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 8px 25px;
	display: inline-block;
	text-decoration: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.link-button, .link-button a {
	transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
}

a.link-button, .link-button a {
	font-weight: 300;
	color: #fff;
}

.link-button.button-orange, .link-button.button-orange:hover {
	background-color: #f26522;
}

HTML

<div class="promo-intro-text">
	<div class="promo-intro-text-inner">
		<h2 class="promo-intro-title">
			<span class="pm-t1">THE</span>
			<span class="pm-t2">QUANTUMWARP BLOG</span></h2>
		<p class="promo-intro-desc">
			Technology And Geek Blog<br />
			Articles and Information From My Personal Experience
		</p>
		<span><a href="#" class="link-button button-orange promo-intro-btn">Random Article</a></span>
	</div>
</div>

Notes

• Publish in promo position
• Publish ImageShow in the promo position
• Make sure that Imageshow is published after the 'Promo Intro Text' module

Promo Intro Text - Improved (ImageShow Overlay)

I have made alterations to Promo Intro Text (ImageShow Overlay) to make it cleaner code and more stylable including the ability to add coloured semi-transparent backgrounds with rounded corners to the individual lines for better visibility.

CSS

/*--- Promo Intro Text - Improved ---*/
 
/* Optional -  Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
    margin: 0;
    position: relative;
}
 
.promo-intro-text {
    text-align: center;
    position: absolute;
    top: 150px; /* This changes the position of the text on image show */
    width: 100%;
    z-index: 99;
    color: #fff;
}

/* set background colour for text blocks */
.promo-intro-text .promo-intro-text-inner h2 .pm-t1,
.promo-intro-text .promo-intro-text-inner h2 .pm-t2,
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
	
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.5); /* Only this is needed for good browsers to add transparent background */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000)";

	padding: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.promo-intro-text .promo-intro-text-inner h2 {
    padding: 0 10px;
}
 
.promo-intro-text .promo-intro-text-inner h2 span {
    text-transform: uppercase;
    font-size: 72px;
    line-height: 80px;
    font-weight: 700;
    text-shadow: 1px 1px 1px #333;
}
 
.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
    display: inline-block;
}
 
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
    display: inline-block;
    font-size: 48px;
    line-height: 56px;
    border-top: 2px solid rgba(255,255,255, 0.6);
    border-bottom: 2px solid rgba(255,255,255, 0.6);
    padding: 2px 0;
    margin-top: 10px;
}
 
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
    display: inline-block;
	font-size: 18px;
    line-height: 30px;
    margin-top: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
}

.promo-intro-text .promo-intro-text-inner .promo-intro-button-wrapper {}

.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
	display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
}
 
@media screen and (max-width: 1400px) {
    .promo-intro-text {
      top: 90px;
    }
}
 
@media screen and (max-width: 1280px) {
    .promo-intro-text {
      top: 50px;
    }
}
 
@media screen and (max-width: 1024px) {
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 50px;
      line-height: 58px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 30px;
      line-height: 38px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-desc {
      font-size: 14px;
      line-height: 22px;
      margin-top: 15px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-btn {
      margin-top: 10px;
    }
}
 
@media screen and (max-width: 799px) {
    .promo-intro-text {
      top: 20px;
    }
}
 
@media screen and (max-width: 640px){
    .promo-intro-text .promo-intro-text-inner .promo-intro-desc {
      display: none;
    }
}
 
@media screen and (max-width: 480px) {
    .promo-intro-text {
      top: 10px;
    }
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 30px;
      line-height: 38px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 20px;
      line-height: 28px;
    }
}
 
@media screen and (max-width: 360px) {
    .promo-intro-text {
      top: 0;
    }
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 20px;
      line-height: 28px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 12px;
      line-height: 20px;
      margin-top: 5px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-btn {
      margin-top: 5px;
      padding: 6px 15px;
    }
}

CSS (Optional)

/*-- Orange Button - not required in Joomlshine templates --*/
 
.link-button {
    cursor: pointer;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 8px 25px;
    display: inline-block;
    text-decoration: none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
 
.link-button, .link-button a {
    transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -webkit-transition: 0.3s ease-out;
}
 
a.link-button, .link-button a {
    font-weight: 300;
    color: #fff;
}
 
.link-button.button-orange, .link-button.button-orange:hover {
    background-color: #f26522;
}

HTML

<div class="promo-intro-text">
	<div class="promo-intro-text-inner">
		<h2 class="promo-intro-title">
			<span class="pm-t1">THE</span><br />
			<span class="pm-t2">QUANTUMWARP BLOG</span>
		</h2>
		<p class="promo-intro-desc">
			Technology And Geek Blog<br />
			Articles and Information From My Personal Experience<br />			
		</p>
		<div class="promo-intro-button-wrapper">
			<a href="http://quantumwarp.com/" class="link-button button-orange promo-intro-btn">Random Article</a>
		</div>
	</div>
</div>

Notes

• Publish in promo position
• Publish ImageShow in the promo position
• Make sure that Imageshow is published after the 'Promo Intro Text' module

Promo Intro Text - Improved (ImageShow Overlay) V2

This is just another style version with slightly different look. on the smallest devices the text is hidden.

CSS

/*--- Promo Intro Text - Improved ---*/
  
/* Optional -  Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
    margin: 0;
    position: relative;
}
  
.promo-intro-text {
    text-align: center;
    position: absolute;
    width: 100%;
    z-index: 99;
    color: #fff;
}
 
/* Set background colour for text blocks */
.promo-intro-text .promo-intro-text-inner h2 .pm-t1,
.promo-intro-text .promo-intro-text-inner h2 .pm-t2,
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
     
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.5); /* Only this is needed for good browsers to add transparent background */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000)";
 
    padding: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
 
.promo-intro-text .promo-intro-text-inner h2 {
    padding: 0 10px;
}
  
.promo-intro-text .promo-intro-text-inner h2 span {
    text-transform: uppercase;
    font-size: 72px;
    line-height: 80px;
    font-weight: 700;
    text-shadow: 1px 1px 1px #333;
}
  
.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
    display: inline-block;
}
  
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
    display: inline-block;
    font-size: 48px;
    line-height: 56px;
    border-top: 2px solid rgba(255,255,255, 0.6);
    border-bottom: 2px solid rgba(255,255,255, 0.6);
    padding: 2px 0;
    margin-top: 10px;
}
  
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
    display: inline-block;
    font-size: 18px;
    line-height: 30px;
    margin-top: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
}
 
.promo-intro-text .promo-intro-text-inner .promo-intro-button-wrapper {}
 
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
}
 
 
.promo-intro-text {
    top: 150px; /* This changes the position of the text on image show */
}

@media screen and (max-width: 1400px) {
    .promo-intro-text {
      top: 150px;
    }
}
  
@media screen and (max-width: 1280px) {
    .promo-intro-text {
      top: 150px;
    }
}
  
@media screen and (max-width: 1024px) {
    .promo-intro-text {
		top: 125px;
    }	
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 50px;
      line-height: 58px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 30px;
      line-height: 38px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-desc {
      font-size: 14px;
      line-height: 22px;
      margin-top: 15px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-btn {
      margin-top: 10px;
    }
}
  
@media screen and (max-width: 799px) {
    .promo-intro-text {
      top: 75px;
    }
}
  
@media screen and (max-width: 640px){
    .promo-intro-text .promo-intro-text-inner .promo-intro-desc {
      display: none;
    }
}
  
@media screen and (max-width: 480px) {
    .promo-intro-text {
      top: 10px;
    }
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 30px;
      line-height: 38px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 20px;
      line-height: 28px;
    }
}
  
@media screen and (max-width: 360px) {
    .promo-intro-text {
      top: 0;
    }
    .promo-intro-text .promo-intro-text-inner h2 span {
      font-size: 20px;
      line-height: 28px;
    }
    .promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
      font-size: 12px;
      line-height: 20px;
      margin-top: 5px;
    }
    .promo-intro-text .promo-intro-text-inner .promo-intro-btn {
      margin-top: 5px;
      padding: 6px 15px;
    }
}

HTML

<div class="promo-intro-text">
    <div class="promo-intro-text-inner">
        <p class="promo-intro-desc">NEWS, REMINDERS AND INCENTIVES<br /><br />Visit our social media pages by clicking <br />on an icon below and register to receive news,<br />updates and reminders relating to<br />the business, services, events, competitions and prizes.</p>
    </div>
</div>

This tutorials will allow you to run a second instance of a plugin completely separate. We will be using K2 Extended search for this tutorial as this is a prime example of why you would want this feature.

Scenario

I wanted to be able to run 2 instances of this plugin because I made the plugin so I could specify which categories and articles it searched. With 2 instances of the same plugin I can now have search results for certain categories or knowledge bases in separate search names spaces in a Joomla search. This allows easier searching and I can also control the results easier.

Prerequisites

• Workout you new name for the plugin. If you just want a second instance of a plugin keep the file names name similar. K2 Extended Search B
• Extract the plugin package on your PC

Files

• Rename the following files as show below. You will see I have just appended ‘b’ on the end of k2extended to keep in line with your new plugin name. You could use a program to change all of these file names as per your choice
  • k2extended.php à k2extendedb.php
  • k2extended.xml à k2extended.xml
  • language/en-GB/ en-GB.plg_search_k2extended.ini
    -->
    language/en-GB/ en-GB.plg_search_k2extendedb.ini
  • language/en-GB/ en-GB.plg_search_k2extended.sys.ini
    -->
    language/en-GB/ en-GB.plg_search_k2extended.sys.ini

File Content

• Open all plugin files in Notepad++
• With case sensitivity on, Text replace in all open files K2EXTENDED à K2EXTENDEDB
• With case sensitivity on, Text replace in all open files k2extended àk2extendedb
• Change the plugin descriptions as required in k2extendedb.xml
• In k2extendedb.php change (the class title)
  class plgSearchK2Extended extends JPlugin
  -->
  class plgSearchK2ExtendedB extends JPlugin

Finalization

• Zip up the files
• Upload the new plugin to your test server to make sure it works as expected and does not overwrite your donor’s plugin

When developing a Joomla extension, and most likely a standalone extension you receive the following error or similiar:

Strict Standards: Only variables should be assigned by reference in /plugins/editors-xtd/executecode/script.php on line 22

Solution

The error is most likely down to a line similiar to this

$app =& JFactory::getApplication('administrator');

Notice the =&, in PHP5+ you should not longer use this. The line should look like this without the &

$app = JFactory::getApplication('administrator');

Explanation

Remove the & because as off PHP5 it is no longer required and is still only present in PHP5 for legacy code and will be removed in further iterations of PHP.

As of PHP 5, the new operator returns a reference automatically, so assigning the result of new by reference results in an E_DEPRECATED message in PHP 5.3 and later, and an E_STRICT message in earlier versions.

My understanding of this is that PHP5 automatically creates a reference to the objects value and does not copy the value, this makes =& redundant because you no longer need to manually specify this feature. With a reference if you alter the value in either the variable or the object value then the other is changed aswell, hence the term reference.

If you look in the Joomla index.php files you will see there is no =&

// Instantiate the application.
$app = JFactory::getApplication('site');

or in the administrator

// Instantiate the application.
$app = JFactory::getApplication('administrator');

Other Solutions

These are some other solutions I have come across that people use

1. Append @ to the beginning of the statement, this causes PHP to supress errors for this statement

   @$app =& JFactory::getApplication('administrator');

2. Supress errors via the php.ini file

These should be avoided as hiding errors does not mean they have been fixed.

Links

• Dealing with E_STRICT in Joomla - Stack Overflow
• Joomla ‘Strict Standards: Only variables should be assigned by reference’ Error
• Strict Standards: Only variables should be assigned by reference PHP 5.4 - Stack Overflow
• Joomla Man Forum :: Topic: Error "Strict standards: Only variables should be assigned by reference in..." (1/1)
• How to fix the Strict Standards: Non-static method Joomla error