Network Charts

Chart Colors

The styling and colors of MLA charts can be easily customized with just a little CSS. Each node has two classes which can be targeted and represent the affiliate’s status and MLA roles. As seen below Johnny Depp’s node has the ‘active’ and ‘super_team_leader’ classes.

<div id="top" class="node active super_team_leader">

Available status classes are:

  • active
  • inactive
  • pending

Available role classes are:

  • team_leader
  • super_team_leader

By adding the following CSS to your theme’s style.css file and changing the the HEX values, colors can be easily changed to suit your theme.

/* Active */
.orgchart .active .title, 
.orgchart .active .second-menu .info-box-title {
  	background-color: #0E97C4!important;
}
.orgchart .active .content, 
.orgchart .active .second-menu {
	border-color: #0E97C4!important;
}

/* Team Leaders */
.orgchart .active.team_leader .title, 
.orgchart .active.team_leader .second-menu .info-box-title {
  	background-color: #7619B3!important;
}
.orgchart .active.team_leader .content, 
.orgchart .active.team_leader .second-menu {
  	border-color: #7619B3!important;
}

/* Super Team Leaders */
.orgchart .active.super_team_leader .title, 
.orgchart .active.super_team_leader .second-menu .info-box-title {
  	background-color: #7619B3!important;
}
.orgchart .active.super_team_leader .content, 
.orgchart .active.super_team_leader .second-menu {
  	border-color: #7619B3!important;
}

/* Inactive */
.orgchart .inactive .title, 
.orgchart .inactive .second-menu .info-box-title {
  	background-color: #B4B4B4!important;
}
.orgchart .inactive .content, 
.orgchart .inactive .second-menu {
  	border-color: #B4B4B4!important;
}

/* Pending */
.orgchart .pending .title,
.orgchart .pending .second-menu .info-box-title {
  	background-color: #B4B4B4!important;
}
.orgchart .pending .content, 
.orgchart .pending .second-menu {
  	border-color: #B4B4B4!important;
}

Information Displayed

The information displayed for each affiliate can also be easily customized. Some basic PHP knowledge will be beneficial but you can also copy & paste from the examples below.

All PHP code should be added to your theme’s ‘functions.php’ file.

By default each affiliate’s node displays their ID, status and all time earnings. With the help of a WordPress filter, an array of items can be passed to your custom function allowing you to remove items, add new items, or modify existing items.

Removing Items

// Remove the status from affiliate charts on the front end
function mla_custom_chart_info( $chart_info, $affiliate_id, $chart_location ) {
	
	if( $chart_location == 'front_end' ) :
	
        //unset( $chart_info['Affiliate ID'] );
        unset( $chart_info['Status'] );
        //unset( $chart_info['Earnings'] );
		
	endif;
	
	return $chart_info;
	
}
add_filter( 'mla_chart_node_info', 'mla_custom_chart_info', 10, 3);

Adding Items

// Add the affiliate's referral count to all charts
function mla_custom_chart_info( $chart_info, $affiliate_id, $chart_location ) {
	
	$chart_info['Referral Count'] = affwp_get_affiliate_referral_count( $affiliate_id );
	
	return $chart_info;
	
}
add_filter( 'mla_chart_node_info', 'mla_custom_chart_info', 10, 3);
// Add the affiliate's registration date (user reg) to all charts
function mla_custom_chart_info($chart_info, $affiliate_id, $chart_location) {

    $user_data = get_userdata(affwp_get_affiliate_user_id($affiliate_id));

    // Raw output
    $chart_info['Date'] = $user_data->user_registered;

    // Or change the date format:
    //$chart_info['Date'] =  date( "M Y", strtotime( $user_data->user_registered ) );

    return $chart_info;

}

add_filter('mla_chart_node_info', 'mla_custom_chart_info', 10, 3);

Combining multiple changes in one function

/*
Admin Area Changes
- Move Earnings to the top of the list
- Add Referral count below Earnings
- Change 'Affiliate ID' label to 'ID'

Front End Changes
- Remove the ID
*/
function mla_custom_chart_info( $chart_info, $affiliate_id, $chart_location ) {

	if( $chart_location == 'admin_area' ) :
	
		$admin_info = array();
		$admin_info['Earnings'] = $chart_info['Earnings'];
		$admin_info['Referrals'] = affwp_get_affiliate_referral_count( $affiliate_id );
		$admin_info['ID'] = $chart_info['Affiliate ID'];
		$admin_info['Status'] = $chart_info['Status'];
		
		return $admin_info;
		
	elseif( $chart_location == 'front_end' ) :
	
		unset( $chart_info['Affiliate ID'] );
		
		return $chart_info;
	
	endif;
	
}
add_filter( 'mla_chart_node_info', 'mla_custom_chart_info', 10, 3);
Was this helpful to you?