Items filtered by date: December 2015
Set a global black background but override it for some pages
Set a black background with a gold border for all devices and then have an inline css code to overide it for some pages.
I used this for a client's project using the Nuru template so it might need a bit of work for other templates.
This tecnique can be used for variations to get the desired effect.
Solution
add the following code to your custom.css or template css file.
/* main page styling - add black background and gold border */
#jsn-mainbody {
padding: 10px 10px;
background-color: black;
border: 1px solid #DBB054;
}
On the our team page (selected page) I have used inline css to remove the black background and gold border because i do not want it there. I used the following code below as inline css.
/* inline css to remove the black background and gold border */
#jsn-mainbody {
padding: 0px;
border: none;
background-color: transparent;
}
Get rid of black/white box that appears when the display is mobile
When you make the window small the code above does not work so i added this code in to my custom.css
/* get rid of black/white box that appears when the display is mobile */
@media only screen and (max-width: 960px) {
#jsn-content #jsn-maincontent {
background-color: black;
border: 1px solid #DBB054;
}
}
and now i added the following code inline
#jsn-mainbody {
padding: 0px;
border: none;
background-color: transparent;
}
@media only screen and (max-width: 960px) {
#jsn-content #jsn-maincontent {
background-color: transparent;
border: none;
}
}
The border dissapears, but the black background goes white, (the original colour).
Remove background for any device below 960px - not sure if this is realted to the above code
The mobile styling seems to be called separately and so i cannot overide it.
/* remove background for any device below 960px - not sure if this is realted to the above code */
@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;
}
}
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%;
}
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
- http://www.joomlashine.com/forum/82-jsn-blank/139355-change-jce-editor-font-and-background-colour#153751
- This can also be caused by a javascript/css compression issue, see my wiki for a solution.
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
- loading the menu in to a custom html module with modules anywhere
- surrounding the {modules anywhere} tag in a <div>
- I then centered the <div>'s content with CSS.
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>
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;
}
}
J51 Templates
J51 Resonate
/* Adds a space between modules */
.sidecol_block .module, .sidecol_block .module_menu {
margin-bottom: 5px;
}
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:
- Go to Component -> Banners -> Categories then create a new Category and name 'Category Background' .
- 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
- Go Module manager then create a new module with 'Banner type'. http://take.ms/gxzAn
- Set the module in 'background' position . http://take.ms/CZyiv .
- Look at option named 'Category' and select 'Category Background' . http://take.ms/CZyiv .
- 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.
- Place background image in 'templates/jsn_solid_pro/images/backgrounds' folder .
- Open the lancastrian.css file in 'templates/jsn_solid_pro/css' folder .
- 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);
}
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.
HTML
<div style="margin: 10px;"><img style="float: left;" src="/images/kb/2016/719/demo-logo-450px.png" alt="" /></div> <div style="float: right; text-align: center; margin: 10px;"> <span style="font-size: 18pt; color: #ffffff;">Call for a free quote today</span><br /> <span style="font-size: 18pt; color: #ffffff;"><strong><a href="tel:07747 123456">07747 123456</a></strong></span> </div>
Header 2 - Danson Style
Logo on the left, large phone number on the right and then when the window is made smaller (goes mobile) the phone number is made smaller and goes underneath the logo.
CSS
/* Header Blurb CSS to allow for large phone number and logo to be responsive */
@media screen and (max-width: 899px) {
.header-large-phone-number {display: none;}
}
@media screen and (min-width: 900px) {
.header-small-phone-number {display: none;}
.header-large-phone-number {
width: 500px;
height: 100px;
line-height: 100px;
margin-left: 100px;
}
.header-large-phone-number span strong{
vertical-align: middle;
font-size: 32pt;
}
}
HTML
<div id="header-logo" style="float: left; margin: 5px;"> <div><span style="font-size: 36pt; color: #162156;"><strong>My Demo Company</strong></span></div> <div style="width: 100%; background-color: #162156;"><span style="font-size: 14pt; color: #ffffff; padding: 5px;"><strong> IT Consultants Ltd.</strong></span></div> <div class="header-small-phone-number" style="text-align: center;"><span style="font-size: 14pt; color: #162156;"><strong>Tel: 07747 123456</strong></span></div> </div> <div style="float: left;"> <div class="header-large-phone-number"><span style="color: #162156;"><strong>Tel: 07747 123456</strong></span></div> </div>
Header 3 - Barnett Style
This header is comprised of both a desktop and mobile version. The cross over width is 1151px/1152px. The logo is centered with association logos either side which are moved to below the logo when in the mobile view.
CSS
/* Header Control */
@media only screen and (min-width: 1152px) {
.header-display-mobile {
display: none;
}
}
@media only screen and (max-width: 1151px) {
.header-display-desktop{
display: none;
}
}
HTML
<!-- Desktop Version --> <div class="header-display-desktop"> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/cycles_time_128.png" alt="cycles time 128" style="margin: 10px; float: left;" /></a> <div style="width: 60%; text-align: center; display: inline-block;"><img src="/images/kb/2016/719/demo-logo-450px.png" alt="demo logo 450px" style="margin: 10px;" /></div> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/quality_128.png" alt="quality 128" style="margin: 10px; float: right;" /></a> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/administrator_128.png" alt="administrator 128" style="margin: 10px; float: right;" /></a> </div> <!-- Mobile and Tablet Version --> <div class="header-display-mobile"> <div style="text-align: center;"><img src="/images/kb/2016/719/demo-logo-450px.png" alt="demo logo 450px" /></div> <div style="text-align: center;"><img src="/images/kb/2016/719/cycles_time_128.png" alt="cycles time 128" style="margin: 10px;" /> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/administrator_128.png" alt="administrator 128" style="margin: 10px;" /></a> <a href="http://quantumwarp.com/"><img src="/images/kb/2016/719/quality_128.png" alt="quality 128" style="margin: 10px;" /></a> </div> </div>
Header 4 - IVR Style
This header is very simple and comes in 2 formats, with and without Tap To Call. It has a desktop version which when gets to squashed changes into a single column at 640px. A very elegant header and can be used for many things.
This works better when in the header because it is sized for that but you can definately see how it works.dddddd
With Tap To Call
CSS
/** Standard Logo Header Block **/
/* remove large gap above and below - when you have seperated menu and logo */
#jsn-logo a {
margin-top: 10px;
margin-bottom: 0;
}
/* make the header sections responsive so they look nice */
@media screen and (max-width: 640px) {
#lancastrian-header-left{
float: none !important;
text-align: center;
}
#lancastrian-header-right{
float: none !important;
text-align: center;
}
}
/* Tap To Call */
@media only screen and (max-width: 959px) {
.tap-to-call-desktop {
display: none;
}
}
@media only screen and (min-width: 960px) {
.tap-to-call-cellphone {
display: none;
}
}
HTML
<div id="lancastrian-header-left" style="float: left; margin: 10px;">
<img src="/images/common/logo-200px.jpg" alt="logo 200px" />
</div>
<div id="lancastrian-header-right" style="float: right; margin: 10px; text-align: center;">
<span style="font-size: 18pt;">Call for a free quote today</span><br />
<div class="tap-to-call-cellphone">
<div style="text-align: center;"><a href="tel:01234 567890">
<img src="/images/modules/tap-to-call/tap-to-call.png" alt="Call us" /></a>
</div>
</div>
<span style="font-size: 18pt; color: #630033;"><strong>01234 567890</strong><br />
<a href="mailto:no-reply@quantumwarp.com">no-reply@quantumwarp.com</a></span>
</div>
Without Tap To Call
CSS
/** Standard Logo Header Block **/
/* remove large gap above and below - when you have seperated menu and logo */
#jsn-logo a {
margin-top: 10px;
margin-bottom: 0;
}
/* make the header sections responsive so they look nice */
@media screen and (max-width: 640px) {
#lancastrian-header-left{
float: none !important;
text-align: center;
}
#lancastrian-header-right{
float: none !important;
text-align: center;
}
}
HTML
<div id="lancastrian-header-left" style="float: left; margin: 10px;">
<img src="/images/common/logo-200px.jpg" alt="logo 200px" />
</div>
<div id="lancastrian-header-right" style="float: right; margin: 10px; text-align: center;">
<span style="font-size: 18pt;">Call for a free quote today</span><br />
<span style="font-size: 18pt; color: #630033;"><strong>01234 567890</strong><br />
<a href="mailto:no-reply@quantumwarp.com">no-reply@quantumwarp.com</a></span>
</div>
Custom 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