<style>
#hidden-content {
    display: none;
}
.placeholder-text {
    color: #fff;
    width: 500px;
    max-width: 100%;
    text-align: center;
    padding: 40px 20px;
    margin: 20px auto;
    background: #307451\9;
    background:radial-gradient(#22a563,#307451);
}
.placeholder-text p {
    font-size: 1.3em;
    max-width: 400px;
    margin: 0 auto 20px;
     text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}
</style>

<script type="text/javascript">
/* Insert JSN ImageShow place-holder content when the component isn't installed */

function addPlaceHolder(containerClass, placeholderID, classInsertedElement)
{
	var pattern = /\{imageshow (.*)\/\}/i;
	var elePlaceholder = document.id(placeholderID);

	var contentElePlaceholder = elePlaceholder.get('html'); 

        $$('.' + containerClass).each(function(item, index){

        var content = item.get('html');
	
	if (pattern.test(content)) 
	{
		item.set('html', '');
		var insertedEle = new Element("div", {class: classInsertedElement, html: contentElePlaceholder});
                item.adopt(insertedEle); 
	}

        });

}

window.addEvent('domready', function() {
addPlaceHolder('is-demo-theme', 'hidden-content', 'jsn-is-placeholder-content');
});
</script>

<div id="hidden-content">
<div class="placeholder-text">
<p>Here should be the presentation of JSN ImageShow,<br />but it is not installed on your website.</p>
<a href="http://www.joomlashine.com/joomla-extensions/jsn-imageshow.html" target="_blank" class="link-button button-light">Free Download Now</a>
</div>
</div>

<p>JSN Boot provides<strong> 4 major color variations</strong> for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table's header and some others.</p>
<h3>Color variations</h3>
<div class="content-center" style="width: 600px; margin: 0 auto;">
<p><strong>Click on any screenshot to LIVE demo of that color variation. (<a class="link-action" href="index.php?option=com_content&view=article&id=68&Itemid=676">reset to default</a>)</strong></p>
<div class="is-demo-theme">{imageshow sl=4 sc=12 w=600 h=300 /}<br /></div>
<p>Interactive images presentation by <a href="http://www.joomlashine.com/joomla-extensions/jsn-imageshow.html" target="_blank">JSN ImageShow extension</a></p>
</div>
<hr class="line-dots" />
<h3>Color configuration</h3>
<p>Each template color can be configured by 3 different ways:</p>
<div class="grid-layout">
<div>
<h4>By Template parameter</h4>
<p><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/design-features/color-variations/color-config-tp.png" border="0" /></p>
<p>Template color can be set by template parameter <strong>Template Color</strong> in administration panel.</p>
</div>
<div>
<h4>By "Page Class Suffix"</h4>
<p><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/design-features/color-variations/color-config-pcs.png" border="0"  /></p>
<p>Template color can be defined in parameter <strong>Page Class Suffix</strong> of menu items as <strong>custom-color-xxx</strong><strong>.</strong></p>
</div>
<div>
<h4>By Site tools panel</h4>
<p><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/design-features/color-variations/color-config-st.png" border="0" width="215" height="125" /></p>
<p>Template color can be selected by website visitor from <strong>Color Selector</strong> in <strong>Site tools</strong>.</p>
</div>
</div>