Preparing your stylesheet

As Jahia uses the Sencha GWT framework to generate its GUI in Edit and Studio modes, and as this framework imposes its own styles, stylesheets must be prepared to avoid any conflicts that would lead to bad page rendering. Of course all of this is only required if you need to be compatible with Edit and Studio mode. In Live mode there is no such limitations and you may do whatever you want. It is also possible to reference different stylesheets depending on the Jahia mode, so this might be useful to get around limitations, as in the example of company imposed stylesheets for example.

To do that, Jahia requires that you protect your styles by prefixing them. In the template sets provided with Jahia, we use a DIV class named bodywrapper (<div class=bodywrapper>). This tag is inserted just after the <body> tag and then surrounds all the content of the pages. An alternative is to put the class bodywrapper directly on the <body> tag.

Thanks to CSS inheritance mechanism it is easy to prefix all your classes with .bodywrapper to protect your own styles so they won’t conflict with Jahia’s edit mode styles. The name of the protecting class is free, but we advise you to use the same one as ours to ensure maximum compatibility with further versions of Jahia, optional modules and JahiApps such as the Forum, Blog or Wiki that already certainly use that class name. If you choose another class name than bodywrapper and want to use a Jahiapp you’ll be required to modify the JahiApp sources before deploying it in your site.

HTML source code before protection

	<html>
	<head>…</head>
	<body><
	<div id=”myStyle1”><h1>Titme</h1>
	some content <span=”myStyle2”>content</span>
	<p>Some content</p>
	<img src=”path” class=”myimageClass”>
	</div>
	</body>
	</html>

CSS stylesheet before protection

	body {
	background-color:#fff !important;
	}
	H1 {
	color:#666;
	}
	#myStyle1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#0066ff;
	font-size:1.4em;
	font-style:italic;
	line-height:1.6em;
	padding-bottom:1em;
	}
	.myStyle2 {
	color:#666;
	padding:2px ;
	font-size:100%
	}

HTML code after protection

	<html>
	<head>…</head>
	<body>
	<div class=”bodywrapper”>
	<div id=”myStyle1”><h1>Titme</h1>
	some content <span=”myStyle2”>content</span>
	<p>Some content</p>
	<img src=”path” class=”myimageClass”>
	</div>
	</div>
	</body>
	</html>

CSS code after protection

	body {
	background-color:#fff !important;
	}
	.bodywrapper H1 {
	color:#666;
	}
	.bodywrapper #myStyle1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#0066ff;
	font-size:1.4em;
	font-style:italic;
	line-height:1.6em;
	padding-bottom:1em;
	}
	.bodywrapper.myStyle2 {
	color:#666;
	padding:2px ;
	font-size:100%
	}

As you can see, there is no need to change anything in your HTML source once the bodywrapper div has been added. In order to work faster and verify that everything is correct before mounting the templates, we suggest that you do those operations first in your static HTML mockups. Once the prefixing is finished and the rendering is looking good, it will be easier to continue.