BuddyDev

Search

[Resolved] Moderation Tools – Report Button – Icon

  • Participant
    Level: Enlightened
    Posts: 41
    Mic on #21815

    Hello,

    Is it possible to replace the button text “report” with a font awesome icon?

    I’m using the BOSS template and it has a template override file called “entry.php” for controlling the comment and favorite icons that display underneath the activity. Is it possible to do something similar with the report button?

    I have several plugins that add buttons to this part of the activity feed such as: Moderation Tools(https://buddydev.com/plugins/buddypress-moderation-tools/), Activity Social Share(https://wbcomdesigns.com/downloads/buddypress-activity-social-share/) and Edit Activity(https://wordpress.org/plugins/buddypress-edit-activity/). They all seem to use text links instead of Font Awesome icons. Is it possible to override plugins like these in the same way you override templates?

    I can see the PHP files that create the links, but I can’t figure out how to replace the defaults with my own PHP code that writes an icon instead. What is the proper way of handling this? Do I just edit the plugin files directly? If I do that, then I lose my changes when I update the plugin which seems bad.

    I would appreciate some direction on how to customize plugins in general and your Moderation Tools specifically. Thank you very much!

    -Mic

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on #21817

    Hi Mic,
    Thank you for the topic.

    Since the icons are supplied by the theme, you are not seeing it for 3rd party plugins. It can be easily addded for the buttons from 3rd party plugins too.

    Please link me to the site and provide a guest account(subscriber) and I can help you with the css(Is the details same as shared in another thread?).

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 41
    Mic on #21819

    Yes, working on the same site I linked in the other thread.

    I was able to get the Social Share plugin styled by overriding the CSS with my own custom CSS. I was mostly wondering if there is a right or wrong way to do this.

    It seems like if you can latch onto the CSS that is the way to go. But for a lot of things I come across in other plugins it feels like I need to add <DIV> or change the layout more drastically. For those situations it seems like a template file is needed, but I don’t see template files for plugins that often.

    • This reply was modified 5 years, 7 months ago by Mic.
  • Participant
    Level: Enlightened
    Posts: 41
    Mic on #21822

    The Social Share plugin had a filter that I was able to put in my functions.php to replace the “share” text that was on the button. I used the filter and set the text to an empty string, now it displays just the icon.

    I am stumped on how to achieve that with your Moderation Tools plugin and the other Edit Activity plugin.

    I adjusted my CSS and was able to get the icon to display. I’m also able to override the padding and background color that was making the grey box around the text. I have temporarily made the text red instead of white so you can see the problem more clearly.

    It can be seen at this URL: https://animegirls.me/activity/
    I have made a screenshot: https://imgur.com/a/hLDDhaz

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on #21823

    Hi Mic,
    Thank you.

    1. Can you please disable the Share plugin temporarily. It has incorrect markup and is leading the report button to the next line(we are putting lower priority to show the report button as last. That makes the button affected by other plugin’s issues).

    Please do and I will share some css. It is simple.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 41
    Mic on #21824

    Sure, I appreciate the help. I have disabled the plugin for now.

    -Mic

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on #21827

    Thank you.

    We have two approaches.

    1. We can use a translation tool to replace ‘report’ with &nbsp; or space and it will work.
    2. Or we can filter the button markup and update it

    
    
    /**
     * Filter Moderation button for activity/comment.
     *
     * @param string $button button markup.
     * @param array  $args args.
     *
     * @return string
     */
    function bpmts_custom_button_filter( $button, $args ) {
    
    	if ( ! isset( $args['item_type'] ) || ! in_array( $args['item_type'], array( 'bp_activity', 'bp_acomment' ) ) ) {
    		return $button;
    	}
    	$label = '<span>' . __( 'Report', 'buddypress-moderation-tools' ) . '</span>';
    
    	$use_bp_button_markup = $args['use_wrapper'];
    	$wrapper_tag          = $args['wrapper_tag'];
    	ob_start();
    
    	?>
    	<a href="#" data-item-id="<?php echo esc_attr( $args['item_id'] ); ?>"
    	   data-item-type="<?php echo esc_attr( $args['item_type'] ); ?>"
    	   data-context="<?php echo esc_attr( $args['context'] ); ?>"
    	   data-context-id="<?php echo esc_attr( $args['context_id'] ); ?>"
    	   class="bpmts-report-button <?php echo $args['link_class']; ?>"><?php echo $label; ?></a>
    
    	<?php
    	$button = ob_get_clean();
    	if ( $use_bp_button_markup ) {
    		$button = "<{$wrapper_tag} class='bpmts-moderation-button-wrap bpmts-type-{$args['item_type']}-button generic-button {$args['wrapper_class']}'>{$button}</{$wrapper_tag}>";
    	}
    
    	return $button;
    }
    
    add_filter( 'bpmts_report_button', 'bpmts_custom_button_filter', 10, 2 );
    
    

    You may put it in your child theme or bp-custom.php and then use css to hide the span wrapping the text.

    That should do it. Please give it a try and let me know.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 41
    Mic on #21854

    Hey Brajesh,

    I like your option #2 solution. It worked really well.

    The other developer for the Edit Activity plugin suggested this bit of CSS code to hide the “Edit” text:

    #buddypress #activity-stream .buddyboss_edit_activity { 
         font-size: 0 !important;
    }

    While it does work, It seems a little “hackish” to me. Is there anything wrong with doing it this way?

    -Mic

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on #21855

    Hi Mic,
    Thank you.
    I am glad it worked.

    The solution seems good but it might not work in older browsers. That’s why I avoided suggesting it. You can use the same with moderation tools too.

    Make sure to set line-height:0 !important too to avoid white space issue.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 41
    Mic on #21857

    Awesome!

The topic ‘ [Resolved] Moderation Tools – Report Button – Icon’ is closed to new replies.

This topic is: resolved