David Scotson

What does it use JQuery for?

I'm just about to go on holiday until Tuesday, but I'll submit a patch to github when I'm back to use Font Awesome icons everywhere in Moodle that it's possible to do so, with workarounds for the various problems that I've previously discovered.

I would really like it if core Moodle adopted Font Awesome but there seems to be a lack of understanding of the benefits. Hopefully a demonstration might be more convincing than words. I think there's still time before 2.6 to adopt it in for core, but only if we get started soon.

Try pasting this at the end of custom.css, for the menu hover:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  color: #ffffff;
  text-decoration: none;
  background-color: [[setting:themecolor]];
  background-image: -moz-linear-gradient(top, [[setting:themecolor]], [[setting:themehovercolor]]);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from([[setting:themecolor]]), to([[setting:themehovercolor]]));
  background-image: -webkit-linear-gradient(top, [[setting:themecolor]], [[setting:themehovercolor]]);
  background-image: -o-linear-gradient(top, [[setting:themecolor]], [[setting:themehovercolor]]);
  background-image: linear-gradient(to bottom, [[setting:themecolor]], [[setting:themehovercolor]]);
}

Buttons can't be done perfectly because Moodle's CSS variable replacement isn't as sophisticated as LESS, which Bootstrap uses, and can automatically generate different shades of a color. But you should be able to do something I think if you wrote some clever PHP in the theme to do the color transformations.

If you wanted to just do a simple button, like the "turn editing off" button in the screenshot, you'd need to copy'n'paste  (or edit) that bit from the custom.css (search for breadcrumb-button) to add the various buttons throughout moodle

input.form-submit,
input#id_submitbutton,
input#id_submitbutton2,
.path-admin .buttons input[type="submit"],
td.submit input

An example of hacking it with CSS for places that aren't in renderers:

.icon.editing_delete:before {
content: "\f00d";}
.commands .icon img {position:absolute;left:-10000px;}

This moves the images used for the block edit command icons offscreen, but I believe it means the alt text is still available.

The other thing it does is add an X icon font glyph to the link that surrounds the (now invisible) X icon image.

This is actually a bad example because there's two different renderers that you could use to control the HTML for this particular instance. But it gives you an idea of what you'd need to do to reach all the icons in Moodle.

I see the problem on the front page, in Firefox and Chrome.

Both the activities and the blocks in the side column retain the up/down arrow icon (which gets removed if the drag'n'drop javascript is working correctly) and can't be drag'n'dropped.

But the blocks in the admin section work as expected and can be drag'n'dropped.