gulf12

I have created a um_members_ribbons_hook action to display ribbons on member directory profiles.

function um_custom_ribbon_specific_directory( $column, $user_id ) {
    if ( $column == 'um_profile' ) {
        $directory_id = get_queried_object_id();
        if ( $directory_id == '3396' ) {
            echo '<span class="um-custom-ribbon">South</span>';
        } elseif ( $directory_id == '3397' ) {
            echo '<span class="um-custom-ribbon">North</span>';
        }
    }
}
add_action( 'um_members_ribbons_hook', 'um_custom_ribbon_specific_directory', 10, 2 );

and css customization

/* North */
.um-directory[data-directory-id="3396"] .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-photo-wrap:before {
    content: 'North'!important;
}

/* South */
.um-directory[data-directory-id="3397"] .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-photo-wrap:before {
    content: 'South' !important;
}

/* General ribbon */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-photo-wrap {
    position: relative !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-photo-wrap:before {
    content: attr(data-ribbon);
    position: absolute !important;
    top: 10px !important; /* adjust the distance from top as needed */
    left: 10px !important; /* adjust the distance from left as needed */
    padding: 3px 5px !important;
    background-color: #ff9900 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 3px !important;
    z-index: 1 !important;
}

This is not working maybe am missing something on CSS style

This what I have tried, but it is not working.

function um_custom_ribbon_specific_directory( $column, $user_id ) {
    if ( $column == 'um_profile' ) {
        $directory_id = 123; // Replace 123 with the ID of your specific member directory
        if ( um_is_core_page( 'member-directory', $directory_id ) ) {
            $ribbon = get_user_meta( $user_id, 'ribbon_field', true );
            if ( ! empty( $ribbon ) ) {
                echo '<span class="um-custom-ribbon">' . esc_html( $ribbon ) . '</span>';
            }
            $featured = get_user_meta( $user_id, 'featured_field', true );
            if ( $featured ) {
                echo '<span class="um-featured">Featured</span>';
            }
        }
    }
}
add_action( 'um_members_ribbons_hook', 'um_custom_ribbon_specific_directory', 10, 2 );

.um-custom-ribbon {
    position: absolute;
    top: 10px; /* adjust the distance from top as needed */
    left: 10px; /* adjust the distance from left as needed */
    padding: 3px 5px;
    background-color: #ff9900;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
}

.um-featured {
    position: absolute;
    top: 10px; /* adjust the distance from top as needed */
    right: 10px; /* adjust the distance from right as needed */
    padding: 3px 5px;
    background-color: #0088cc;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
}

• This reply was modified 3 years, 1 month ago by gulf12.

Its working fine. Thanks a lot.

I was exited only to realise that phone number was clickable with a hover but not click to call. I wanted a click to call action or call-able link.

Then to point out
1. Can I change colour of a specific field in meta tagline without hoover.
2. can I have a choices(text) selected in checkbox to link to a page on clicking.

It seems it was luck I only managed to update profile for one user

I have tried this code and still not working.

function my_um_ajax_get_members_data( $data_array, $user_id, $directory_data ) {
if ( $user_id == ‘123’ ) {
$data_array
[ ‘phone_mumber’ ] = ‘{phone_number}’;
}
return $data_array;
}

where do I the add code