Items filtered by date: December 2015

This is a 100% width and then some horizontal bar that will allow you to break up a website page and promote a message or product. Change the background to match your needs. This was based on a design from the JSN Dona template and was published in the content-top-below position.

CSS

/*--- Contact Bar ---*/

/* -- FULL WIDTH Class (Optional)-- */
/* This class is inbuilt to the Joomlashine Dona Template, maybe others. Add the code below if not present */
.template-full-width {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box !important;
	width: 100%;
	padding-left: 1000px !important;
	padding-right: 1000px !important;
	margin: 0 -1000px !important;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* ---- */

/* remove the extra padding in this module position only (optional) */
#jsn-pos-content-top-below  {
	padding: 0 0;
}
	
.contact-bar {
	background-image: url("images/modules/790/cb-background.jpg");
	background-position: center center;
	background-size: 100% 100%;
	background-attachment: fixed;
	padding: 25px 10px;
	text-align: center;
}

.contact-bar .cb-text {
	display: inline-block;
	width: 66%;
}

.contact-bar .cb-text p {
	font-size: 20px;
	line-height: 28px;
	color: #fff;
	text-align: right;
	margin: 15px 0 0;
	
}

.contact-bar .cb-button{
	display: inline-block;
	white-space: nowrap;
	margin: 15px;
}

.contact-bar .cb-button a.btn {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 10px;
  padding: 13px 25px;  
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;  
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;  
  width: auto;
  border-color: #9B1612;
  background: #9B1612;	
}

.contact-bar .cb-button a.btn:hover {
	background: none;
	color: #9B1612;
}


@media screen and (max-width: 1024px){
	.contact-bar .cb-text p {
	  font-size: 16px;
	}
}

@media screen and (max-width: 799px) {
	.contact-bar .cb-text p {
	  font-size: 14px;
	  line-height: 22px;
	  margin: 10px;
	}
}

@media screen and (max-width: 768px) {
	.contact-bar .cb-text p {	  
	  text-align: center;
	}
}

@media screen and (max-width: 640px) {
	
	.contact-bar .cb-text p {
	  font-size: 16px;
	  line-height: 24px;
	  margin: 10px;	  
	}
	.contact-bar .cb-button {
	  padding-left: 0;
	}
	.contact-bar .cb-button a.btn {
	  margin: 0;
	}
}

CSS (Fix for this template to get the demo running)

.contact-bar .cb-button a.btn {
	color: #fff !important;
}
.contact-bar .cb-button a.btn:hover {
	color: #9B1612 important;
}

HTML

<div class="contact-bar template-full-width">
	<div class="cb-text"><p>NEED ADVICE on your business growth, customer experience or your finances?</p></div>
	<div class="cb-button"><a href="#" class="btn">Contact Now</a></div>
</div>

You should see a canopy on top of this page. This is a great little item. You can add a canopy onto the top of your website which adds some atmosphere to it. This is specific to a joomlashine template but can easily be changed to any site.

CSS

/*-- Header Canopy --*/

/* Set Header Size - also corrects for mobile*/
#jsn-header {
	padding-top: 140px;
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	#jsn-header {
		padding-top: 60px;
	}
}

/* Background Image */
#jsn-page {
	background-image: url(/images/kb/2016/789/canopy.png);
}

#jsn-page {
	background-size: 100% auto;
	background-repeat: no-repeat;
}

/* This stops the canopy from ever expanding (optional) */
@media only screen and (min-width: 1170px) {
	#jsn-page { 
		background-size: 1170px;			
		background-position: top;
	}
}

Notes

• From the JSN Gruve Template
• There are different coloured canopy graphics with this template that you can use. I think there is also the source PSD so you can modify it yourself.
• You do not have to use this graphic. You can use anything you want.
• Depending on the type of the tempalte you have the canopy might keep stretching
• The canopy is rigged to stop expanding at 1170px but you can remove the rule for this and then it will keep expanding i.e. 100%

This module no longer has any hamburgers in it but I thought it was a cool name. This package is based on a layout from the JSN Gruve template. It is great for making points stand out more with some animated graphics.

Need cool template?

JSN Gruve is an amazing Joomla template with stunning visual design. Equipped with powerful features this template allows...

Easy to Start

JSN Gruve provides unique mechanism of installing sample data on directly your current website. Just few clicks and the demo...

Care about support?

Compared to big guys, we produce very little amount of templates, but with fanatical focus on quality of both product and support.

CSS

/*-- Hambuger Hover --*/	

.hamburger-hover {
	padding: 15px 0;
}

.hamburger-hover-description {		
	overflow: hidden;
}

.hamburger-hover img.animation {
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

/* Sets an intial background colour to shine through the transparent Png */
.hamburger-hover img {
	background-color: #a2a2a2;
	margin: 10px;
}

/* The hover colours for the transparent icons */
.jsn-color-red .hamburger-hover:hover img {
	background-color: #bf0000;
}

.jsn-color-green .hamburger-hover:hover img {
	background-color: #63750F;
}

.jsn-color-blue .hamburger-hover:hover img {
	background-color: #389ED1;
}

.jsn-color-violet .hamburger-hover:hover img {
	background-color: #AB3C60;
}

.jsn-color-orange .hamburger-hover:hover img {
	background-color: #D18903;
}

.jsn-color-cyan .hamburger-hover:hover img {
	background-color: #268A76;
}

HTML

<!-- Module 1: Doves -->
<div class="hamburger-hover">
	<img src="/images/modules/788/Doves.png" alt="" class="animation" style="float: left;" />
	<div class="hamburger-hover-description">
		<h3 class="jsn-moduletitle"><span class="jsn-moduleicon"><a href="http://quantumwarp.com/">Need cool template?</a></span></h3>
		JSN Gruve is an amazing Joomla template with stunning visual design. Equipped with powerful features this template allows...
	</div>
</div>

<!-- Module 2: Party Dress -->
<div class="hamburger-hover">
	<img src="/images/modules/788/Party-Dress.png" alt="" class="animation" style="float: left;" />
	<div class="hamburger-hover-description">
		<h3 class="jsn-moduletitle"><span class="jsn-moduleicon"><a href="http://quantumwarp.com/">Easy to Start</a></span></h3>
		JSN Gruve provides unique mechanism of installing sample data on directly your current website. <a href="http://quantumwarp.com/" rel="nofollow">Just few clicks</a> and the demo...
	</div>
</div> 

<!-- Module 3: Wedding Bells -->
<div class="hamburger-hover">
	<img src="/images/modules/788/Wedding-Bells.png" alt="" class="animation" style="float: left;" />
	<div class="hamburger-hover-description">
		<h3 class="jsn-moduletitle"><span class="jsn-moduleicon"><a href="http://quantumwarp.com/">Care about support?</a></span></h3>
		Compared to big guys, we produce very little amount of templates, but with fanatical focus on quality of both product and support.
	</div>
</div>    

Notes

• utilises transparent png and a changing background colour - inbuilt to gruve but this is the code it depends on just incase it is used in another template
• you have to create the transparent icons
• This is from the JSN Gruve Template
• You must create seperate module for each HTML code block.
• They were original published in the content-top position but can go anywhere now.
• I would use the module names as noted above for the module names to keep things organised.

A nice 4 module arrangement that you can use to use for 'Call To Action' or promote specifi products.

Great Docs & Support

In addition to comprehensive documentations in PDF format, you also get support from friendly forum and dedicated support system.

Download docs

Free Edition

In the case you are on tight budget or just want to taste this template before paying. We have free edition for you to download right now.

Download Free

FRO Edition

If you are serious about your time and money, consider to buy PRO edition to get full featured template and dedicated support service.

Buy PRO edition

HTML

<!-- Module 1: Easy To Start -->
<p><img src="/images/modules/787/showcase.png" alt="showcase" class="img-showcase" style="position: relative; top: 25px; border: none;" /></p>

<!-- Module 2: Great Docs & Support -->
<div style="text-align: center;"><img src="/images/modules/787/like-icon.jpg" alt="like-icon" class="" style="margin: 30px 0;" />
	<h3 class="jsn-moduletitle"><span class="jsn-moduleicon">Great Docs &amp; Support</span></h3>
	<p style="padding: 10px 0;">In addition to comprehensive documentations in PDF format, you also get support from friendly forum and dedicated support system.</p>
	<p><a href="http://quantumwarp.com/" class="link-button button-green">Download docs</a></p>
</div>  


<!-- Module 3: Free Edition -->
<div style="text-align: center;"><img src="/images/modules/787/free-icon.jpg" alt="Free" class="" style="margin: 30px 0; border: none;" />
	<h3 class="jsn-moduletitle"><span class="jsn-moduleicon">Free Edition</span></h3>
	<p style="padding: 10px 0;">In the case you are on tight budget or just want to taste this template before paying. We have free edition for you to download right now.</p>
	<p><a href="http://quantumwarp.com/" class="link-button button-green">Download Free</a></p>
</div>   


<!-- Module 4: PRO Edition -->
<div style="text-align: center;"><img src="/images/modules/787/pro-icon.jpg" alt="Pro" style="margin: 30px 0; border: none;" />
	<h3 class="jsn-moduletitle"><span class="jsn-moduleicon">FRO Edition</span></h3>
	<p style="padding: 10px 0;">If you are serious about your time and money, consider to buy PRO edition to get full featured template and dedicated support service.</p>
	<p><a href="http://quantumwarp.com/" class="link-button button-green">Buy PRO edition</a></p>
</div>

Notes

• This is from the JSN Gruve Template
• You must create seperate module for each HTML code block.
• They were original published in the content-bottom position but can go anywhere now.
• I would use the module names as noted above for the module names to keep things organised.

Prebuilt Slides

This slider is comprised of 2 slides using the same layout you can see above. Dont forget to chase the file loctions as needed. Download here.

General

/* EasySlider Backgroun Rounded Corners */
.jsn-es-background.slide-background {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

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

Notes

Copy Objects between layers (desktop, laptop, etc)

you can copy and paste between layers, sort of.

when you copy and paste, within a slide the process is not layer aware. What this means is that no matter what layer you are on the paste operation will place the copied object in the slide and it is the layer visibility that allows you to show the object on a specific layer. All objects are present on every layer they just might not be visibly.

so before copying an object, select visible on all layers and then paste. Edit the visibility as needed and you are done

Other notes

• If you only do the desktop version then the text slidy things automatically resize

Main-Slider Ideal Settings

When the desktop width is 1170px

default image locations and sizes

• images/modules/main-easyslider/logo.png  (122 x 56)

• images/modules/main-easyslider/slide1-background.jpg (1280 x 720)

• images/modules/main-easyslider/slide2-background.jpg (1280 x 720)

Add the other recommend sizes to keep ratio, perhaps look at that dark image article.

/* Remove gutter on easy slider / Promo Position */
    body:not(.jsn-demo-page) #jsn-promo #jsn-promo-inner {
    padding: 0px !important;
    width: 100%;
}

/* Background image for footer */
#jsn-footer::before {
    background: url("../custom/images/footer-background.jpg");
}

I made a dark image by using paint and changing the following settings.

• Brightness: -60
• Contrast: -60

/* Remove Logo and padding from footer information module */
.jsn-page-info {
    background: none;
    padding-top: 5px;
}

The Information blocks were adapted from JSN Reta

Header

CSS

/*--- Header Contact Information ---*/	

.header-contact-information:before,
.header-contact-information:after {
	content: "";
	display: table;
}

.header-contact-information:after {
	clear: both;
}

.header-ci-btn {
	font-size: 12px;
	line-height: 20px;
	color: #333 !important;
	text-transform: uppercase;
	font-weight: 500;
	padding: 10px 20px;
	border-radius: 3px;
	transition: 0.3s;
	-moz-transition: 0.3s;
	-webkit-transition: 0.3s;
	border: 1px solid #e5e5e5;
}

.header-contact-information .header-ci-btn:hover {
	opacity: .8;
}

.header-contact-information {
	margin-top: 30px;
	padding: 0 150px 0 20px;
	border-left: 1px solid #e5e5e5;
	position: relative;
}

.header-contact-information .jsn-left {
	font-size: 14px;
	line-height: 22px;
	margin: -8px 0 0;
}

.header-contact-information .jsn-left li {
	margin: 8px 0 0;
	list-style: none;
}

.header-contact-information .jsn-left li span {
	margin-right: 18px;
}

.header-contact-information .jsn-left li a {
	color: #363636;
}

.header-contact-information .jsn-left li a:hover {
	color: #b0c052;
}

.header-contact-information .header-ci-btn {
	position: absolute;
	top: 5px;
	right: 0;
}

body.jsn-direction-rtl .header-contact-information {
	padding: 0 20px 0 150px;
	border-right: 1px solid #e5e5e5;
	border-left: none;
}

body.jsn-direction-rtl .header-contact-information .header-ci-btn {
	top: 5px;
	left: 0;
	right: auto;
}

HTML

<div class="header-contact-information" style="width: 250px;">
	<ul class="jsn-left">
		<li><img src="/images/modules/784/header/fa-phone.png" alt="Call Us" /> 0800 123 4567</li>
		<li><img src="/images/modules/784/header/fa-phone.png" alt="Call Us" /> 01772 123456</li>
		<li><img src="/images/modules/784/header/fa-mobile-phone.png" alt="Call Us" /> 07747 123456</li>
		<li><img src="/images/modules/784/header/fa-envelope.png" alt="Call Us" /> <a href="mailto:info@example.com">info@example.com</a></li>
	</ul>
	<a href="http://quantumwarp.com/" class="header-ci-btn">contact us</a>
</div>

Footer

• Rocky Lane, Skerton, Manchester, Cumbria, MA1 1QW

• info@example.com

• 0800 123 4567

• 01772 123456

• 07777 123 456

CSS

/*--- Footer Contact Information ---*/

.footer-contact-information {
	list-style: none;
	font-size: 14px;
	padding-top: 30px;
}

.footer-contact-information p,
.footer-contact-information a {
	color: #acacac;
}

.footer-contact-information li {
	margin: 12px 0 0;
	list-style: none;
}

.footer-contact-information li:first-child {
	margin-top: 0;
}

.footer-contact-information li img {
	float: left;
	margin-right: 15px;
}

HTML

<div class="footer-contact-information">

	<img src="/images/modules/784/footer/784/footer/logo.png" alt="QuantumWarp" />

	<ul class="clearfix">
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-map-marker.png" alt="" /> Rocky Lane, Skerton, Manchester, Cumbria, MA1 1QW</p>
		</li>
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-envelope.png" alt="" /> <a href="mailto:info@example.com">info@example.com</a></p>
		</li>
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-phone.png" alt="Call Us" /> 0800 123 4567</p>
		</li>
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-phone.png" alt="Call Us" /> 01772 123456</p>
		</li>
		<li>
			<p><img src="/images/modules/784/footer/784/footer/fa-mobile-phone.png" alt="Call Us" /> 07777 123 456</p>
		</li>
	</ul>
	
</div>

The colour for the icons and text = #acacac

3D Button

This 3D button is made purley by CSS. I think I have sued a button generator to create this intially but it is easier just to copy this button and alter as needed. Below is 2 buttons but they do not flow underneath easch other properly if the screen gets to small. If mulitple buttons are required I would make the Block Level elements using float etc...

HTML

<div style="text-align: center; margin: 60px 0;">
	<span style="padding: 10px; white-space: nowrap;"><a href="http://quantumwarp.com/" style="color: #e6e6e6; font-size: 20px; padding: 20px; text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: linear-gradient(0deg, #6b1d10 30%, #6b1d10 70%); -webkit-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75);">Book Online</a></span>
	<span style="padding: 10px; white-space: nowrap;"><a href="http://quantumwarp.com/" style="color: #e6e6e6; font-size: 20px; padding: 20px; text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: linear-gradient(0deg, #6b1d10 30%, #6b1d10 70%); -webkit-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75);">View Prices</a></span>
</div>

ExecuteCode comprises of a system plugin and an editor button and allows you enter real code via your WYSIWYG without the code getting lost and you can even edit the code.

Add external code files inline

<link rel="stylesheet" type="text/css" href="http://demo.joomlashine.com/joomla-templates/jsn_air/pro/images/content-top/jquery.horizontal.scroll.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://demo.joomlashine.com/joomla-templates/jsn_air/pro/images/content-top/js/jquery.horizontal.scroll.js" type="text/javascript"></script>
<script src="/media/joomlashine/jsn_air/custom.js" type="text/javascript"></script>

You can obviously also use

<style type="text/css">

</style>

<script type="text/javascript">

</script>

Incorrect Copy and Paste

When copying and pasting with Google Chrome there will be these A characters inserted where Tabs should be.

/* Test code */Â 
.dodgy-copy {
    display: inline-block;
    outline: medium none;
    padding: 4px;
    transition: all 300ms ease-out 0s;
}

Solution

Use firefox. I should probably look at updating my code.

This is a template of how I want package articles to be layed out. It keeps all of these articles follow the same format. Ironically this that I am writing is where the description of the package should go.

• Real important information can go in the description (ie this package is not responsive) the rest should go in the notes at the bottom
• All demo code should be run from a live code block and not left naked in the wysiwyg. If you start using normal HMTL in an article when showing of a demo it can get messy. If you keep the demo code in a live code block when you edit the code in the backend it makes things a lot easier as you can clearly see what is what.
• When putting code in the live blocks you should follow the same format as this articles so the order is maintained. Occassionally you will need to move the location of the javascript for correct execution and in this case it is fine to change the order of the items but keep the order the same in the live block as the rest of the article so it makes sense. The CSS/JS/HTML code in the live block should be seperated by an empty line.
• The code getting display should not be encased in <script> or <style> tags but left naked. The reason for this is, it makes it easier to copy and past the code into a custom.css or custom.js file as most people will use this method rather that inserting the code inline. The tags are only used when the code is inline.
• Keep the code blocks all collapsed unless they are short and there are not many of them, in this cas it is a bit pointless collapsing the code blocks and just adds another step where one is not needed.
• Only include the display blocks for the code types you are using. They dont all need to be present for every article but make sure you maintain the correct order.
• You might also have to alter the live code so it run with no conflict like altering class names or applying a template fix to allow the deom to run with no issues. If you have to add specific code you should add it to the notes like in the list below because it could be helpful in diagnosing issues later.
• no gap between live and display code
• Where the desciption cannot be easily seperated from the code block immediately folloing it, you should use a <hr> splitting line and possibly an empty line or two.
• I am not sure what I am doing with attachments or assets yet.
• The code being display should use the correct links following my rules and as such all the assets would be in the it's module folder ( i.e. 'images/modules/package-article-template') and the live code should point to the KB article's folder. This keeps things neat and all the assets in one place but whilst allowing the code to be easily deployed on client projects. It also has the side effect of stopping my internal links getting distributed over the interenet.

CSS

.demo-class{
    border: 1px solid black;
    padding 10px;
}

CSS (Optional / Joomlashine)

.jsn-demo-class{
    border: 1px solid black;
    padding 10px;
}

CSS (Fix for this template to get the demo running)

.jsn-demo-class-template-fix{
    border: 1px solid black;
    padding 10px;
}

JS Dependancies (Joomla / External / 3rd Party)

• bootstrap.min.js - No point in adding this dependacy to every article because it is inbuillt to Joomla but reference it though

JS

jQuery(document).ready(function(){ 
	// Do Something
}

JS (Optional / Joomlashine)

jQuery(document).ready(function(){ 
	// Do Something
}

JS (Fix for this template to get the demo running)

jQuery(document).ready(function(){ 
	// Do Something
}

HTML

<div class="demo-class">Live Code Block</div>

<!-- Module 1: Module Title -->
<div>Module Code</div>

<!-- Module 2: Module Title -->
<div>Module Code</div>

<!-- Module 3: Module Title -->
<div>Module Code</div>

Notes

Item 1 (use this title if notes need grouping)

• These are my Notes

Item 2 (use this title if notes need grouping)

• These are my Notes

Asset Sources

• HTML/CSS/JS Code = The code on this page
• File is used for  = File Name (linked to download file - see notes in description about attachments) - Website (if needed) - Notes on the file source (if any)
• File is used for  = File Name (linked to download file - see notes in description about attachments) - Website (if needed) - Notes on the file source (if any)

Links

Links Group 1 (use this title if links need grouping)

• These are my links

Links Group 2 (use this title if links need grouping)

• These are my links