Buddypress profile tab icon change and tabs alligning

Hello.

I want to customize my buddypress profiles. The goal is to find a way how to change tab icons with custom ones and to allign tabs bar to the centre of the page.

I fount this (http://seventhqueen.com/support/kleo/article/changing-section-icons-in-profiles-and-groups#link_tab-iconids) guide for tab icons changing but i faced 2 issues:
- My config,json file was here "wp-content/themes/kleo/assets/font/config.json" not here "wp-content/themes/kleo/assets/css". Is it the same file?
- Using http://fontello.com/ how do I add custom icons and insert them into my site?

And if somebody knows easier way to do it please also mention it because this one is still a bit confusing for me. Also the alligning part I have no idea about it how to change that so please write about it too.

  • Predrag Dubajic

    Hey Pedro,

    Hope you're doing well today :slight_smile:

    I'm not that familiar with Kleo theme so this question might be best for their support team but I'll try helping here as well.

    - My config,json file was here "wp-content/themes/kleo/assets/font/config.json" not here "wp-content/themes/kleo/assets/css". Is it the same file?

    It's possible that they changed folder structure in one of the updates but didn't update documentation so it's possible that that's the correct file.

    As far as I know uploading this file will only show you all fonts included in their pack and which codes are needed to use those fonts.
    If you want additional icons that are not included in their pack you'll need to create new one and import it to your theme.

    - Using http://fontello.com/ how do I add custom icons and insert them into my site?

    You can find more info about using fontello here:
    https://github.com/fontello/fontello/wiki/Help

    As for profile field centering, this CSS should do the trick:

    #buddypress div#item-nav ul li {
        float: none!important;
        display: inline-block;
    }

    If your theme doesn't have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Pedro,

    You should be able to that with some CSS code, I will paste the code that should work and all you need to do is replace placeholders with correct image URL's and that should be it.

    #buddypress div#item-nav ul #xprofile-personal-lia:before,
    #buddypress div#item-nav ul #notifications-personal-lia:before,
    #buddypress div#item-nav ul #messages-personal-lia:before,
    #buddypress div#item-nav ul #friends-personal-lia:before,
    #buddypress div#item-nav ul #groups-personal-lia:before,
    #buddypress div#item-nav ul #forums-personal-lia:before,
    #buddypress div#item-nav ul #media-personal-lia:before,
    #buddypress div#item-nav ul #settings-personal-lia:before,
    #buddypress div#item-nav ul #activity-personal-li a:before {
        color: rgba(0, 0, 0, 0);
        background-repeat: no-repeat;
        background-position: center;
    }
    
    #buddypress div#item-nav ul #activity-personal-li a:before {
        background-image: url("ACTIVITY_IMAGE_URL");
    }
    
    #buddypress div#item-nav ul #xprofile-personal-li {
        background-image: url("PROFILE_IMAGE_URL");
    }
    
    #buddypress div#item-nav ul #notifications-personal-li {
        background-image: url("NOTIFICATIONS_IMAGE_URL");
    }
    
    #buddypress div#item-nav ul #messages-personal-li {
        background-image: url("MESSAGES_IMAGE_URL");
    }
    
    #buddypress div#item-nav ul #friends-personal-li {
        background-image: url("FRIENDS_IMAGE_URL");
    }
    
    #buddypress div#item-nav ul #groups-personal-li {
        background-image: url("GROUPS_IMAGE_URL");
    }
    
    #buddypress div#item-nav ul #forums-personal-li {
        background-image: url("FORUMS_IMAGE_URL");
    }
    
    #buddypress div#item-nav ul #media-personal-li {
        background-image: url("MEDIA_IMAGE_URL");
    }   
    
    #buddypress div#item-nav ul #settings-personal-li {
        background-image: url("SETTINGS_IMAGE_URL");
    }

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Pedro,

    Apologies for the delay here, we're experiencing higher number of questions than usual and we're doing our best to get back to everyone.

    Do you know any custom css for removing buddypress profile tabs? I want to remove groups, notifications and forums from showing but to leave its functionality.

    We should be able to hide those for you, do you want to remove those from profile page or from dropdown menu?

    Also may be you know a way to replace buddypress'es messaging system with some chat system (like the one on facebook)?

    You can check out our Chat plugin, it doesn't replace the BP messaging system but it can work beside it.

    If you have a minute can you please also give some feedback on how site works? Was it ok from your side?

    From the quick look everything seems fine and snappy there.
    I would suggest starting new thread in our Members forum as there are usually people there happy to give it a swirl and share their thoughts, just be ready to take some critique :wink:
    https://premium.wpmudev.org/forums/forum/members

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.