You can customise your own icons in its place. We actually replaced the old Font icons with inbuilt Font pack. The font icons was 1.6 mb data loaded on all the pages.
Following code sets the icon. Check the last case Default. I downloaded the svg icon from feathericons.com and replaced the default icon with the SVG.
Thanks for responding! You also work for WPLMS? New name for me. Nice to meet you.
I don't really understand what you are saying. Should I add this code to my website? Or are there more steps to take? Could you perhaps share a video if it's not too much trouble.
Is thisthe place when you talk about course status, inside the course? I would love to change that T-icon as well.. Something like this would be great.
How can I get those same icons, visuable both at the course page inside the app and inside the course itself, in the navigation? When you go to this page, I would like the icons: edit (for quizzes), monitor (for video unit type) and file for (general unit type). You can search the words edit, monitor and file and you will find the icons I mean..
Could you share the code I need to put in customizer plugin to get this done?
And when a quiz of unit is selected the icon turns green. See here. But then it is a bit fatter again, how can I lower the font-weight of the green icons/the selected icons?
Also what did you do to lower fontweight of icons? At a new staging website I can't change it. I need your code? Where did you put what?
Hello,
These icons. How can I get the old icons back? I want the ones on the left. Or otherwise, how can I change the icons?
Thanks,
Gijs
You can customise your own icons in its place. We actually replaced the old Font icons with inbuilt Font pack. The font icons was 1.6 mb data loaded on all the pages.
Following code sets the icon. Check the last case Default. I downloaded the svg icon from feathericons.com and replaced the default icon with the SVG.
Similarly you can do for all other cases as slides, audio, etc.
Let me know if you need further help.
Dear Ripul,
Thanks for responding! You also work for WPLMS? New name for me. Nice to meet you.
I don't really understand what you are saying. Should I add this code to my website? Or are there more steps to take? Could you perhaps share a video if it's not too much trouble.
Waiting for your response. Thanks a lot!
Gijs
added this code in your wplms customizer plugin changed icons :
add_filter('bp_course_get_full_course_curriculum',function($curriculum){
foreach ($curriculum as $key => $c) {
if($c['type']=='quiz'){
$curriculum[$key]['icon'] = 'task';
}else{
if($c['type']=='unit'){
$etype = wplms_get_element_type($c['id'],$c['type']);
if($etype=='video'){
$curriculum[$key]['icon'] = 'video';
}else{
$curriculum[$key]['icon'] = 'text-document';
}
}
}
}
return $curriculum;
},999999);
Thanks Alex! See here, still miss the video icon. And how do I get these same icons to show in the VibeBP app here? Or how can I at least change them?
Gijs
fixed video units but currentl[y we are checking if can do this on course status as well.
Perfect! image
Is thisthe place when you talk about course status, inside the course? I would love to change that T-icon as well.. Something like this would be great.
Have a great weekend,
Gijs
The same function works for course curriculum;
https://prnt.sc/QL_SgSgSnBXF
Dear Rupel,
Thank you for assisting Alex. Appreciate it. But it didn't work, but I must have done something wrong. Let me explain..
I love how icons look at course page. For example; at https://staging-meestergijs.kinsta.cloud/item/aangeplakte-vragen/#component=course
How can I get those same icons, visuable both at the course page inside the app and inside the course itself, in the navigation? When you go to this page, I would like the icons: edit (for quizzes), monitor (for video unit type) and file for (general unit type). You can search the words edit, monitor and file and you will find the icons I mean..
Could you share the code I need to put in customizer plugin to get this done?
Gijs
https://prnt.sc/EPwH8CrhWyTG
added this code in your customizer plugin :
add_action('wp_head',function(){ wp_enqueue_style('font-awesome', VIBE_URL.'/assets/fonts/font-awesome.min.css',array(),WPLMS_VERSION); ?> <style> .course_timeline ul .video:before {content: "\f26c";font-family:fontawesome !important;-webkit-text-stroke: 1px;padding-left: 15px;font-size: 30px;font-style:normal !important;}
.course_timeline ul .play:before {content: "\f26c";font-family:fontawesome !important;-webkit-text-stroke: 1px;padding-left: 15px;font-size: 30px;font-style:normal !important;} .course_timeline ul .text-document:before {content: "\f0c5";font-family:fontawesome !important;-webkit-text-stroke: 1px;padding-left: 15px;font-size: 30px;font-style:normal !important;} .course_timeline ul .task:before {content: "\f044"; font-family:fontawesome !important;-webkit-text-stroke: 1px;padding-left: 15px;font-size: 30px;font-style:normal !important;} .course_timeline ul li.quiz:nth-last-child(1) .task:before {content: "\f11e";font-family: fontawesome !important;-webkit-text-stroke: 1px;padding-left: 15px;font-size: 30px;font-style:normal !important;}</style> <?php });
add_filter('bp_course_api_course_curriculum_unit',function($unit){ $unit_type = wplms_get_element_type($unit['id'],'unit'); if($unit_type=='video'){ $unit['icon'] = 'play'; }else{ $unit['icon'] = 'text-document'; } return $unit; });
add_filter('bp_course_api_course_curriculum_quiz',function($quiz){ $quiz['icon'] = 'task'; return $quiz; });
Alex, that's straight up sourcery. Haha. Amazing! Fixed.
Could that same code apply at the course page? Here. Now it shows only a couple letters T....
Gijs
Ok added this code :
add_filter('wplms_get_element_icon',function($icon,$type){
if($type =='static' || $type=='dynamic' || $type=='h5p_quiz'){
$icon='task';
}else{
if($type =='play' || $type=='video'){
$icon='play';
}else{
$icon='text-document';
}
}
return $icon;
},10,2);
Thanks, Alex! Amazing that you made it work.
Is it possible to make these icons less 'fat'? See the difference from the website and my site. Just like we can with font-weight....
done
Yes, looks amazing! Can I lower these a little? https://imgur.com/a/KiOpwu5
I also see the different in font-weight inside the course, here. Can you do the same for the icon that is selected. In this example it's this one.
Please try adding this custom css in your wp-admin-> appearance-> customize -> custom css :
.course_curriculum_wrapper .curriculum_item>span:first-child strong{
display:flex;
align-items:center;
}
That code didn't lower the icons here.
And when a quiz of unit is selected the icon turns green. See here. But then it is a bit fatter again, how can I lower the font-weight of the green icons/the selected icons?
Also what did you do to lower fontweight of icons? At a new staging website I can't change it. I need your code? Where did you put what?
I put css in customize -> custom css.
Well right now on customize page error appearing : https://prnt.sc/jBbBxlZTVhKj
need ftp of this staging to check what is wrong ?
Please increase your php memory limit to 256MB
It's already 256MB.... I think
I added these lines, and now it works. Can you explain why it was needed to increase? For what?
define('WP_MEMORY_LIMIT', '512M');
define('WP_MAX_MEMORY_LIMIT', '512M');
Thanks!
well there some modules loading in customizer that needs more php memory causing this issue .
increasing php memory to 512 MB is fine
I just did. My hosting says I need a different plan for 512MB, but would the code work as well?
define('WP_MEMORY_LIMIT', '512M');
define('WP_MAX_MEMORY_LIMIT', '512M');
Well no then it will not work .
You can choose memory limit to be 256b , that should fix your issue in customizer .
also you site is in staging when yo go lie you maybe able to put 512Mb as memory limit (confirm wit h webhost)
We can close. Thanks!