December 2015 | QuantumWarp

Tuesday, 10 May 2016 17:33

Position - Two Embedded Inline Modules with a Large Border

I wrote this code so I could set the width of 2 modules via the loadposition plugin rather than rely on bootstap. I developed this to utilise the modules 'Happy Customers' and 'Our Partners' and display them in one module position only.

The code uses the #jsn-content-bottom-over but you can change this for any position.

CSS

/*-- Position - Two Embedded Inline Modules with a Large Border --*/

#jsn-content-bottom-over {
    padding: 10px 0;
}

#jsn-content-bottom-over div.jsn-modulescontainer {
    padding: 10px 0;
}

.pos-cbo { }

.pos-cbo .pos-cbo-happy-customers {
	float: left;
	width: 33.33%;
}

.pos-cbo .pos-cbo-our-partners {
	float: left;
	width: 66.66%;	
}

@media screen and (max-width: 768px) {
	
	.pos-cbo .pos-cbo-happy-customers {
		float: left;
		width: 100%;
	}
	
	/* make partners go under testimonials */
	.pos-cbo .pos-cbo-our-partners {
		clear: both;
		width: 100%;
	}
}

HTML

<div class="pos-cbo">
	<div class="pos-cbo-happy-customers">{l oadmodule mod_custom,Happy Customers}</div>
	<div class="pos-cbo-our-partners">{l oadmodule mod_custom,Our Partners}</div>
</div>

Published in JSN Modules

Monday, 09 May 2016 17:52

Display and Icon Font

In this modern age web designers can now use Vector Icons / Web Fonts to scale to any size instead of having to resize normal icons with loss of clarity. This simple code, which assumes you have embeded the Font Awesome libraries (CSS and JS) as required.

This tecnique will work with other icon fonts and I am just using Font Awesome because it installed on my site and is very popular.

You can use font icons either in block or inline elements.

Block Element

Inline Element

CSS

/* Display Icon Font */

.fu-icon-wrapper i[class*="fa"] {
	font-size: 36px;
	display: block;
	color: #000;
}

HTML

<!-- Block Element -->
<div class="fu-icon-wrapper"><i class="fa fa-map-marker"></i> Block Element</div>	

<!-- Inline Element -->
<span class="fu-icon-wrapper"><i class="fa fa-map-marker"></i> Inline Element</span>

Published in CSS

Sunday, 08 May 2016 11:44

Our Services

This call to action block uses the Joomlashine Grid-Layout system to make it responsive. The buttons are animated when hovered over. Original published in the content-top position and was based on a module form JSN Dona.

Financial service

We offer financial solutions including small business loans and merchant cash advances to assist small business owners

Strategic Marketing

We can make a deep research on your service and generate clever, creative ideas that can boost your income.

Customer analytics

We offer financial solutions including small business loans and merchant cash advances to assist small business owners.

Sunday, 08 May 2016 10:54

Our Partners

This is an excellent showcase for affiliations or memberships of relevant organisations. The icons are animated when they are hovered over. I based this on a module from the JSN Dona template.

Our partners

CSS

/*--- Our Partners ---*/

.our-partners {
	background: #F0F2F3;	/* Optional */
	padding: 10px;			/* Optional */
}

.our-partners h3 {
	font-size: 18px;
	line-height: 26px;
	text-transform: uppercase;
	font-weight: 700;	
	margin: 30px 0px 30px 0px;	
}

.our-partners .op-content {
  background: #fff;
  padding: 34px 30px;
  /*min-height: 250px;*/ /* Give the content a minumum height when needed */  
}

.our-partners .op-content:before,
.our-partners .op-content:after,
.our-partners .op-content ul:before,
.our-partners .op-content ul:after {
	content: "";
	display: table;
}

.our-partners .op-content:after,
.our-partners .op-content ul:after  {
	clear: both;
}

.our-partners ul {
	margin: -30px -15px; /* this compensates for the <li> margins */
}

.our-partners ul li {
	float: left;
	list-style: none;
	margin: 30px 0 0;
	padding: 0 15px;
	width: 29%;
	height: 80px;
	line-height: 80px;
	text-align: center;
}

.our-partners ul li img {
	transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}

.our-partners ul li img:hover {
	transform: scale(1.2);
	-o-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
}

@media screen and (max-width: 480px) {
	.our-partners .op-content { 		
		min-height: 1px; 
	}
	.our-partners ul li {
	  width: 50%;
	}
}

HTML

<div class="our-partners">

	<h3>Our partners</h3>

	<div class="op-content">	
		<ul>
			<li><img src="/images/modules/793/logo1.png" alt="" /></li>
			<li><img src="/images/modules/793/logo2.png" alt="" /></li>
			<li><img src="/images/modules/793/logo3.png" alt="" /></li>
			<li><img src="/images/modules/793/logo4.png" alt="" /></li>
			<li><img src="/images/modules/793/logo5.png" alt="" /></li>
			<li><img src="/images/modules/793/logo6.png" alt="" /></li>
		</ul>
	</div>

</div>

Published in Packages

Saturday, 07 May 2016 20:04

Happy Customers

This is a bootstrap driven Testimonial Carousel. It is responsivee and lightweight. It is easily styled and can be put in any module position. I based this on the testimonial module from the JSN Dona Template.

Happy Customers

This is just a big thank you to a great company with great products and even better customer service. These guys are really awesome. Using their templates and extensions, my site is loading faster than ever.

John Doe System Administrator, United Kingdom QuantumWarp

I absolutely LOVE JSN Epic PRO. All the functions I will ever need. No glitches, No hassles, No problems, and the best support team I have yet to encounter. Thanks for the only template I will ever need. Can"t praise them enough - Excellent.

Jane Doe System Administrator, United Kingdom QuantumWarp

I was looking for a suitable template which you can use it for multi languages website, especially it works with right to left language. I tried numerous other Joomla templates, but none were as flexible and efficient as joomlashine templates. Do not hesitate in buying joomlashine templates.

James Doe Programmer, United Kingdom QuantumWarp

CSS

/*--- Happy Customers ---*/

.happy-customers {
	min-width: 200px;
	padding: 0px 20px;
}

/* - Title - */

.happy-customers h3 {
	font-size: 18px;
	line-height: 26px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 30px 0px 30px 0px;
}

/* - Carousel Main Block - */ 

.happy-customers .hc-testimonial {    
	-webkit-transition: none !important;
	transition: none !important;    
}

/* - Carousel Items Wrapper - */

.happy-customers .hc-testimonial .carousel-inner {
	padding-bottom: 10px;	
}

/* - Carousel Item - */

.happy-customers .hc-item {
	text-align: center;
	right: auto;
}

/* - Speech Bubble Container - */

.happy-customers .hc-item .hc-box {
	position: relative;
	background: #FFF;
	border: 1px solid #DDD;
	padding: 30px 15px 15px;
	border-radius: 5px;
	min-height: 250px; /* Keeps everything level */
}

/* - Speech Bubble Arrow on the bottom of the bubble - */

.happy-customers .hc-item .hc-box.top > .arrow {
	left: 50%;
	margin-left: -9px;
	border-bottom-width: 0;
	border-top-color: #999;
	border-top-color: rgba(0, 0, 0, .25);
	bottom: -10px;
}

.happy-customers .hc-item .hc-box .arrow {
	border-width: 9px;
}

.happy-customers .hc-item .hc-box .arrow,
.happy-customers .hc-item .hc-box .arrow:after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}

.happy-customers .hc-item .hc-box.top > .arrow:after {
	content: " ";
	bottom: -7px;
	margin-left: -9px;
	border-bottom-width: 0;
	border-top-color: #FFF;
}

.happy-customers .hc-item .hc-box.top > .arrow:after {
	border-width: 9px;
	content: "";
}

/* - Speech Bubble Content - */

.happy-customers .hc-item .hc-box .hc-content p {
	text-align: center;
	font-family: "Raleway";
	line-height: 24px;
	font-size: 15px;
	font-style: italic;
	color: #555;
}

/* - Avatar - */

.happy-customers .hc-item .hc-avatar {
	width: 60px;
	height: 60px;
	margin: 30px 15px 0 0;
	float: left;	
}

.happy-customers .hc-item .hc-avatar img {
	display: block;
	width: 100%;
}

/* - Meta Information - */

.happy-customers .hc-item .hc-meta {
	margin: 30px 0 0;
	text-align: left;
	padding-right: 40px;
	overflow: hidden;
}

.happy-customers .hc-item .hc-meta span {
	font-weight: 700;
}

.happy-customers .hc-item .hc-meta span:before {
	/*content:'-';*/
	padding: 0 4px;
}

.happy-customers .hc-item .hc-meta span:nth-child(2):before {
	display: none;
}

.happy-customers .hc-item .hc-meta .hc-name {
	margin-bottom: 5px;
	font-size: 16px;
	color: #333333;
	font-weight: bold;
	display: block;
}

.happy-customers .hc-item .hc-meta .hc-jobtitle,
.happy-customers .hc-item .hc-meta .hc-country,
.happy-customers .hc-item .hc-meta .hc-link {
	display: inline-block;
	font-size: 12px;
	padding: 0 0;	
	line-height: 20px;
}

.happy-customers .hc-item .hc-meta .hc-jobtitle,
.happy-customers .hc-item .hc-meta .hc-country {
	color: #8A8A8A;
}

/* - Navigation - Indicators */

.happy-customers .hc-testimonial .carousel-indicators {	
	width: auto;	
	display: inline-block;    
	margin: 0;	
	right: 0;
	left: auto;
	top: auto !important;
	bottom: -20px !important;	
}

.happy-customers .hc-testimonial .carousel-indicators li {
	background-color: #cbcbcb;
	width: 8px;
	height: 8px;
	border: none;
	margin: 0 0 0 5px;		
}

.happy-customers .hc-testimonial .carousel-indicators li.active {
	background-color: #0088CC;
}

/* - Navigation - Arrows arrows (Not Coded in HTML yet) */

.happy-customers .hc-testimonial .hc-arrow-left,
.happy-customers .hc-testimonial .hc-arrow-right {
	border: 1px solid #CCC;
	top: auto !important;
	bottom: -10px !important;
	position: absolute !important;
	display: inline-block !important;
	margin-top: -19px;
	font-size: 15px !important;
	color: #AAA !important;
	width: 25px !important;
	height: 25px;
	line-height: 24px;
	text-shadow: none !important;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.happy-customers .hc-testimonial .hc-arrow-left {
	left: 50% !important;
	margin-left: -28px;
	margin-bottom: 0;
	cursor: pointer;
}

.happy-customers .hc-testimonial .hc-arrow-right {
	right: 50% !important;
	margin-right: -28px;
	cursor: pointer;
}

.happy-customers .hc-testimonial .hc-arrow-left:hover,
.happy-customers .hc-testimonial .hc-arrow-right:hover {
	color: #428BCA !important;
	border-color: #428BCA;
}

/* - Navigation - Not sure */

.happy-customers .hc-testimonial .carousel-control.left {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 100%) !important;
	background-repeat: repeat-x;
}

.happy-customers .hc-testimonial .carousel-control.right {
	background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, transparent 100%) !important;
	background-repeat: repeat-x;
}

JS Dependancies

bootstrap.min.js

JS

(function($){
	$(document).ready(function(){
		if($("#hc-carousel").length){
		
			/* if you do not have this block when using in joomla it breaks - dont know why */
			$('#hc-carousel').each(function(index, element) {
				$(this)[index].slide = null;
			});
		
			// Activate Carousel
			$("#hc-carousel").carousel({
			  interval: 5000
			});
			
			// Enable Carousel Indicators
			$("#hc-carousel .carousel-indicators li").each(function(i){
				$(this).on("click", function(){
					$("#hc-carousel").carousel(i);
				});
				
			// Add Enable Arrows here
			// ----------------------
			
			});
		}
	});
})(jQuery);

HTML

<div class="happy-customers">
	
	<h3>Happy Customers</h3>		
		
	<div class="carousel slide hc-testimonial" style="width:100%" id="hc-carousel">
	
		<div class="carousel-inner">
		
			<div class="item active">
				<div class="hc-item">
					<div class="hc-box top">
						<div class="arrow"></div>
						<div class="hc-content">                                            
							<p>This is just a big thank you to a great company with great products and even better customer service. These guys are really awesome. Using their templates and extensions, my site is loading faster than ever. </p>
						</div>
					</div>
					<div class="hc-avatar"><img src="/images/kb/2016/792/administrator.png" /></div>								
					<div class="hc-meta">
						<span class="hc-name">John Doe</span>
						<span class="hc-jobtitle">System Administrator, </span>
						<span class="hc-country">United Kingdom</span>
						<span class="hc-company"><a href="http://quantumwarp.com/" target="_blank">QuantumWarp</a></span>
					</div>
				</div>
			</div>
			
			<div class="item">
				<div class="hc-item">
					<div class="hc-box top">
						<div class="arrow"></div>
						<div class="hc-content">                                            
							<p>I absolutely LOVE JSN Epic PRO. All the functions I will ever need. No glitches, No hassles, No problems, and the best support team I have yet to encounter. Thanks for the only template I will ever need. Can"t praise them enough - Excellent.</p>                                            
						</div>
					</div>
					<div class="hc-avatar"><img src="/images/kb/2016/792/administrator_female.png" /></div>								
					<div class="hc-meta">
						<span class="hc-name">Jane Doe</span>
						<span class="hc-jobtitle">System Administrator, </span>
						<span class="hc-country">United Kingdom</span>
						<span class="hc-company"><a href="http://quantumwarp.com/" target="_blank">QuantumWarp</a></span>
					</div>
				</div>
			</div>
			
			<div class="item">
				<div class="hc-item">
					<div class="hc-box top">
						<div class="arrow"></div>
						<div class="hc-content">                                            
							<p>I was looking for a suitable template which you can use it for multi languages website, especially it works with right to left language. I tried numerous other Joomla templates, but none were as flexible and efficient as joomlashine templates. Do not hesitate in buying joomlashine templates.</p>                                           
						</div>
					</div>
					<div class="hc-avatar"><img src="/images/kb/2016/792/salesman.png" /></div>								
					<div class="hc-meta">
						<span class="hc-name">James Doe</span>
						<span class="hc-jobtitle">Programmer, </span>
						<span class="hc-country">United Kingdom</span>
						<span class="hc-company"><a href="http://quantumwarp.com/" target="_blank">QuantumWarp</a></span>
					</div>
				</div>
			</div>
			
		</div>
		
		<ol class="carousel-indicators">
			<li class="active"></li>
			<li></li>
			<li></li>
		</ol>
		
	</div>				
	
</div>

Published in Packages

Saturday, 07 May 2016 19:13

Find Us

This is a Google Map and Contact Block that can be added to your homepage. It is fully responsive and is a great filler.

Find Us

Address: 198 Example street, Suite 7s new York, NY 10013
Phone: 112 345 6798
Email: example@email.com

CSS

/*--- Find Us ---*/

.find-us {
	background: #fff;
	padding: 20px;
}

.find-us .map-wrapper {
	display: inline-block;
	width: 45%;
	border: 1px solid #e5e5e5;
	padding: 10px;
	background: #fff;	
}

.find-us .info-wrapper {
	display: inline-block;
	width: 45%;
	padding: 10px;
	vertical-align: top;
}

.find-us h2 {
	font-size: 33px;	
}

.find-us .fu-list {
	margin: 30px 0 0;	
}

.find-us .fu-list li {
	clear: both;
	margin: 15px 0 0;	
	padding-bottom: 0;
	list-style-type: none;
	list-style-position: outside;
}

.find-us .fu-icon-wrapper {
	width: 20px;
	height: auto;
	line-height: 24px;
	margin: 1px 10px 0 0;	
	z-index: 9;
	text-align: center; /* evens all the icons up */
	float: left;
}

.find-us .fu-icon-wrapper i[class*="fa"] {
	font-size: 18px;
	display: block !important; /* template_pro.css line 653 disables/sets this to none */
	color: #000;
}

.find-us .fu-content {
	overflow: hidden; /* this prevents the text flowing under the icon */
}

.find-us .fu-content p {
	padding: 0;
	margin: 0;
}

@media screen and (max-width: 768px) {
	.find-us .map-wrapper {
		width: 100%;		
	}

	.find-us .info-wrapper {
		width: 100%;
	}
}

HTML

<div class="find-us">	

	<div class="map-wrapper">{load--module mod_bt_googlemaps,Us On The Map - Find Us}</div>
	
	<div class="info-wrapper">
	
		<h2>Find Us</h2>
		
		<ul class="fu-list">			
			<li>		
				<div class="fu-icon-wrapper"><i class="fa fa-map-marker"></i></div>			
				<div class="fu-content"><p>Address: 198 Example street, Suite 7s new York, NY 10013</p></div>			
			</li>				
			<li>		
				<div class="fu-icon-wrapper"><i class="fa fa-mobile"></i></div>			
				<div class="fu-content"><p>Phone: 112 345 6798</p></div>			
			</li>				
			<li>		
				<div class="fu-icon-wrapper"><i class="fa fa-envelope"></i></div>			
				<div class="fu-content"><p>Email:&nbsp;<a href="mailto:example@email.com">example@email.com</a></p></div>			
			</li>				
		</ul>
	</div>

</div>

<div style="clear: both;">&nbsp;</div>

Notes

This is based on a module from JSN Dona Template
remove the -- from load--module to correct the code

Google Map

You need to install and use a google map plugin. I have used the BT Google Maps plugin.
Yes I have used an image in the demo because I did not want to install a plugin for 1 wiki article.

Adding the Google Map via a plugin

Option 1

remember that the module must be published on the page you want to load it on.
you should not assign a module position
so you are best to copy the Us on the Map Module to use for the hompage only call it (copy it when you have finished the module)
dont forget to enable parse content
loadmodule does not like () in the module name
you can use the new joomla module button, but it will only load in articles

Option 2

you can remove the .map-wrapper and just load the map in an appropriate mopdule posistion instead

Option 3

Manually add google map code within .map-wrapper, this might get removed when saving via a WYSIWYG

Published in Packages

Saturday, 07 May 2016 18:58

Contact Bar

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.

NEED ADVICE on your business growth, customer experience or your finances?

Contact Now

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>

Published in Packages

Saturday, 07 May 2016 16:17

Header Canopy

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%

Published in Styled Elements

Saturday, 07 May 2016 15:31

Hamburger Hover

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.

Published in Packages

Saturday, 07 May 2016 15:05

Great Experience

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

showcase

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.

Published in Packages

Items filtered by date: December 2015

Position - Two Embedded Inline Modules with a Large Border

Display and Icon Font

Our Services

Financial service

Strategic Marketing

Customer analytics

Our Partners

Our partners

Happy Customers

Happy Customers

Find Us

Find Us

Notes

Contact Bar

Header Canopy

Notes

Hamburger Hover

Need cool template?

Easy to Start

Care about support?

Notes

Great Experience

Great Docs & Support

Free Edition

FRO Edition

Notes

Legal

Resources

QuantumWarp

Follow Us