Hi!
How can I change icons in block header? They have to be white, not grey like they are now.
Thank you.
Ivica
Hello Ivica,
Which version of Moodle are you using?
Which theme are you using?
Hi!
I'm using 2.4.2 version.
I would like to change grey part to white.
Ivica
Hi Ivica,
http://docs.moodle.org/dev/Themes_2.0_How_to_use_images_within_your_theme
You should be able to override the icons by creating your own and putting them in the correct place in your theme folder. In krystle this is /theme/krystle/pix_core/t/block_to_dock.png and /theme/krystle/pixcore/t/switch_minus.png
Use a graphics editor such as Gimp/Photoshop to recreate/recolour the icons the way you want them and save them into your theme pix_core folder as above. This will override the default icons.
Richard
Hi!
Is it possible to use different icons in block, and different in course? For instance:
Dear Ivica,
I see your dilema in turning them white! Unfortunately, they are the same standard icons in the block as used in the course editing. But, it might be possible to override the course renderer in the theme and get it to use a different set of icons that you define in the theme. I'm not sure how to do this in a theme - anybody?
Cheers,
Gareth
P.S. For easy editing of the colour of the icons when you have the 'svg' version and need to change it and the 'png' version, you can edit the 'svg' file in a text editor, find the 'fill colour', change it and then use GIMP to export the 'png' version.
I think you should be able to partially change this in the renderer function "block_controls":
public function block_controls($controls) {
if (empty($controls)) {
return '';
}
$controlshtml = array();
foreach ($controls as $control) {
$controlshtml[] = html_writer::tag('a',
html_writer::empty_tag('img', array('src' => $this->pix_url($control['icon'])->out(false), 'alt' => $control['caption'])),
array('class' => 'icon ' . $control['class'],'title' => $control['caption'], 'href' => $control['url']));
}
return html_writer::tag('div', implode('', $controlshtml), array('class' => 'commands'));
}
The src will always be something like t/delete or t/move, so you could always add "_block" to the end and then create images called t/delete_block. However, this will only affect the block edit controls, the block hide/show/dock icons are all added by javascript which is (generally) outside the control of renderers. See my other comment about changing them in the javascript.
public function block_controls($controls) {
if (empty($controls)) {
return '';
}
$controlshtml = array();
foreach ($controls as $control) {
$controlshtml[] = html_writer::tag('a',
html_writer::empty_tag('img', array('src' => $this->pix_url($control['icon'])->out(false), 'alt' => $control['caption'])),
array('class' => 'icon ' . $control['class'],'title' => $control['caption'], 'href' => $control['url']));
}
return html_writer::tag('div', implode('', $controlshtml), array('class' => 'commands'));
}
The src will always be something like t/delete or t/move, so you could always add "_block" to the end and then create images called t/delete_block. However, this will only affect the block edit controls, the block hide/show/dock icons are all added by javascript which is (generally) outside the control of renderers. See my other comment about changing them in the javascript.
Hi Ivica,
I have exactly the same problem as you.
My friend Juan Carlos Molina, who is working as a Moodle developer, gave me a solution. For example, for "t/delete" icon.
- In your theme, rename the image as delete_block.png
- Find the file moodle/lib/blocklib.php
- Find and replace the string "t/delete" with "t/delete_block"
- In the Moodle folder pix, you should duplicate the original image "t/delete.png" and rename it as "t/delete_block.png". (Actually both images are the same, but if you change the theme, you will need this duplicate, since we changed the "blocklib.php" file ).
The problem is that I've just realised that the "switch_minus" and "switch_plus" icons don't appear at blocklib.php, but they do at the grades table. This time I don't have a real solution... Maybe changing the cell's background color where the icons appear...
I hope It helps.
María
An alternative is to leave the icons as they were originally, and then add some CSS to your theme that gives the icons a background color using something like this which is in the Boxxie theme:
.block .header .commands .icon img {
background-color: #F3F8ED; /* adds light green background */
border: 2px solid #3B4C25; /* adds 2px dark green border */
border-radius: 5px; /* adds rounded corners in modern browsers */
height: 12px;
margin-right: 3px;
padding: 2px; /* adds padding to icon */
width: 12px;
}
Cheers
Mary
Thank you this solution looks promising.
Ivica
Hi all,
I have an identical problem, I would like to change the "edit summary" icons in courses to something easier to spot, but do not want to change the icon for all other places (blocks, etc.).
I know that the icon is located at i/settings , but I were not able to find the files where I should change the address (as I could with t/block), I do not see where it is mentioned.
Do anyone has any suggestions?
Thanks,
Gabor
You can find and change switch_minus/plus in the javascript file 'lib/javascript-static.js' and make the same fix:
https://github.com/ds125v/moodle/blob/master/lib/javascript-static.js
The long term fix for this issue is (in my opinion) the adoption of an icon font created from the current SVG icon.
I started this bug about it if anyone interested in following progress/helping:
https://tracker.moodle.org/browse/MDL-37231
Currently most of the discussion is focussed on the ability to link to any kind of font from a Moodle theme, but I've already experimented with replacing moodle icons with fonts and large areas are fairly easy to do. Perhaps we can get the more difficult bits done in time for 2.6?
https://github.com/ds125v/moodle/blob/master/lib/javascript-static.js
The long term fix for this issue is (in my opinion) the adoption of an icon font created from the current SVG icon.
I started this bug about it if anyone interested in following progress/helping:
https://tracker.moodle.org/browse/MDL-37231
Currently most of the discussion is focussed on the ability to link to any kind of font from a Moodle theme, but I've already experimented with replacing moodle icons with fonts and large areas are fairly easy to do. Perhaps we can get the more difficult bits done in time for 2.6?
It's a good idea Mary. I think I prefer not to overwrite too many core files. (I would have to do that in each update...).
The David's approach seems also very interesting. I'll keep an eye on it.
Thanks!
I came across this as well.
using moodle 2.7, editing blocks.less i added bolded text. in my themes i made a pix/icons folder with the icon block_to_dock.png in white. the trick works by making the input image size of 0, then adding padding and a non-repeating image. it really sucks that the system doesn't use the bootstrap glyph fonts.
.block {
.well;
padding: 0 0 8px 0;
.header {
margin:-1px -1px 0 -1px;// expand the div to cover the underlying border
background-color:@baseColourD6;
color:@contrastBaseColourD6;
border:1px solid @baseColourD6;
border-top-left-radius:@baseBorderRadius;
border-top-right-radius:@baseBorderRadius;
background-image: url([[pix:theme|bg_red]]);
background-size: 400% 400%;
h2 {
.nav-header;
font-size: 1.1em;
word-wrap: break-word;
margin: 0;
}
.block_action {
padding: 3px 15px;
float: right;
> * {
margin-left:3px;
}
.block-hider-show,
.block-hider-hide {
cursor: pointer;
}
.block-hider-show {
display: none;
}
input[type=image]{
padding: 12px 12px 0px 0px;
background: url([[pix:theme|icons/block_to_dock]]);
background-size:auto;
width:0px;
height: 0px;
}
}
I believe the icon you re looking for is t/block_to_dock, so just adding a
/pix_core/t/block_to_dock.png
image in your theme should automatically ooverride the core one anyway - as in the doc linked near the top of this thread
http://docs.moodle.org/dev/Themes_2.0_How_to_use_images_within_your_theme
With regard to using bootstrap glyph icons - the core themes are using bootstrap2 - as far as I can see the Bootstrap Glyph icons were added in Bootstrap3 and so would not be available to the core themes at this time. Prior to that (and also now) themes that added their own icon fonts use external icon fonts such as fontawesome.
Also, the core system still needs to support those themes based on base/standard which do not use bootstrap at all, as well as older browsers which my have limited support for newer features.
Just had to do this myself in a theme. Solution I used was in the theme to change the brightness of the icons using CSS3 filter.
.block .block-hider-hide,.block .block-hider-show,.block .block_action .moveto, .block .menubar img {
-webkit-filter: brightness(100);
filter: brightness(100);
}
This keeps the same icons but changes the colour from grey using a filter.
The above sets icons to white. Change 100 to 0 to turn them black.
I think you can only get various shades of grey with this technique, not sure how many
Sorry, after testing this further on different browsers the values above are not ideal.
It seems that
0 gives black
1 is original colour (grey)
2 is white
This seems to be consistent for all modern browsers tested but does not work in older browsers or microsoft browsers
On older browsers and ie it only works for the icons that are added using the img tag and not images that are on input tags. This means it does not work on the dock or minimise icon, but does for the edit and move icons.
Sorry!
Have you tried...
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
I dare say all you need to do is adjust the percentage such as 50%, or 75% etc
http://www.w3schools.com/cssref/css3_pr_filter.asp
Just a thought. I may have a play around with this later.
Thanks for the heads up with this.
Cheers
Mary
Hi Mary,
It seems that IE does not support the CSS Filter tag so it just won't work.
http://caniuse.com/#feat=css-filters
When I tested it on one browser the filtering worked on the Move and Menu icons in the block header as these use the img tag and are in the source code on page load. It did not work on the Dock and hide/show icons which are inserted into the block header via Javascript.
I can not recreate this today though so not sure which browser!
I think I will have to try and swap the icons as need it working in IE11