Express Individual Module Restyling
Express individual module restyling is a benefit of JEZ Rego PRO edition over the free one. With express individual module restyling feature, you can create individual styling for any module at any position anytime anywhere without the need of defining a module class suffix for the module requiring own style.
See modules at the right column for express individual module restyling demo.
When using JEZ Rego, each module will be automatically applied an additional class generated from its title by lowercasing all alphanumeric characters then stripping out all non-alphanumeric characters with white space character replaced with - character.
For example, if the module title is Restyle #1 then the additional auto-generated class attribute for that module will be restyle-1. Then creating individual style for that module is as simple as seen below:
/* restyle #1 */
#jezSub .restyle-1 {
margin: 0 -6px 0 -2px;
}
#jezSub .restyle-1 .hd {
background-image: url(../images/dark_drip-hl.png);
margin-right: 24px;
}
#jezSub .restyle-1 .hd .c {
background-image: url(../images/dark_drip-hr.png);
height: 20px;
margin-right: -24px;
}
#jezSub .restyle-1 .bd {
background-image: url(../images/dark_drip-bl.png);
margin-right: 24px;
}
#jezSub .restyle-1 .bd .c {
background-image: url(../images/dark_drip-br.png);
margin-right: -24px;
}
#jezSub .restyle-1 .bd .c .s {
background-image: url(../images/dark_drip-s.png);
margin: 0 8px 0 4px;
padding: 0 1em;
}
#jezSub .restyle-1 .ft {
background-image: url(../images/dark_drip-fl.png);
margin-right: 24px;
}
#jezSub .restyle-1 .ft .c {
background-image: url(../images/dark_drip-fr.png);
height: 76px;
margin-right: -24px;
}
#jezSub .restyle-1 h3 {
background: url(../images/icons/silk/color_swatch.png) 0 50% no-repeat;
padding-left: 24px;
}