The only way you can do this is grab a copy of the icons from Moodle2.4 pix and then add them to ...
theme/bootstrap/pix_core (in their correct folders)
and put all the MOD ones into
theme/bootstrap/pix_plugins/mod/
you can also add enrol likewise pix_plugins/enrol and that goes for any other sub-directory that uses an icon, I can't think of one off hand, but like 'enrol' and 'mod' there are a couple more if you look in the moodle/ sub-directories.
More about this HERE
Fair enough, I thought someone else might have already done the boring bits, I'll post it back here when it's done.
I've uploaded it into my bootstrap_renderers github:
https://github.com/ds125v/moodle-theme_bootstrap_renderers/tree/master/pix_core
https://github.com/ds125v/moodle-theme_bootstrap_renderers/tree/master/pix_plugins
It's not a perfect drop-in, some of the icons will appear too big, or slightly too high unless you tweak your CSS, other's look a little bit fuzzy if they've been resized down, but generally it does the job.
I had to make a couple of tweaks e.g. 2.3 is looking for a f/html.png to show as the icon for resources, so put a copy of the mod/resources/pix/icon.png there so there may be other things not quite right.
https://github.com/ds125v/moodle-theme_bootstrap_renderers/tree/master/pix_core
https://github.com/ds125v/moodle-theme_bootstrap_renderers/tree/master/pix_plugins
It's not a perfect drop-in, some of the icons will appear too big, or slightly too high unless you tweak your CSS, other's look a little bit fuzzy if they've been resized down, but generally it does the job.
I had to make a couple of tweaks e.g. 2.3 is looking for a f/html.png to show as the icon for resources, so put a copy of the mod/resources/pix/icon.png there so there may be other things not quite right.
And some CSS to take the rough edges off:
.smallicon.navicon {
height: 16px;
vertical-align: -2px;
padding-right: 4px;
}
.commands img.iconsmall {
height: 12px;
padding: 4px;
}
li.activity img.activityicon {
height: 16px;
}
This leaves the activity icons 24px in most places, but where size is disruptive in 2.3 I've shrunk them to 2/3 the size, they still look good (imho).
This works for me but at the moment I've deleted most of the core Moodle.css for my theme, I'll double check later if there's any further tweaks necessary for use in a standard theme.
Here's a screenshot, please ignore other brokeness you might see, this is a test site:
I have a somewhat opposite question that I thought between you, David, and Mary might be able to help me with. I just upgraded my experimental site from 2.3 to 2.4, and notice that these new icons expand the height of each section (see graphic) by about 30%. Of course, this is due to the icons being 24 pixels in size.
Well, I don't like this because I think my Moodle takes more space, and really doesn't help the user. So I would like to fix this and somehow compress the spacing between each resource/activity.
Ideally, I would like to add some CSS code to my theme that would keep the icons at 24 pixels, but tighten (i.e., reduce) the vertical spacing a little. Maybe this is a "padding" issue, in CSS.
David, I took some of your code ( li.activity img.activityicon {height: 16px;} ), added to my Custom CSS for my (Formal White) theme, and noticed that the icons are now 16px, and naturally reduced the vertical spacing a little bit, which I actually like. In other words, David, your code worked great! Also, I actually like adding this code to the Custom CSS within a theme so that I don't have to mess with coding changes.
David (Mary or others), is there some simple CSS code that would reduce the spacing? I am not good enough with CSS yet, but David, it looks like you are on to something good. I am not sure about the best solution, keeping the icons at 24px and reducing the spacing, or reducing the size of the icons and also reducing the spacing a little. I would like to experiment. I was not sure if your (David) other code was meant to do this.
Any help would be appreciated.
Hi Rick
Try adding this to your FW Custom CSS and save. Remember you need to have Theme Designer Mode enabled.
.course-content .section li.activity { margin: 0;}
Currently it is set like this...
.course-content .section li.activity { margin: 7px 0;}
this means 7px top/bottom and 0 left/right, which is in effect giving each activity link a 14px gap which is too much.
this means 7px top/bottom and 0 left/right, which is in effect giving each activity link a 14px gap which is too much.
If you think zero make the gap too small try altering it to something like...
.course-content .section li.activity { margin: 1px 0;}
Mary, that does it. I knew you would come through for me. So, when I add these two lines, I am back to what I want.
.course-content .section li.activity {margin: 0;}
li.activity img.activityicon {height: 16px;}
I know this gets away from the beautiful 24px icons, but I feel that functionality (i.e., seeing more content) is more important that big icons. Actually, one of my major complaints about Blackboard is how inefficiently it uses screen real estate, so I want to keep my Moodle very efficient.
I have another question. You mentioned to have Theme Designer Mode enabled. I looked at this setting, and felt that I am not developing a theme so I left this disabled. However, after making these changes, I did purge the cache.
Here is a graphic showing these comparisons.
Thanks.
It looking good!
Purge all cache is OK you could try Clear theme cache in Theme selector which I am assured works just as well for theme related changes, but since Theme designer mode if always enabled unless I am testing, then I never use purge much unless working with theme that use Javascript, then Purge all caches is the only way to go.
Hope this answers you quesion?
Cheer
Mary
Yes, it does.
By the way, I think my Moodle site now looks better in Moodle 2.4 than in Moodle 2.3.3+. I am still testing things in my experimental site. I am waiting for a problem with URL Resources (pop-ups and new windows not working) to be fixed before I can upgrade my production site.
Thanks again.
Rick,
In this post you mention that pop-ups and new windows are not working in 2.4. What do you mean? I am working with two different sites one a 2.4 and one a 2.4+. When I add a file resource in 2.4 and set it to pop-up, it first takes me to a pop-up of a summary screen of the content of the page and I then have to click a link at the bottom of the summary to the pop-up of the file resource (not what I want). In 2.4+ when I set up exactly the same file resource as a pop-up, it links directly to the file in a pop-up, without the intermediate pop-up window and step (which is what I want). Is this what you mean about a pop-up problem in 2.4? And if it is, I guess it is corrected in 2.4+.
Dan, the problem was that the "new window" attribute of a URL resource did not open in a new window. This has already been fixed in the latest release, and the Moodle Tracker item is closed.
Yes, the behavior that you describe was the problem. I am running Moodle 2.4+ (Build: 20121230) and the problem is fixed.
The Moodle developers did a great job responding to, and fixing this problem. Great support!
Hi,
I am trying to install Moodle 2.4 icons with 2.3. I have followed these instructions but with no joy. It is still loading all the images from the /pix and /mod folders and not the ones I have uploaded to ‘/theme/mytheme/pix_core’ and ‘/theme/mytheme/pix_plugins/’. I have tested this as when I remove these icons from the server no images are displayed where the icons should be.
I have also tried editing the ‘image.php’ file in the ‘theme’ folder so it changes the order it looks for images in the order .png/.gif/.jpg etc rather than looking for .gif files first (line 80 in image.php).
I also tried uploading the 2.4 version of image.php that includes the code to search for svg image files but it ignored it and still loaded .gif files.
Has any got any suggestions on;
- Why the icons in my theme folder aren’t overriding the core images? And
- How you can change the order it looks for images so its svg/png/gif?
I have tried clearing theme cache/purging all caches and restarting apache all with no luck.
Any help appreciated!
Thanks
Dan
So, for the gif issue, I'd suggest not creating any .gif files, so that when it finds your new PNG files, it'll use those instead. Then there's no need to mess with the code. (Also, does 2.3 support SVG?, I know the icons were overhauled in 2.4 but I'm not sure when support for the SVG format was added).
Which takes us back to why it's not picking up your new PNG images. It's not clear to me why you would be having trouble. My best guess is that you're not putting the new files in the right place.
Have you followed this guide? (and the note right at the top which suggests being in "theme designer mode" while making changes so that you can the difference instantly? Remember to turn it off when you're done):
http://docs.moodle.org/dev/Using_images_in_a_theme#Overriding_images_in_your_theme
Which takes us back to why it's not picking up your new PNG images. It's not clear to me why you would be having trouble. My best guess is that you're not putting the new files in the right place.
Have you followed this guide? (and the note right at the top which suggests being in "theme designer mode" while making changes so that you can the difference instantly? Remember to turn it off when you're done):
http://docs.moodle.org/dev/Using_images_in_a_theme#Overriding_images_in_your_theme
Look at how Afterburner theme deals with this.
Thanks for replies. I think that 2.3 maybe doesn't support SVG files but that doesn't explain why it loads the gif before the png files. I am in Theme Designer Mode as well.
I have followed this guide exactly but it hasn't worked - http://docs.moodle.org/dev/Using_images_in_a_theme#Overriding_images_in_your_theme
I couljd use a fix to remove the gif files from the server but I wanted to keep them in to make sure images show up on older browsers/mobiles etc.
From what I can see the 'Afterburner' theme just handles this by doing that and having no gif files and just PNG files but it doesn't explain why in that one it loads the images from the pix_core and pix_plugin folders in the theme/afterburner folder and with our custom theme it doesn't load them?
Cheers
Dan
Have you tried copying/moving the afterburner pix folders into your theme to see if thy continue to work?
Might show up issues like minor naming problems, or file permission issues.
Might show up issues like minor naming problems, or file permission issues.
Afterburner contains a mixture of gif and png icons/images
If you have it set up as I have depicted it below, then the only thing stopping your custom images from working is that you will need to Purge all cache
After that you need to refresh your browser using keyboard Ctrl + F5 this forces all the images to reload.
As mentioned earlier...the pix_core and pix_plugins should be listed like so...
- yourthemename
- layout
- style
- pix
- pix_core
- pix_plugins
and NOT like this (just in case you have) they are NOT sub-directories of pix they are directories in their own right.
yourthemename
- layout
- style
- pix
- pix_core
- pix_plugins
Providing all the icons/images are in their respectful folders (look at Afterburner for guidance) and providing that you have not altered moodle/theme/image.php then it should work like Afterburner.
You could also try switching on Debugging in case there is something wrong with you theme?
Site Administration > Development > Debugging (set it to Developer settings)
Hope this helps?
Mary