Items filtered by date: December 2014

/* Correct large footer padding */
#jsn-footer {
    padding: 0 0 10px 0;
}

/* Add white background and rounded corners to the header and footer */
#jsn-header, #jsn-footer {
	border-radius: 5px;
	-webkit-border-radius:5px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.20);
	background: white;
	margin-top: 10px;
	margin-bottom: 10px;
}
#jsn-footer {
	margin-top: 0;
}

/* this pushes the phone number and social down  */
#jsn-headerright {
    padding: 30px 0 0 0;
}

/* Move Telephone number up - compensate for the jsn-headerright padding and leave social icons alon */
.reverse-header-padding {
    margin-top: -15px !important;
}

/* nice info box with shadow */
.info-block {
	border-radius: 5px;
	-webkit-border-radius:5px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
	padding: 10px;
	margin: 10px;
}

/* sobipro fix - makes pagination buttons appear together */
.SobiPro .pagination ul > li > a, .SobiPro .pagination ul > li > span {
	margin: 0 !important;
}

/* Make Background White */
#jsn-master {background-color: white;}

/* makes mainbody background (on homepage) white */
body.jsn-homepage #jsn-mainbody-content {
	background-color: #FFFFFF !important;	
	/*padding: 10px !important;*/
}

/* K2 Fix - Make Listing Background Transparent and not red */
/* jsn_metro_pro/ext/k2/jsn_ext_k2.css - line 401 */
div.itemListCategory {background-color: transparent;}

/* k2 Fix - images going mental */
/* jsn_metro_pro/ext/k2/jsn_ext_k2.css - 309 */
div.itemBody img {	
	float: none;
}

/* K2 fix - add bullet points back in k2 */
#k2Container ul li {
	list-style: disc;
	margin-left: 1.6em;
}

Where is the color sequence controlled for the main menu list items

/* Metro - where is the color sequence controlled for the main menu list items */

/*Open (joomla-root/templates/jsn_metro_pro/css/colors/white.css)
lines 164 --> 203*/

/*-------- COLOR STYLE -------*/
.menu-mainmenu.menu-iconmenu [class*="icon-"] > a > span {
 opacity:1 !important ;
}
.menu-mainmenu > li {
 background-color: #333 !important;
}
.menu-mainmenu > li:hover {
 background-color: #111 !important;
}
.menu-mainmenu > li:first-child {
 background-color: #009ad7 !important;
}
.menu-mainmenu > li:first-child:hover {
 background-color: #0082b5 !important;
}
.menu-mainmenu > li:first-child + li {
 background-color: #68af27 !important;
}
.menu-mainmenu > li:first-child + li:hover {
 background-color: #4c8c12 !important;
}
.menu-mainmenu > li:first-child + li + li {
 background-color: #d53f26 !important;
}
.menu-mainmenu > li:first-child + li + li:hover {
 background-color: #b72e17 !important;
}
.menu-mainmenu > li:first-child + li + li + li {
 background-color: #673499 !important;
}
.menu-mainmenu > li:first-child + li + li + li:hover {
 background-color: #4b1b7a !important;
}
.menu-mainmenu > li:first-child + li + li + li + li {
 background-color: #ffaa31 !important;
}
.menu-mainmenu > li:first-child + li + li + li + li:hover {
 background-color: #e18d16 !important;
}

Make all Menu Items Grey - Combined Code

/* Make all Menu Items Grey - Combined Code */
.menu-mainmenu.menu-iconmenu [class*="icon-"] > a > span 
{
	opacity:1 !important ;
}

.menu-mainmenu > li,
.menu-mainmenu > li:first-child,
.menu-mainmenu > li:first-child + li,
.menu-mainmenu > li:first-child + li + li,
.menu-mainmenu > li:first-child + li + li + li,
.menu-mainmenu > li:first-child + li + li + li + li 
{
	background-color: #333 !important;
}

.menu-mainmenu > li:hover,
.menu-mainmenu > li:first-child:hover,
.menu-mainmenu > li:first-child + li:hover,
.menu-mainmenu > li:first-child + li + li:hover,
.menu-mainmenu > li:first-child + li + li + li:hover,
.menu-mainmenu > li:first-child + li + li + li + li:hover 
{
	background-color: #111 !important;
}

Menu module is not blue

i have set a menu item up with the following:

• module name: menu
• position: innerleft
• start level: 1
• end level:
• menu class suffix: menu-sidemenu
• module class suffix: _menu box-2 box-blue

But the menu is not displaying in the correct colours. It looks fine in either left or right.

My Solution

The following fixes the issue but i do not know if this is the best way. please check.

in my lancastrian.css add:

/* Bug Fix - Menu Module not displaying in blue */
div.box-blue.jsn-modulecontainer div.jsn-modulecontainer_inner ul.menu-sidemenu li{
	background-color: #006DBC;
}

• You should change the module class suffix from _menu box-2 box-blue to box-2 box-blue (ie. remove _menu).
• Removing _menu did not work

Joomlashine Solution

To fix this, there are 2 solutions.

1. Add these lines to lancastrian.css

/* Bug Fix - Menu Module not displaying in blue */
div.jsn-modulecontainer.box-blue[class*="box-"] .jsn-modulecontainer_inner {
	background: #006DBC;
}

2.  Better solution. Open template.css and search for:

#jsn-mainbody-content div.jsn-modulecontainer div.jsn-modulecontainer_inner,
#jsn-usermodules1 div.jsn-modulecontainer div.jsn-modulecontainer_inner,
#jsn-usermodules2 div.jsn-modulecontainer div.jsn-modulecontainer_inner {
	background: none;
	border: none;
}

and replace it with

#jsn-usermodules1 div.jsn-modulecontainer div.jsn-modulecontainer_inner,
#jsn-usermodules2 div.jsn-modulecontainer div.jsn-modulecontainer_inner {
	background: none repeat scroll 0 0 transparent;
	border: medium none;
}

Module with blue richbox color

For a module if i use richbox-1 module suffix, the color is grey, if i use richbox-2 suffix, the colour is green. How can i make a module blue etc?

Use  box-2 box-blue for suffix

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