This topic has 3 replies, 2 voices, and was last updated 9 years by sharmstr.

  • Author
  • #92718
     Paulo Sica
    Participant

    Hi,

    I’d like to know where do I chose which links appear on the profile menu (the one with the icons, my articles, media, etc)

    Also, how do I customize those labels and icons?

    #92809
     sharmstr
    Moderator

    The links are added or removed based on what you have enabled/installed. There isnt a configuration page to set those.

    Customizing the icons has been discussed several times. There’s even a sticky topic for it so please search before posting questions: https://archived.seventhqueen.com/forums/topic/change-buddypress-navigation-menu-icons

    Changing the labels is outlined in the buddypress codex: https://codex.buddypress.org/getting-started/customizing/customizing-labels-messages-and-urls/

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

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

    #93462
     Paulo Sica
    Participant

    Hi, the first link you sent me hasn’t been found (error 404)
    Can you check that out, please?
    By the way, if some information is so relevant it’s been discussed several times, shouldn’t it be included in the documentation?
    Also, the translation part of the documentation is outdated, you suggest Codestyling Localization that plugin is not supported anymore.

    #93464
     sharmstr
    Moderator

    None of that is up to me. I’m a user like you that’s been made a moderator here. I’ll forward on to the developers.

    I’m not getting a 404 on that topic. In any case, here’s the contents

    Fist thing, Kleo uses Fontello for Vector icons.

    To see the icons that are included follow the next steps:
    1. Go to http://fontello.com/
    2. Click on the litte tool icon at top and Import
    3. Go to the theme main downloaded package from Themeforest in Assets/Fontello and select the font-icons.json
    4. Now you’ll see all the icons that are available with a rounded border.

    All the icons are added by CSS, so you need to add some CSS rules to change the default icons defined by us.
    This is the default CSS for the icons:

    COPY CODE
    
    #buddypress div#item-nav ul #activity-personal-li a:before,
    #buddypress div#item-nav ul #home-groups-li a:before {
    	content: "\e8ed";
    }
    #buddypress div#item-nav ul #xprofile-personal-li a:before {
    	content: "\e98e";
    }
    #buddypress div#item-nav ul #notifications-personal-li a:before {
    	content: "\e863";
    }
    #buddypress div#item-nav ul #messages-personal-li a:before {
    	content: "\e98c";
    }
    #buddypress div#item-nav ul #friends-personal-li a:before {
    	content: "\e98f";
    }
    #buddypress div#item-nav ul #groups-personal-li a:before {
    	content: "\e995";
    }
    #buddypress div#item-nav ul #forums-personal-li a:before,
    #buddypress div#item-nav ul #nav-forum-groups-li a:before {
    	content: "\e97b";
    }
    #buddypress div#item-nav ul #buddydrive-personal-li a:before,
    #buddypress div#item-nav ul #nav-buddydrive-groups-li a:before {
    	content: "\e8d7";
    }
    #buddypress div#item-nav ul #media-personal-li a:before,
    #buddypress div#item-nav ul #rtmedia-media-nav-groups-li a:before {
    	content: "\e8c5";
    }
    #buddypress div#item-nav ul #settings-personal-li a:before,
    #buddypress div#item-nav ul #admin-groups-li a:before {
    	content: "\e98b";
    }
    #buddypress div#item-nav ul li.dropdown a:before {
    	content: "\e97c";
    }
    #buddypress div#item-nav ul #members-groups-li a:before {
    	content: "\e995";
    }
    #buddypress div#item-nav ul #invite-groups-li a:before {
    	content: "\e991";
    }
    #buddypress div#item-nav ul #achievements-personal-li a:before {
    	content: "\e996";
    }
    #buddypress div#item-nav ul #blogs-personal-li a:before {
    	content: "\e802";
    }
    #buddypress div#item-nav ul #articles-personal-li a:before {
    	content: "\e870";
    }
    

    To override an icon, lets say the Activity icon:
    – we identify it from list above and copy the code
    – go to Fontello and get the code for your new icon by going to the Customize codes tab
    – change the copied text with the new value
    – add this CSS to your child theme/style.css
    Example to replace the Activity icon with a heart icon:

    COPY CODE
    
    #buddypress div#item-nav ul #activity-personal-li a:before {
    	content: "\E80F";
    }
    
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?