This may have been asked and answered before, but I haven't found anything in a quick search of the forums.
Has anyone documented what the different selectors in the various style sheets ( styles_color.css, styles_layout.css and styles_font.css) apply to?
Some are fairly self-evident but others are obscure may refer to elements that only exist on certain pages or only appear under certain contexts.
I'd also be interested in that.
I'm also wondering about having a set of possible "standard" CSS classes that people could be able to use in formating their work so that it could be flexibly moved/copied to sites with other themes (but the same defined classes). I don't even know if the themes have any special CSS for controlling standard HTML like VAR Keyboard ABBR ACRN.
Possible classes I'm thinking of: translation (for showing a word/phrases translation)
markup for special intersts: teacher, economist, administrator, programmer
Markup for different goal levels passing, above_passing, way_above_passing
Another thing that I know is included in Moodle is the JS utility (OverLib) used in the embedded questions for showing the feedback tooltip-popups. Is it possible, and if so how, to access that for other places one would like to use it?
I'm also wondering about having a set of possible "standard" CSS classes that people could be able to use in formating their work so that it could be flexibly moved/copied to sites with other themes (but the same defined classes). I don't even know if the themes have any special CSS for controlling standard HTML like VAR Keyboard ABBR ACRN.
Possible classes I'm thinking of: translation (for showing a word/phrases translation)
markup for special intersts: teacher, economist, administrator, programmer
Markup for different goal levels passing, above_passing, way_above_passing
Another thing that I know is included in Moodle is the JS utility (OverLib) used in the embedded questions for showing the feedback tooltip-popups. Is it possible, and if so how, to access that for other places one would like to use it?
OverLIB can be found here: http://www.bosrup.com/web/overlib/
I know where to get OverLib (though you gave good info for those that don't) but what I want to know is how can I use it in Moodle. It IS included in Moodle because it is used for the CLOZE question feedback. So it seems like it should be available for othe tooltip wishes one might have, even when making HTML pages in Moodle.
There are 3 questions:
There are 3 questions:
- where is the OverLib in Moodle located?
- is it possible to write in (in the HTML editor) calls to it without it being stripped out on saving?
- is it possible to make HTML pages outside Moodle, import them and use Overlib (either the one already in Moodle or a copy one puts in the course or site file catalog)?
Hi Jeff,
We have discussed this before...
1. where is the OverLib in Moodle located?
moodle/lib/overlib.js
2. is it possible to write in (in the HTML editor) calls to it without it being stripped out on saving?
Only in a composed web page (see attached screen shot). Not in forum posts, not in glossary definitions, etc. I much lament that this is still the case, in spite of my many protests in the past...
3. is it possible to make HTML pages outside Moodle, import them and use Overlib (either the one already in Moodle or a copy one puts in the course or site file catalog)?
Yes, very easily. All you have to do is to place a copy of overlib.js somewhere in your moodledata files, and of course point to it in your uploaded HTML files. I would recommend using a more recent version of overlib than the one provided with Moodle.
We have discussed this before...
1. where is the OverLib in Moodle located?
moodle/lib/overlib.js
2. is it possible to write in (in the HTML editor) calls to it without it being stripped out on saving?
Only in a composed web page (see attached screen shot). Not in forum posts, not in glossary definitions, etc. I much lament that this is still the case, in spite of my many protests in the past...
3. is it possible to make HTML pages outside Moodle, import them and use Overlib (either the one already in Moodle or a copy one puts in the course or site file catalog)?
Yes, very easily. All you have to do is to place a copy of overlib.js somewhere in your moodledata files, and of course point to it in your uploaded HTML files. I would recommend using a more recent version of overlib than the one provided with Moodle.
Hope that helps,
Joseph
JR to the rescue, Again! 
I tried using overlib in an ordinary Moodle HTML page and found that I didn't even have to know where overLib was or which version. So I made a Docs Wiki entry about it. I shameless clipped in part of your entry, so you may want to clean it up:
http://docs.moodle.org/en/overlib
And I tested IF if might work here in the forum, but it didn't.
I tried using overlib in an ordinary Moodle HTML page and found that I didn't even have to know where overLib was or which version. So I made a Docs Wiki entry about it. I shameless clipped in part of your entry, so you may want to clean it up:
http://docs.moodle.org/en/overlib
And I tested IF if might work here in the forum, but it didn't.
I was just about to post this same exact post. I am trying to modify a style, and I cannot the changes to apply. I do not know if it has to do with the fact that it is a caching problem or am I trying to change the wrong selector.
Hi,
If changes aren't appearing there can be a few possible causes. First if you're using internet explorer make sure to use Ctrl + F5 to refresh the page so you're definitely seeing the stylesheets with your changes in them.
If the changes still don't appear it's possible you've styled a selector that does apply to the element you want to change, but somewhere in the CSS there is another more specific selector that is setting the same property. The more specific selector will always "win" in these cases - hence your change doesn't appear. Fortunately there is quite a quick easy way to see if this is the case. For example if you had the following simple bit of CSS,
td { background-color: #f0f; }
Yet the areas of the page you were expecting this to change weren't changing (#f0f is very bright so it's hard to miss ). You could try editing it like this:
td { background-color: #f0f !important; }
the !important effectively acts as a override on the specificity of the selector. If the change still doesn't appear you can be pretty sure you're editing a selector that doesn't control the part of the page you're looking at. (Note the chameleon theme in moodle provides some quite helpful tools for working out what elements could be used to create a selector for different parts of the page - http://docs.moodle.org/en/Chameleon) If adding !important does make your change appear you can edit your selector adding some more elements to increase it's specificity and then remove the !important modifier. A fun guide working out the specificity of a CSS selector can be found here
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Sort of answering my own question, but after lots of searching, and since others may be interested, there's some documentation on style sheet selectors here: http://www.themegurus.com/css_chats.php
Nice find! I'm bookmarking that.