• Home

Items filtered by date: December 2014

Saturday, 13 February 2016 20:01

Embed Custom and Google Fonts

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

Embed Server Based Fonts

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

 

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

 

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

Embed Google Fonts

Inclusion Code

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

  • Standard - Which is used in HTML
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  • @import - Which is used in CSS stylesheets 
    <style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
</style>

Code that is included

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

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

Declaration / Usage

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

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

giving

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

Add to Joomlashine Framework List

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

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

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

Joomlashine Response

If you want to add google font into your template. You can add google font into plugins/system/jsntplframework/Libraries/joomlashine/form/fields/jsnfont.php

protected $google = array(
		'Open Sans',
		'Oswald',
		'Droid Sans',
		'Lato',
		'Open Sans Condensed',
		'PT Sans',
		'Ubuntu',
		'PT Sans Narrow',
		'Yanone Kaffeesatz',
		'Roboto Condensed',
		'Source Sans Pro',
		'Nunito',
		'Francois One',
		'Roboto',
		'Raleway',
		'Arimo',
		'Cuprum',
		'Play',
		'Dosis',
		'Abel',
		'Droid Serif',
		'Arvo',
		'Lora',
		'Rokkitt',
		'PT Serif',
		'Bitter',
		'Merriweather',
		'Vollkorn',
		'Cantata One',
		'Kreon',
		'Josefin Slab',
		'Playfair Display',
		'Bree Serif',
		'Crimson Text',
		'Old Standard TT',
		'Sanchez',
		'Crete Round',
		'Cardo',
		'Noticia Text',
		'Judson',
		'Lobster',
		'Unkempt',
		'Changa One',
		'Special Elite',
		'Chewy',
		'Comfortaa',
		'Boogaloo',
		'Fredoka One',
		'Luckiest Guy',
		'Cherry Cream Soda',
		'Lobster Two',
		'Righteous',
		'Squada One',
		'Black Ops One',
		'Happy Monkey',
		'Passion One',
		'Nova Square',
		'Metamorphous',
		'Poiret One',
		'Bevan',
		'Shadows Into Light',
		'The Girl Next Door',
		'Coming Soon',
		'Dancing Script',
		'Pacifico',
		'Crafty Girls',
		'Calligraffitti',
		'Rock Salt',
		'Amatic SC',
		'Leckerli One',
		'Tangerine',
		'Reenie Beanie',
		'Satisfy',
		'Gloria Hallelujah',
		'Permanent Marker',
		'Covered By Your Grace',
		'Walter Turncoat',
		'Patrick Hand',
		'Schoolbell',
		'Indie Flower'
	);

and plugins/system/jsnframework/assets/joomlashine/js/visualdesignstyle.js

var listFont = {
                    "Open Sans":"Open Sans", "Oswald":"Oswald", "Droid Sans":"Droid Sans", "Lato":"Lato", "Open Sans Condensed":"Open Sans Condensed", "PT Sans":"PT Sans", "Ubuntu":"Ubuntu", "PT Sans Narrow":"PT Sans Narrow",
                    "Yanone Kaffeesatz":"Yanone Kaffeesatz", "Roboto Condensed":"Roboto Condensed", "Source Sans Pro":"Source Sans Pro", "Nunito":"Nunito", "Francois One":"Francois One", "Roboto":"Roboto", "Raleway":"Raleway", "Arimo":"Arimo",
                    "Cuprum":"Cuprum", "Play":"Play", "Dosis":"Dosis", "Abel":"Abel", "Droid Serif":"Droid Serif", "Arvo":"Arvo", "Lora":"Lora", "Rokkitt":"Rokkitt", "PT Serif":"PT Serif", "Bitter":"Bitter", "Merriweather":"Merriweather", "Vollkorn":"Vollkorn",
                    "Cantata One":"Cantata One", "Kreon":"Kreon", "Josefin Slab":"Josefin Slab", "Playfair Display":"Playfair Display", "Bree Serif":"Bree Serif", "Crimson Text":"Crimson Text", "Old Standard TT":"Old Standard TT", "Sanchez":"Sanchez",
                    "Crete Round":"Crete Round", "Cardo":"Cardo", "Noticia Text":"Noticia Text", "Judson":"Judson", "Lobster":"Lobster", "Unkempt":"Unkempt", "Changa One":"Changa One", "Special Elite":"Special Elite",
                    "Chewy":"Chewy", "Comfortaa":"Comfortaa", "Boogaloo":"Boogaloo", "Fredoka One":"Fredoka One", "Luckiest Guy":"Luckiest Guy", "Cherry Cream Soda":"Cherry Cream Soda",
                    "Lobster Two":"Lobster Two", "Righteous":"Righteous", "Squada One":"Squada One", "Black Ops One":"Black Ops One", "Happy Monkey":"Happy Monkey", "Passion One":"Passion One", "Nova Square":"Nova Square", "Metamorphous":"Metamorphous", "Poiret One":"Poiret One", "Bevan":"Bevan", "Shadows Into Light":"Shadows Into Light", "The Girl Next Door":"The Girl Next Door", "Coming Soon":"Coming Soon",
                    "Dancing Script":"Dancing Script", "Pacifico":"Pacifico", "Crafty Girls":"Crafty Girls", "Calligraffitti":"Calligraffitti", "Rock Salt":"Rock Salt", "Amatic SC":"Amatic SC", "Leckerli One":"Leckerli One", "Tangerine":"Tangerine", "Reenie Beanie":"Reenie Beanie", "Satisfy":"Satisfy", "Gloria Hallelujah":"Gloria Hallelujah", "Permanent Marker":"Permanent Marker", "Covered By Your Grace":"Covered By Your Grace", "Walter Turncoat":"Walter Turncoat", "Patrick Hand":"Patrick Hand", "Schoolbell":"Schoolbell", "Indie Flower":"Indie Flower"
                }

Joomlashine Embed Google Fonts Example

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

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

templates/{template name}/css/styles/custom.css
/* Google Custom Font for all of the Site */

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

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

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

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

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

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

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

Other

These are some useful examples I have used.

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

 

Published in Design Elements, Styling, Effects and Code
Read more...
Saturday, 13 February 2016 19:55

JCE Editor - Background to black, and the font to white

I need to change the wysiwyg jce editor background to black, and the font to white.

Joomlashine Solution

.mceContentBody {
	height: 100%;
	min-width: 90%;
	padding: 5px;
	background: black !important; /* Add background here */
	color: white !important; /* Add color here */
}
  • you need to add !important because the background and font are declared later
  • This code also does not affect fonts in a table.

My Solution

  • open the file: 
    components/com_jce/editor/tiny_mce/themes/advanced/skins/default/content.css
  • edit the 2 following statements appropriately.
    body,td,pre{color:#000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;margin:8px;}
	
body{background:#FFF;}

Notes

 

Published in Extensions
Read more...
Saturday, 13 February 2016 19:39

Centering a DIV menu in the footer module position

In JSN_Nuru I have published a menu with the menu-divmenu suffix, this is working fine. However when I publish the menu in to the footer module position it publishes it where it should in the bottom right but right aligned/floated.

I want to center align this menu. Can i do it through the module settings?

Solution

I fixed this by

  1. loading the menu in to a custom html module with modules anywhere
  2. surrounding the {modules anywhere} tag in a <div>
  3. I then centered the <div>'s content with CSS.
Published in Design Elements, Styling, Effects and Code
Read more...
Saturday, 13 February 2016 19:34

Overlapping Joomla Modules

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>

 

Published in Design Elements, Styling, Effects and Code
Read more...
Saturday, 13 February 2016 17:09

Responsive CSS

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

 

 

Published in Joomlashine
Read more...
Saturday, 13 February 2016 15:52

J51 Templates

J51 Resonate

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

 

Published in Design Elements, Styling, Effects and Code
Read more...
Saturday, 13 February 2016 15:38

Background

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

 

Published in Joomlashine
Read more...
Friday, 12 February 2016 14:07

Headers

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.

Tel: 07747 123456

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.

cycles time 128
demo logo 450px
quality 128 administrator 128
demo logo 450px
cycles time 128 administrator 128 quality 128

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

logo 200px
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>

 

Published in Joomlashine
Read more...
Friday, 12 February 2016 13:39

Custom Responsive Display Code Classes for Joomlashine Templates

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
Published in Joomlashine
Read more...
Thursday, 11 February 2016 13:24

JSN-ImageShow

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

Teki Imageshow screenshot

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

One Imageshow screenshot

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.

Promo Intro Text Demo

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.

Promo Intro Text - Improved

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.

Promo Intro Text Improved v2

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>

 

 

Published in JSN Extensions
Read more...
Page 31 of 95