Hi, I’m new to Modx and was wondering if there is documentation on the the Modx specific CSS tags that are used? I’ve looked through and searched the forums but haven’t found anything quite yet. Thanks!
There are no MODx specific CSS tags. What you put in is what you get out.
, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
Yeah, the only real CSS specific stuff is in some of the output for the various snippets and such. Even then, alot of it can be overridden with certain parameters and/or chunks. For instance, with the DropMenu snippet you can give it values for the menuName and topnavClass parameters respectively for setting the ID and classname respectively. Other snippets have their own way of doing this. Sometimes you can override a CSS ID or class via a parameter; sometimes you have to use a chunk as a template and assign the ID and/or class for each element in it; but some don’t have any overrides and you simply have to place it in a test document and view the code to see what the default ID’s and classes are. Most snippet and module writers are now allowing for assigning custom ID’s and classes though.
However, I will say this though...there are a few instances where MODx will output a class or ID for an element. The only real place this happens is for Template Variables. For instance, if you create a template variable that uses a RichText widget and place it on a page then the resulting output would have a DIV with a class of MODX_RichTextWidget. So, yeah, there are a few places that have MODx specific CSS classes and such...but only in the output of template variables for now. And, yeah, we probably need to add this to the documentation.
"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."
Your browser’s "View -> Source" is your friend.
To most people MODx is the sum of its parts, and therefore it does use a number of CSS classes here and there which would ideally be documented by each snippet/plugin/module/template author if appropriate.
I’ve only had one class clash so far: my h1 settings made the "QuickEdit" title screw up.
That uses h1 #QE_title in its own css file, which I’ve now had to edit.
The Web Developer toolbar for Firefox is a great help with CSS - browse about your site, find something where you need to know what the style tag is, switch View Style Information on, move the target over it and see the full cascade of styles in the status bar, click and hey presto: all the code that is being applied, and which CSS files that comes from. Marvellous.
great, thanks guys. I’ve been viewing source and found things like MODX_RichTextWidget, FSF_searchform, date_header and nl_summaryPost, etc. I’ve found most in the snippets, but haven’t found them all. View Source does work the best for right now though. It would be really cool to put any that do exist into the documentation.
I’ve just downloaded the Web developer toolbar for Firefox and MAN is it great, thanks again!!