Essential Theme - Activity + Resorce Icons

Essential Theme - Activity + Resorce Icons

by Peter Ward -
Number of replies: 7

The standard moodle activity & resource icons look a bit, 'out of character' when applying the Essential theme.

Is there a way to use the awesome font to generate the activity & resource icons?

Or would I need to create my own replacement icons in the pix folder of this theme?

Cheers.

Average of ratings: -
In reply to Peter Ward

Re: Essential Theme - Activity + Resorce Icons

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Peter,

Could you confirm by  making a screen shot please.

I take it the ones when editing mode is on and JavaScript is also on.  If so, then the JavaScript manually adds them so you have to change the actual icons as the overriding renderer in Essential's core_renderer.php file does not work because of the JS hard coding.  Even if the specific icons are mentioned.  This is why amongst other reasons Moodle needs you use an icon font for icons instead of individual ones.  Or at least have a mechanism whereby the JS will work by setting CSS selectors which then select the content instead, then the CSS can select the individual icon or the theme could replace with an icon font instead.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme - Activity + Resorce Icons

by Peter Ward -

Many thanks Gareth.

It's not the 'editing mode' icons I'd like to change, but the actual icons for the activity + resources that the student sees. Such as these:

Regards

Average of ratings: -
In reply to Peter Ward

Re: Essential Theme - Activity + Resorce Icons

by David Scotson -
The line that writes out those icons is in a renderer, so you should be able to override it to some degree.

https://github.com/moodle/moodle/blob/master/course/renderer.php#L806-L808

However, from previous experience I've found that often these things are also defined in other places, e.g. if you drag'n'drop a file into a course it might try to create that same HTML via javascript, which you'll have a much harder time changing.

Another approach I've used in these situations is to use CSS to first hide the existing icons, then use CSS to add the font icon instead. Unfortunately CSS :before, which is a handy technique for doing this, doesn't apply to img tags, which is generally what you're trying to target.

What I've never tried but might be relevant here, is to use SVG icons as a source. I think you can download Font Awesome icons individually as SVG and PNG from http://icomoon.io/app/ so then you'd just have a bit of renaming to do.

I've attached an IcoMoon font icon (from their own set, not Font Awesome, they offer a few different sets to mix'n'match from) exported as a black PNG at 24 pixels.
Attachment bubbles.png
Average of ratings: Useful (1)
In reply to David Scotson

Re: Essential Theme - Activity + Resorce Icons

by Peter Ward -

David,

 

Thanks for your reply.  Here's what I've tried.

I downloaded SVG and PNG icons from http://icomoon.io/app/

Replaced the original icons in the pix directories e.g.  moodle/mod/scorm/pix/icon.png and icon.svg

Having cleared cache in the end user PC I then created a new course with the clean theme.

Result: My replacement icon appears both in the 'add an activity or resouce' panel and alongside the activity when its presented to the student.

When I change the course theme to use the essential theme, the standard moodle icons are shown i.e. the ones I want to change.

On inspecting the activityimages in both themes I find that:

esential

<img class="iconlarge activityicon" role="presentation" alt=" " src="http://www.myurl/moodle/theme/image.php/essential/scorm/1387468878/icon"></img>

clean

<img class="iconlarge activityicon" role="presentation" alt=" " src="http://www.myurl/moodle/theme/image.php/clean/scorm/1387468878/icon"></img>

I'm not sure if this is being set by the renderer.

Regards.

Peter

Average of ratings: -
In reply to Peter Ward

Re: Essential Theme - Activity + Resorce Icons

by David Scotson -
You need to put the replacement icons inside the theme you intend to use so:

theme/essential/pix_plugin/mod/scorm/icon.png
theme/essential/pix_plugin/mod/forum/icon.png
theme/essential/pix_plugin/mod/scorm/icon.svg
theme/essential/pix_plugin/mod/forum/icon.svg


and so on. Or for clean:

theme/clean/pix_plugin/mod/scorm/icon.png
theme/clean/pix_plugin/mod/forum/icon.png
theme/clean/pix_plugin/mod/scorm/icon.svg
theme/clean/pix_plugin/mod/forum/icon.svg

I would have thought replacing them in core would have worked too, so it might just be a caching issue, but putting them in the theme is probably the 'right' way to do it.
Average of ratings: -
In reply to David Scotson

Re: Essential Theme - Activity + Resorce Icons

by Peter Ward -

Thanks David.

Not sure why the change to the core images gave the odd result.

I've created an additional custom theme based on essential with pix_plugin and the desired affect has resulted.

Thanks for the headsup

Cheers

Peter.

Average of ratings: -