Items filtered by date: December 2015

Changing the font size does not work

Please go to jsn-glamo/css/template.css at line 285, and change from:

#jsn-page {
  color: #555;
  width: 100%;
  font-size: 13px;
  overflow: hidden;
}

to:

#jsn-page {
  color: #555;
  width: 100%;
  overflow: hidden;
}

Bullets not displaying by default

JSN-staff: This no bullet is Template design, not a bug of JSN Glamo, but if you want to have this in your site, please add my css below to custom.css ( in templates/jsn-glamo/css ) :

ul li {
	list-style: inherit !important;
	margin: 0.3em 0 0.3em 1.6em !important;
}

My Notes

This is a stupid thing to disable bullet points in a template. who does that? what is the point? it is just the same as using a <br />. The bullet points have been disabled by CSS code in the template.css (line 136)

/* =============== DEFAULT HTML - LIST STYLES =============== */
ul li {
	padding: 0;
	list-style: none;
}
ol li {
	padding: 0;
	margin: 0.3em 0 0.3em 2em;
}

This needs to be changed because it screws up using bullet points but also the WYSIWYG. Please turn on bullet points for later version of Glamo

To Fix this
in template.css Rem out this code block starting at line 136 (this allows the bullets to be shown)

/* =============== DEFAULT HTML - LIST STYLES =============== */
ul li {
	padding: 0;
	list-style: none;
}
ol li {
	padding: 0;
	margin: 0.3em 0 0.3em 2em;
}

and remove ol and ul from the code block starting line 18 in template.css (this corrects the margins)

/* =============== DEFAULT HTML - TEXT STYLES =============== */
p, pre, blockquote, form, dl, ul, ol, fieldset, address, table {
	padding: 0;
	margin: 10px 0;
}

/* Header Has a Fixed header colour set in template.css line 279*/
.jsn-color-blue #jsn-header-inner {
    background: #114C98;
}

/* Module Coloring is set in template.css 1218 */ 
.jsn-color-blue div.richbox-1 h3.jsn-moduletitle,
.jsn-color-blue div.richbox-2 h3.jsn-moduletitle{
	border-left: 2px solid #114C98;
}

/* remove massive gap between header/slider and slider/promo */
#jsn-content,
body.jsn-homepage #jsn-content {
    padding-top: 10px;
    margin-bottom: 10px;
}

#jsn-promo,
body.jsn-homepage #jsn-promo {
    padding: 10px 0 0px;
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	body.jsn-homepage #jsn-promo {
	padding: 10px 0 10px !important;
	}
	body.jsn-homepage #jsn-content {
		padding-top: 10px !important;
		margin-bottom: 10px !important;
	}
}

Bugs

Right column getting cropped (not verified)

JSN Ferado template 1.0.3 sets width on desktop displays to 1170px. Other JSN templates set width to 960px. I think that is why the page is wider than the window for widths 960px to 1200px.

In template.css find the following code and change width: 1170px; to width: 960px;

#jsn-pos-topbar,
#jsn-topheader-inner,
#jsn-header-inner,
#jsn-promo-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-below,
#jsn-pos-content-top-overbelow,
#jsn-content,
#jsn-content-bottom-inner,
#jsn-content-bottom-over-inner,
#jsn-content-bottom-overbelow-inner,
#jsn-usermodules3-inner,
#jsn-content-bottom-mid-inner,
#jsn-content-bottom-below-inner,
#jsn-footer-inner {
	margin: 0 auto;
	width: 1170px;
}

/* Bug Fix - disable cross being display in div menu */
.menu-divmenu .close-menu {display: none;}

/*-- Allow Large Logo (Menu Bar Fix) - (normal logo 122 x 50 - tested OK for 215 x 75) --*/

/* Reduce logo margin to 5px */
#jsn-logo a {margin: 5px 0;}

@media only screen and (min-width: 960px) {
	
	/* Change header inner-wrapper width and thus the available size for the menu and logo */
	#jsn-header-inner {			
		/*width: 960px;*/
	}

	/* Make menu items slimmer */
	div.jsn-modulecontainer ul.menu-mainmenu.menu-richmenu > li > a {
		padding: 10px 10px;
	}

	/* Make logo container smaller */	
	#jsn-logo a {	
		max-width: 165px;
	}
}

@media only screen and (min-width: 1200px) {

	/* restore original menu item padding*/
	div.jsn-modulecontainer ul.menu-mainmenu.menu-richmenu > li > a {
		padding: 10px 20px;
	}

	/* restore original logo size */	
	#jsn-logo a {	
		max-width: none;
	}
}

This code is not tested.

/* Logo Fix allow logo larger than recommended 122 x 50 */
/* template.css 281 */
#jsn-logo a {
	line-height: 100%;
	margin: 25px 0;
	display: block;
}

/* Set Maximum Width - Stops the ever expanding template giving a smaller promo image*/
#jsn-pos-topbar,
#jsn-topheader-inner,
#jsn-header-inner,
#jsn-promo-inner,
#jsn-promo-full-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-over,
#jsn-pos-content-top-below,
#jsn-content_inner,
#jsn-content-bottom-over-inner,
#jsn-content-bottom-inner,
#jsn-content-bottom-below-inner,
#jsn-content-bottom-under-inner,
#jsn-usermodules3-inner,
#jsn-footer-inner {		
	max-width: 1200px;
}

/* Telephone numbers fix */
@media screen and (max-width: 400px){ 
    .small-telephone-numbers{font-size: 18pt !important;} 
}

Template Width (unknown)

This is a Template width set of rules, I am not use how I exactly used it. But it is applied on Hi-Tec

/* Add 100% wide to only the home page */
body.jsn-homepage #jsn-promo-inner,
body.jsn-2st-homepage #jsn-promo-inner,
body.jsn-3st-education #jsn-promo-inner,
body.jsn-6st-religion #jsn-promo-inner {
    width: 100%;
}

/* and this to remove padding/border */	
 body.jsn-homepage #jsn-promo,
 body.jsn-2st-homepage #jsn-promo,
 body.jsn-3st-education #jsn-promo,
 body.jsn-4st-homepage #jsn-promo,
 body.jsn-6st-religion #jsn-promo {
    padding: 0;
}

/* you could just delete the rule out of custom.css */
/* width fix on homepage */
body.jsn-homepage #jsn-promo-inner {width: 100%;} /* pos max-width */

Sets the site at fixed width 960px until screen is 1280px

This might not be needed

/* template.css 197  sets the site at fixed width 960px until screen = 1280+px */
#jsn-pos-topbar,
#jsn-topheader-inner,
#jsn-promo-full-inner,
#jsn-header-inner,
#jsn-promo-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-over,
#jsn-pos-content-top-below,
#jsn-content_inner,
#jsn-content-bottom-over-inner,
#jsn-content-bottom-inner,
#jsn-content-bottom-below-inner,
#jsn-content-bottom-under-inner,
#jsn-usermodules3-inner,
#jsn-footer-inner {
	margin: 0 auto;
	width: 960px;
	position: relative;
}


/* the logo and menu are controlled by the overall fixed width of the template */
@media only screen and (min-width: 1200px) {
	#jsn-pos-topbar,
	#jsn-topheader-inner,
	#jsn-header-inner,
	#jsn-promo-inner,
	#jsn-promo-full-inner,
	#jsn-pos-content-top,
	#jsn-pos-content-top-over,
	#jsn-pos-content-top-below,
	#jsn-content_inner,
	#jsn-content-bottom-over-inner,
	#jsn-content-bottom-inner,
	#jsn-content-bottom-below-inner,
	#jsn-content-bottom-under-inner,
	#jsn-usermodules3-inner,
	#jsn-footer-inner {
		width: 1140px;
	}
}

 @media only screen and (max-width: 960px), (max-device-width: 960px) {	
 	#jsn-pos-topbar,
 	#jsn-topheader-inner,
 	#jsn-header-inner,
 	#jsn-promo-inner,
 	#jsn-promo-full-inner,
 	#jsn-pos-content-top,
 	#jsn-pos-content-top-over,
	#jsn-pos-content-top-below,
 	#jsn-content_inner,
 	#jsn-content-bottom-over-inner,
 	#jsn-content-bottom-inner,
 	#jsn-content-bottom-below-inner,
 	#jsn-content-bottom-under-inner,
 	#jsn-usermodules3-inner,
 	#jsn-footer-inner {
 		width: 100%;
 		min-width: inherit;
 		box-sizing: border-box;
 		-moz-box-sizing: border-box;
 		-webkit-box-sizing: border-box;
 	}
 }
	
	
/* needed to fix logo position after previous rules */
/*@media only screen and (max-width: 960px), (max-device-width: 960px) {
 	#jsn-header-inner {
 		width: 100%;
 	}
}*/


/* the logo and menu are controlled by the overall fixed width of the template */
/*@media only screen and (min-width: 1200px) {
	#jsn-header-inner {
		width: 1140px;
	}
}*/

Notes

• width code - dona forces changes in the width code - change over is at 960px
• 1211  /  from wide to narrow
• 976 / 976 is the firefox change over from desktop to mobile

Single Column in desktop mode - max width 1100px

This turns dona into a single column (or pretends) all with white background and is fixed for mobile aswell

/*--- Single Column in desktop mode - max width 1100px ---*/

/* make all inner blocks have a white background for all viewports */
/*#jsn-pos-topbar,
#jsn-topheader-inner,
#jsn-header-inner,*/
#jsn-promo-inner,
#jsn-promo-full-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-over,
#jsn-pos-content-top-below,
#jsn-content_inner,
#jsn-content-bottom-over-inner,
#jsn-content-bottom-inner,
#jsn-content-bottom-below-inner,
#jsn-content-bottom-under-inner,
#jsn-usermodules3-inner
/*#jsn-footer-inner*/ {
    background: #ffffff; /* make all inner blocks have a white background for all viewports */
}
    
@media only screen and (min-width: 960px) {
	
	/* Set Maximum Width - Stops the ever expanding template so displays smaller promo image */
	#jsn-pos-topbar,
	#jsn-topheader-inner,
	#jsn-header-inner,
	#jsn-promo-inner,
	#jsn-promo-full-inner,
	#jsn-pos-content-top,
	#jsn-pos-content-top-over,
	#jsn-pos-content-top-below,
	#jsn-content_inner,
	#jsn-content-bottom-over-inner,
	#jsn-content-bottom-inner,
	#jsn-content-bottom-below-inner,
	#jsn-content-bottom-under-inner,
	#jsn-usermodules3-inner,
	#jsn-footer-inner {
		width: 100%; /* expands the various regions to match the column size */
		max-width: 1100px; /* this exactly matches the max centre column width - this might not be complete */
	}

	/* Menu Background Fix - set background to be within the new column */
	#jsn-header {
		background-color: transparent;
		border-bottom: none;
	}
	#jsn-header-inner {
		background-color: #1e232d;
	}

	/* Footer Background Fix - set background to be within the new column */
	#jsn-footer {
		padding: 0;
		background: transparent;	
	}
	#jsn-footer-inner {
		background: #171c26;
		padding: 20px;
	}

}

Remove all gaps between modules

/*-- Remove Padding/Margins/Gaps between blocks positions --*/

/* Reduce logo margin to 5px */
#jsn-logo a {margin: 10px 0;}

/* no gap above promo - possibly add to imageshow, it is not in the wiki */
#jsn-promo div.jsn-modulecontainer {
	margin-top: 0px;
}
#jsn-promo {
	padding: 0;
}

/* remove gap between the main content block (inc module positions) - Top and Bottom */
#jsn-content {padding: 0;}

/* content bottom over styling -- remove Padding/Margins/Gaps */
#jsn-content-bottom-over,
#jsn-pos-content-bottom-over.jsn-modulescontainer {
	padding: 0;
}
#jsn-pos-content-bottom-over div.jsn-modulecontainer {
	margin-top: 0;
}

/* jsn-content-bottom-below - remove grey bar placeholder caused by padding*/
#jsn-content-bottom-below,
.jsn-homepage #jsn-content-bottom-below {
	padding: 0;
}