Items filtered by date: December 2015

Menu

/* footer div menu fix */
ul.menu-divmenu {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
ul.menu-divmenu li {
    display: inline-block;
}

/* footer div menu fix */
ul.menu-divmenu {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
ul.menu-divmenu li {
    display: inline-block;
}

/* fixes footer menu getting the word 'menu' getting attached */
.jsn-menu-mobile-control, ul.menu-topmenu .jsn-menu-mobile-control {
	display: none !important;
}

Slider

/* remove gap under slider - on homepage - if needed */
.jsn-homepage #jsn-promo-inner {
	background-repeat: repeat-x;
	background-position: left bottom;
	height: auto;
	padding-bottom: 10px;
    z-index: 100; 
}

/* frame-1a with frame-correction in content-top jsn_vintage */

/* Double Grey Border and 3D Shadow */
.frame-1a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0;
    border-color: #c9cbcd;
    border-image: none;
    border-radius: 0;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: 0 8px 6px -6px black;
    display: inline-block;
    outline: medium none;
    padding: 4px;
    transition: all 300ms ease-out 0s;
}
/* main slider correction - add this to the slider module class suffix  */
.frame-correction {padding-top: 10px;}

General

/* add padding to blog images */
.jsn-layout-blog .pull-left.item-image img  {
	padding: 20px;
}

/* fix squashed article contents */
.article-contents {
	display: inherit;
}

Header

/* Remove Header background image */
#header-inner{background: none;}

/* Disable the world image in header */
#header-inner {background-image: none;}

/* Remove logo white background */
#jsn-logo {background-color: transparent;}

/* Remove topbar padding and margins */ 
#jsn-topheader-inner {padding-top: 0;}

/* reduce gap between logo and menu */
#jsn-topheader {margin-bottom: 0;}

Menu

/* create a 100% wide menu background */
#jsn-body{
	border-top: 51px solid #222222;
	margin-top: -51px;
}

If you you need to make the menu taller just increase both 51px.

/* remove line/border below menu  */
#jsn-body {
    border-top: none;
}

/* Make Main Menu Grey */
#jsn-menu {
    background-color: #EFEFEF;  /*#EFEFEF  this is very common*/
    box-shadow: none;
}

Bug Fixes

/*  Bug Fix - Content goes of the side - I think that is what this fixes  */
@media only screen and (min-width: 481px) and (max-width: 768px), (min-device-width: 481px) and (max-device-width: 768px) and (orientation:portrait) {
	#header-inner{
	width: inherit !important;
	margin: 0 auto;
	}
}

module responsive suffix do not work

Please check the file template_pro.css at line 30:

#jsn-page
	transition: width 0.3s ease-in-out;
	-moz-transition: width 0.3s ease-in-out;
	-webkit-transition: width 0.3s ease-in-out;
}

The code is missing a "{" after #jsn-page that makes the code incorrect, so all the css after this point is not parsed.

The correct code:

#jsn-page {
	transition: width 0.3s ease-in-out;
	-moz-transition: width 0.3s ease-in-out;
	-webkit-transition: width 0.3s ease-in-out;
}

Then all the class suffix will work fine.

Right hand side is cut off - responsive failed (not all verified as there seems to be 2 soluitions)

The issue has been fixed by changing some css 'css/layouts/jsn_mobile.css' at line 20:

#jsn-pos-topbar,
#jsn-topheader-inner,
#header-inner,
#jsn-header-inner,
#jsn-pos-promo-full,
#jsn-promo-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-below,
#jsn-content,
#jsn-content-bottom-inner,
#jsn-usermodules3-inner,
#jsn-content-bottom-mid-inner,
#jsn-content-bottom-below-inner,
#jsn-footer-inner {
	width: 100%; /* change from width: 1170px; */
	min-width: inherit;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

'css/layouts/jsn_mobile.css' at line 783:

#jsn-pos-promo {
	margin: 0;   /* change from margin: 0 20px; */
}

the issue is not fixed. The template changer, the right column and and main content area get cut off. Just like before

In templates/jsn_time_pro/css/layouts/jsn_mobile.css line 34

width: 1170px changed to width: 100%;

In 'templates/jsn_time_pro/css/template.css' line 239, add this code:

@media only screen and (max-width: 1199px), (max-device-width: 1199px) {
	#jsn-pos-topbar,
	#jsn-topheader-inner,
	#header-inner,
	#jsn-pos-promo-full,
	#jsn-promo-inner,
	#jsn-pos-content-top,
	#jsn-pos-content-top-below,
	#jsn-content,
	#jsn-content-bottom-inner,
	#jsn-usermodules3-inner,
	#jsn-content-bottom-mid-inner,
	#jsn-content-bottom-below-inner,
	#jsn-footer-inner {
		width: 100%;
	}
}

cannot change font size in template config

remove the following from the tempalte.css

.article-contents{
	font-size: 14px;
}

/* Fix Contact Form going off screen to the left in tablet*/
#jsn-maincontent.span12 #jsn-pos-innerright > div {
  padding-left: 0px;
  margin-left: 10px;
}

/* correct white space on the left of the header */
#jsn-header {
    padding: 0px 0px;
}

/* fix footer menu not <li> not going inline when using main menu items */

/*
ul.menu-divmenu li {
float: left !important;
}
*/

ul.menu-divmenu {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
ul.menu-divmenu li {
	display: inline-block;
}

/* 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 header black */
#jsn-headerright-inner {background: black;}

/* Reduce border to inner only */
#jsn-header_inner {border: none;}
#jsn-header_inner2 {border-bottom: 1px solid #DDD;}

/* make content background white */
#jsn-content, #jsn-header_inner2 {background: white;}

/* remove gap between content and footer */
#jsn-footer {padding: 0px 0px 10px;}

/* make footer black */
#jsn-footer_inner {background: #111111;}

/* add padding to the content as it is on the edge */
#jsn-mainbody { padding-left: 10px; padding-right: 10px;}

/* enable frontend edit button */
div.jsn-article-toolbar {
	display: block;
}

Responsive Code

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

/* make all backgrounds yellow */
body,
#jsn-header,
#jsn-content,
#jsn-content #jsn-maincontent,
#jsn-content #jsn-leftsidecontent,
#jsn-content #jsn-rightsidecontent {
    background-color: #FFFFCA;
}