Changing the Order of the Icons in Profiles and Group

[ppl]

Changing the Order of Group Icons

Great Article for Changing the icons. How can I change the order of these icons in the list and well as the colours.

https://archived.seventhqueen.com/kb/changing-section-icons-in-profiles-and-groups

Much appreciated.

[Kieran_SQ]

Hi,

The easiest way to change the order of profile and group tabs is to use a plugin. You may wish to try this free plugin to achieve that https://www.buddyboss.com/purchase/buddypress-reorder-tabs/.

If you’re comfortable coding PHP then you can rework this code (make sure to account for all tabs from custom plugins etc)

COPY CODE

/**
 * Reorder BuddyPress profile tabs/navigation.
 */
function buddydev_reorder_buddypress_profile_tabs() {
    $nav = buddypress()->members->nav;
 
    // it's a map of nav items for user profile.
    // mapping component slug to their position.
    $nav_items = array(
        'settings' => 10, // first.
        'activity' => 20,
        'friends'  => 30,
        'groups'   => 40,
        'blogs'    => 50,
        'messages' => 60,
        'profile'  => 70,
    );
 
    foreach ( $nav_items as $nav_item => $position ) {
        $nav->edit_nav( array( 'position' => $position ), $nav_item );
    }
}
add_action( 'bp_setup_nav', 'buddydev_reorder_buddypress_profile_tabs', 999 );

Reference https://buddydev.com/reordering-buddypress-user-profile-tabs/

With regards to colors you can follow the tutorial (step 1) you linked to but assign a color value at the same time, for example:

COPY CODE

#buddypress div#item-nav ul #groups-personal-li a:before {
    content: "e995";
    color: red;
}

This will change the color of the groups icon on the profile page to red. I have attached a screenshot of the particular element you need to select in the browser console (F12) to generate the CSS you need.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[Author]

Posts