Entire Page Individual Styling

Written by JoomlaEZ admin. Published on Wednesday, 10 June 2009 08:21 Last updated on Wednesday, 10 June 2009 08:59

With JEZ Thema, you can create individual styling for entire page, not just the component output, using Page Class Suffix defined for individual menu item.

Please follow links in the left column to see demo.

As you can see, all menu items in the left pointing to just same page but applying difference Page Class Suffix. For each Page Class Suffix applied, the entire page layout is changed.

To create individual styling for each Page Class Suffix, all you need to do is prefixing CSS selector(s) with body.individual-page-class-suffix . See example below for details:

/* 2 equal width columns layout */
body.two-equal-width .gr2 #jezMain {
	margin-left: 41em;
	width: 39em;
}
body.two-equal-width .gr2 #jezLocal {
	width: 39em;
}

/* swap position of 2 columns layout */
body.swap-position .gr2 #jezMain {
	margin-left: 0;
}
body.swap-position .gr2 #jezLocal {
	float: right;
}