Figuring out the various module class suffixes identified within each respective Template demo’s Typography page can sometimes be a little confusing – and often times frustrating. Unfortunately, there does not seem to be an easy-to-find concise identification or listing of each module class for each respective template.
SO . . . Until such time as an easy-to-follow listing is provided with each template, here is a roundabout way you can identify many of the various classes is to utilize a web inspector like FIREBUG or Google CHROME’s Web Inspector.
For the following example/steps, I will be describing steps using Google Chrome’s Web Inspector and the JA ERIO Template Demo – though the same principle method can be utilized with virtually any JATC Template.
STEP ONE: Go to theJA ERIO TYPOGRAPHY PAGEand scroll down to where the various module class suffix info starts
– e.g. BUTTONS & TAGS.
Right click over the first blue button and, from the pop-out menu, select “Inspect Element.” You will then see a bottom pane appear and, in the right column, you should see the identified CSS (along with a subsequent list of related css and such … it’s pretty self-explanatory).
In the case of the first blue button, the following is the module class that was identified:
Repeat these steps for each module class suffix you want to identify.
I realize this method involves a few additional steps – and it really shouldn’t be necessary . . .
but at least this is a way you can go about identifying most of the module class suffix info for the time being.
If you want to identify the exact CSS file location of the various classes . . . whenever you are using a web inspector to investigate/identify CSS elements, always set “Optimize CSS” to “No” within your Template Manager–General Settings. Otherwise, the “compressed” css file/line info that is presented will not be correct and, as a result, much more difficult to find within your various directory CSS files.
1 user says Thank You to TomC for this useful post