Customising editor icons using pix_plugins directory in a theme
by Tim Williams -
Number of replies: 6
Does anybody know the correct path for overriding the icons used by the TinyMCE and Atto editors with icons placed within the pix_plugins directory of a theme (as described on https://docs.moodle.org/dev/Using_images_in_a_theme#Overriding_plugin_images ) . The correct path for these two plugin types is eluding me and my searches for other information have turned up a blank. I could work this out by digging into the code, but I'm thinking that somebody else here probably already knows the answer.
In reply to Tim Williams
Re: Customising editor icons using pix_plugins directory in a theme
by Mary Evans -
Add pix_plugins/e/ into your theme like so...
moodle/theme/your theme name/pix_plugin/e/
then add all the icons you want to use
So you know the names of the icons here is a full list?
https://github.com/lazydaisy/moodle/tree/master/pix/e
That done all you need to do is login to your Moodle site as Admin and then Purge all cache
That should work
Cheers
Mary
In reply to Mary Evans
Re: Customising editor icons using pix_plugins directory in a theme
by Tim Williams -
Hi Mary,
Thanks for that. Unfortunately I've had no luck at all getting this to work. Just to confirm, if I have a 3rd party plugin with an icon here:
lib/editor/atto/plugins/my_extra_plugin/pix/ed/my_extra_plugin.png
then the path for a custom icon in the theme dir would be:
moodle/theme/your theme name/pix_plugin/e/my_extra_plugin.png
I've cleared both Moodle + browser caches and the custom icon was never used. I also tried changing the icon for one of the standard ATTO plugins, but that had no effect either.
Any other suggestions? I'm going to have a quick dig into the code to see if I can find the actual underlying logic that drives this, so I'll report back if I find anything.
Thanks for that. Unfortunately I've had no luck at all getting this to work. Just to confirm, if I have a 3rd party plugin with an icon here:
lib/editor/atto/plugins/my_extra_plugin/pix/ed/my_extra_plugin.png
then the path for a custom icon in the theme dir would be:
moodle/theme/your theme name/pix_plugin/e/my_extra_plugin.png
I've cleared both Moodle + browser caches and the custom icon was never used. I also tried changing the icon for one of the standard ATTO plugins, but that had no effect either.
Any other suggestions? I'm going to have a quick dig into the code to see if I can find the actual underlying logic that drives this, so I'll report back if I find anything.
In reply to Mary Evans
Re: Customising editor icons using pix_plugins directory in a theme
by Tim Williams -
OK, I've worked this out for the ATTO plugin by looking at the code. I haven't been all the way through the logic, but the first part of the process calls the resolve_image_location function in outputlib.php if there is no icon in the cache. This method looks at the following locations for an icon:
moodle/theme/clean/pix_plugins/atto/my_plugin/ed/my_plugin_add_icon
moodle/theme/bootstrapbase/pix_plugins/atto/my_plugin/ed/my_plugin_add_icon
moodle-data/pix_plugins/atto/my_plugin/ed/my_plugin_add_icon
moodle/lib/editor/atto/plugins/my_plugin/pix/ed/my_plugin_add_icon
and it returns a "not found" result if no icon is found in these locations. (I'm guessing that since none of the standard plugins has an icon in these locations, there is some other process which enables these icons to be found.) However, for a custom plugin the default icon will be always be present in these dirs, so it seems to me this will always override anything placed in moodle/theme/your theme name/pix_plugin/e/ . I tried putting my custom icon in the first dir from the list above and it worked perfectly, so that's my problem solved for ATTO. Hopefully TinyMCE follows the same pattern.
This doesn't explain why I couldn't get the icon for a standard plugin to change when I put it in moodle/theme/your theme name/pix_plugin/e/ , but since the above works I'm not going to worry about this.
moodle/theme/clean/pix_plugins/atto/my_plugin/ed/my_plugin_add_icon
moodle/theme/bootstrapbase/pix_plugins/atto/my_plugin/ed/my_plugin_add_icon
moodle-data/pix_plugins/atto/my_plugin/ed/my_plugin_add_icon
moodle/lib/editor/atto/plugins/my_plugin/pix/ed/my_plugin_add_icon
and it returns a "not found" result if no icon is found in these locations. (I'm guessing that since none of the standard plugins has an icon in these locations, there is some other process which enables these icons to be found.) However, for a custom plugin the default icon will be always be present in these dirs, so it seems to me this will always override anything placed in moodle/theme/your theme name/pix_plugin/e/ . I tried putting my custom icon in the first dir from the list above and it worked perfectly, so that's my problem solved for ATTO. Hopefully TinyMCE follows the same pattern.
This doesn't explain why I couldn't get the icon for a standard plugin to change when I put it in moodle/theme/your theme name/pix_plugin/e/ , but since the above works I'm not going to worry about this.
In reply to Tim Williams
Re: Customising editor icons using pix_plugins directory in a theme
by Mary Evans -
Isn't that what I told you to do?
moodle/theme/your theme name/pix_plugin/e/bold.png
If you are questioning if TinyMCE uses the same image then yes it does.
It's all done by Moodle Magic.
Cheers
Mary
In reply to Mary Evans
Re: Customising editor icons using pix_plugins directory in a theme
by Tim Williams -
Hi Mary,
Your solution, which looks like this:
moodle/theme/your theme name/pix_plugin/e/my_plugin_add_icon.png
looked significantly different to mine, which is:
moodle/theme/your theme name/pix_plugins/atto/my_plugin/ed/my_plugin_add_icon.png
So I don't think that is the same. It's possible I didn't make this clear in my first post, so I apologise if that is the case.
pix_plugin/e might work for the standard core plugins (although I couldn't get it to work for bold.png when I tried, but I might have missed something), however, I need to customise a third party plugin and as far as I can tell, the image in the plugins own directory always overrides the content of pix_plugin/e .
I've also now had a look at TinyMCE and as far as I can tell, you can use custom icons for the core buttons, but the icons for at least some of the TinyMCE plugins see to be directly linked to the image in the plugin.
Tim W
Your solution, which looks like this:
moodle/theme/your theme name/pix_plugin/e/my_plugin_add_icon.png
looked significantly different to mine, which is:
moodle/theme/your theme name/pix_plugins/atto/my_plugin/ed/my_plugin_add_icon.png
So I don't think that is the same. It's possible I didn't make this clear in my first post, so I apologise if that is the case.
pix_plugin/e might work for the standard core plugins (although I couldn't get it to work for bold.png when I tried, but I might have missed something), however, I need to customise a third party plugin and as far as I can tell, the image in the plugins own directory always overrides the content of pix_plugin/e .
I've also now had a look at TinyMCE and as far as I can tell, you can use custom icons for the core buttons, but the icons for at least some of the TinyMCE plugins see to be directly linked to the image in the plugin.
Tim W
In reply to Tim Williams
Re: Customising editor icons using pix_plugins directory in a theme
by Mary Evans -
Sorry Tim, I misunderstood what you had finally done.
I need to test this out and see what's happening.