Okay
  Public Ticket #3113211
course unit icons
Closed

Comments

  •  12
    MeesterGijs started the conversation

    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

  •  390
    Ripul replied

    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.

    add_filter('wplms_get_element_icon',function($icon,$type){
      switch($type){
            case 'slides':
                $icon = 'vicon vicon-layout-slider';
            break;
            case 'audio':
                $icon = 'vicon vicon-microphone';
            break;
            case 'video':
                $icon = 'vicon vicon-video-camera';
            break;
            case 'multimedia':
                $icon = 'vicon vicon-video-clapper';
            break;
            case 'textarea':
                $icon = 'vicon vicon-text';
            break;
            case 'upload':
                $icon = 'vicon vicon-upload';
            break;
            case 'dynamic':
              $icon = 'vicon vicon-control-shuffle';
            break;
            case 'static':
              $icon = 'vicon vicon-exchange-vertical';
            break;
            default:
                $icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
            break;        
        }
        return $icon;
    });
    

    Similarly you can do for all other cases as slides, audio, etc.

    Let me know if you need further help.

  •  12
    MeesterGijs replied

    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

  • [deleted] replied

    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);

  •  12
    MeesterGijs replied

    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

  • [deleted] replied

    fixed video units but currentl[y we are checking if can do this on course status as well.

  •  12
    MeesterGijs replied

    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

  •  390
    Ripul replied

    The same function works for course curriculum;

    add_filter('wplms_get_element_icon',function($icon,$type){ 
        if(empty($type) || $type == 'general'){ 
    $icon = 'YOUR SVG ICON CODE'; } return $icon; },10,2);
    

    https://prnt.sc/QL_SgSgSnBXF

  •  12
    MeesterGijs replied

    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

  • [deleted] replied

    9706405170.gif

     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; });

  •  12
    MeesterGijs replied

    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

  • [deleted] replied

    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);


  •  12
    MeesterGijs replied

    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....

  • [deleted] replied

    done

  •  12
    MeesterGijs replied

    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.

  • [deleted] replied

    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;
    }


  •  12
    MeesterGijs replied

    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?

  • [deleted] replied

    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 ?


  •   MeesterGijs replied privately
  • [deleted] replied

    Please increase your php memory limit to 256MB 

  •  12
    MeesterGijs replied

    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!

  • [deleted] replied

    well there some modules loading in customizer that needs more php memory causing this issue . 

    increasing php memory to 512 MB is fine 

  •  12
    MeesterGijs replied

    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');

  • [deleted] replied

    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)

  •  12
    MeesterGijs replied

    We can close. Thanks!