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