hello to all moodlers committed to CSS and themes!
i was just wondering if there exists an overview over all the ids and classes defined throughout moodle and its modules which can be used when modifying/creating a theme.
any pointers are welcome...
regards,
andreas
Hi Andreas, I hope somebody chimes in with info about the overview...I sure haven't found it. I can tell you that css styles are aggregated from several sheets and a final css is generated via a php page. The sources of css styles can be any of the following (and probably more I missed)...
In the interim I can highly recommend some developer tools to let you analyze css elements to figure out what they are. If you're using Firefox (and you should be!) get Aardvark and Firebug. Both are plugins that really make css troubleshooting easy to do. Their functionality overlaps a fair bit but I find both indispensible.
For Internet explorer there's the Dev Toolbar which, while not as cool as the firefox plugins, has some features that they both lack.
Hope it helps!
- styles.php (may be contained in each block in moodle)
- /themes/standard/styles_layout.css
- /themes/standard/styles_color.css
- /themes/standard/styles_font.css
- /themes/chosentheme/styles_layout.css
- /themes/chosentheme/styles_color.css
- /themes/chosentheme/styles_font.css
- Other places?
In the interim I can highly recommend some developer tools to let you analyze css elements to figure out what they are. If you're using Firefox (and you should be!) get Aardvark and Firebug. Both are plugins that really make css troubleshooting easy to do. Their functionality overlaps a fair bit but I find both indispensible.
For Internet explorer there's the Dev Toolbar which, while not as cool as the firefox plugins, has some features that they both lack.
Hope it helps!
hi Greg!
thanks very much for your help! i did not know that there is such a thing like a standard css that is inherited. i will have a closer look into that. i guess most of the classes will be included there?
also thank you for the tool-recommendations. for the moment i am using opera a lot.
if anybody else can give a hint about kind of a complete listing of all the classes and ids used, be welcome!
andreas
thanks very much for your help! i did not know that there is such a thing like a standard css that is inherited. i will have a closer look into that. i guess most of the classes will be included there?
also thank you for the tool-recommendations. for the moment i am using opera a lot.
if anybody else can give a hint about kind of a complete listing of all the classes and ids used, be welcome!
andreas
Hooray Opera!
A while back I wrote a user javascript for Opera (and then hacked support for FF/Greasemonkey ) that allows you to inspect the DOM tree of a page (specifically I wrote it to help creating a moodle theme) You can shift click on a part of the page and the script climbs the DOM from that point and tells you about all the elements it finds along with their classes and id attributes.
http://www.moddular.org/log/css-inspector-again/
This user script eventually got cleaned up and became part of the chameleon theme in moodle - so maybe you'd find that useful for investigating the HTML id's/classes etc... even if you don't use it to create the theme
yeah, thanks a lot. cool stuff 