Here is the link to the Theme reference page that I started to create. Please help to contribute whatever you can.
http://docs.moodle.org/en/Theme_reference
Melissa
Melissa, great that you started a Moodle CSS reference page. The information on that page will help a lot when anybody starts to work with Moodle Themes.
You mention in the introduction that you describe Moodle 1.5.4 pages. Most people will start working with 1.7 or perhaps 1.6. It might be better to document the actual version and describe the differences from that point of view. What do you think?
Urs
Unfortunately, I am working with 1.54, because I am not able to access a mysql version 4.1.6. I have no idea what the differences would be for later versions. I figured that as more and more items were added, at some point in the future, the pages would be broken up into different versions or there would be some logical direction on what CSS names, classess, and ID worked with each version.
I know that with 2.0 (or maybe even 1.8) there is a lot of cleanup being done with the class and ID names to help make them accessible for speak CSS.
I don't agree that most people are starting with 1.6 or higher, because of the MySQL issue. I am not, and I know from reading the boards that others are in the same boat. I made the suggestion to make the database backward compatible with lower versions of mysql, but it was shot down -- very loudly. I was told that new features from the current version of mysql are needed. I didn't ask what exactly these features were. They have their minds made up and that is that.
That is why my documentation is for 1.54.
Melissa
Hi Everyone
I am starting to develop my own theme and would find a complete list of all divs and classes invaluable. I am willing to complete the work that Melissa started, and ask if any of you theme experts could forward me any documentation you have done yourself, for me to collate.
The alternative is to save the source of every page Melissa has listed and start from scratch - surely that is a waste of the time loads of people must have already invested.
Thanks in advance - mail any files direct to ed@interweave-now.co.uk if you like.
I will start with the information I have I have received from 7 days time.
Ed
I am starting to develop my own theme and would find a complete list of all divs and classes invaluable. I am willing to complete the work that Melissa started, and ask if any of you theme experts could forward me any documentation you have done yourself, for me to collate.
The alternative is to save the source of every page Melissa has listed and start from scratch - surely that is a waste of the time loads of people must have already invested.
Thanks in advance - mail any files direct to ed@interweave-now.co.uk if you like.
I will start with the information I have I have received from 7 days time.
Ed
I've contemplated doing this a number of times, but have concluded every time that such an endeavor would, in the end, just produce more trouble (for you and for me) than it's worth.
The one practical reason I can give is because such a reference would inevitably leave something out, and you would have to return to these forums, yet again, with another question.
For this reason, I have instead written a tutorial on how to find, quite painlessly, any element, ID or class all on your own using the Firefox Web Developer extension.
Try it, and if you have any questions, please let us know.
The one practical reason I can give is because such a reference would inevitably leave something out, and you would have to return to these forums, yet again, with another question.
For this reason, I have instead written a tutorial on how to find, quite painlessly, any element, ID or class all on your own using the Firefox Web Developer extension.
Try it, and if you have any questions, please let us know.
I quite agree with Patrick that the best way to understand the themes in Moodle is to use tools such as the Firefox Web Developer extension.
Joseph
Joseph
I agree with Patrick, there is little point detailing each element/class/ID in Moodle when extensions exist to find out this information instantly.
Remember the sometimes overlooked IE Developer Toolbar, which often comes in handy when something appears correctly in FF but falls apart in IE
http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Although the Developer Toolbar for IE is helpful it doesnt offer the same level of power as the FF Extension.
Remember the sometimes overlooked IE Developer Toolbar, which often comes in handy when something appears correctly in FF but falls apart in IE
http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Although the Developer Toolbar for IE is helpful it doesnt offer the same level of power as the FF Extension.
Everyone
Thank you for your comments - I will be working through your tutorial Patrick and already had your styles down as favourites.
I do use the web developer extension but the only problem I have is that with a 1024 screen, some of the levels are so nested that some information disappears off the right hand side!
I'll give it another go.
Ed
Thank you for your comments - I will be working through your tutorial Patrick and already had your styles down as favourites.
I do use the web developer extension but the only problem I have is that with a 1024 screen, some of the levels are so nested that some information disappears off the right hand side!
I'll give it another go.
Ed
I have a tip for you, its not the perfect solution but gets round your problem.
When hovering over elements to reveal there class/ID etc the string appears in the CSS toolbar at the top of the browser in FF.
Well if you keep you mouse hovering over the particular element you want to know the Class/ID of then press the TAB key it will cycle through all the elements on the page (You know like when you press tab to move onto the next field of a form.
Eventually you will highlight the css toolbar, then you can copy the css elements and paste them into something like notepad:
html > body #site-index .course course-1 dir-ltr lang-en_utf8 > div #page > div #content > table #layout-table > tbody > tr > td #right-column > div > div #inst16 .block_news_items sideblock > div .content > div .newlink > a
You can also hold down SHIFT while doing this to save cycling through the whole page of elements, kind of like going in reverse.
When hovering over elements to reveal there class/ID etc the string appears in the CSS toolbar at the top of the browser in FF.
Well if you keep you mouse hovering over the particular element you want to know the Class/ID of then press the TAB key it will cycle through all the elements on the page (You know like when you press tab to move onto the next field of a form.
Eventually you will highlight the css toolbar, then you can copy the css elements and paste them into something like notepad:
html > body #site-index .course course-1 dir-ltr lang-en_utf8 > div #page > div #content > table #layout-table > tbody > tr > td #right-column > div > div #inst16 .block_news_items sideblock > div .content > div .newlink > a
You can also hold down SHIFT while doing this to save cycling through the whole page of elements, kind of like going in reverse.
I do use Dan's tip of tabbing backward or forward to get to the CSS toolbar at the top of the browser. Another useful way of tracking the exact CSS class is to use - in Web Developer - Information -> Display Element Information which will display all the information about the element you click on, including children and ancestors.
Let me stress again that in FireFox, the Web Developer plugin is an extraordinarily powerful tool is is really all you need to understand CSS classes in Moodle themes.
Joseph
Do you CSS experts find that Web Developer is better than Firebug for analyzing CSS?
There is no accounting for tastes - I have installed both plugins and they are equally good - still I use more Web Developer (probably because I installed it before Firebug...)
Jeff
I use both. Web developer is quick and easy for getting the info (even better thank's to Dan's idea on how to get all of the info when you have not got a 1m wide screen), and I noted Joseph's support of it.
When I am trying to change an element that has loads of inheritance from higher level definitions I find reading the code in firebug invaluable. Having said that, I find its list of what the element has inherited its definition from totally unreliable.
In my limited experience, the web developer route will make it fairly simple to write a load of very specific exceptions to the basic style. The long route of mapping a page out will probably end up as the smallest and most compact answer as you are setting things at higher levels - but it is very long-winded.
I had a tedious evening yesterday trying to get rid of the borders around the topics themselves and although I have succeeded, could not get any definition of bottom-border to work. Border-width:0 and border-color:the same as the background were ineffective and only border-style:none got rid of them! Good CSS experts must be very inventive I imagine!
Cheers
Ed
I use both. Web developer is quick and easy for getting the info (even better thank's to Dan's idea on how to get all of the info when you have not got a 1m wide screen), and I noted Joseph's support of it.
When I am trying to change an element that has loads of inheritance from higher level definitions I find reading the code in firebug invaluable. Having said that, I find its list of what the element has inherited its definition from totally unreliable.
In my limited experience, the web developer route will make it fairly simple to write a load of very specific exceptions to the basic style. The long route of mapping a page out will probably end up as the smallest and most compact answer as you are setting things at higher levels - but it is very long-winded.
I had a tedious evening yesterday trying to get rid of the borders around the topics themselves and although I have succeeded, could not get any definition of bottom-border to work. Border-width:0 and border-color:the same as the background were ineffective and only border-style:none got rid of them! Good CSS experts must be very inventive I imagine!
Cheers
Ed