On profile and group pages, you’ll see icon bars like the one shown above. You can change these icons to anything you want, here’s how…
1: CSS IDs
Start by finding the CSS selector for the icon you want to change. You will need the id of the <li > element associated with the icon. On profile pages it will end with “-personal-li” and on group pages it will end with “-groups-li”. The easiest way to do this is to install Google Chrome web browser, and then right-click on the icon you want to change and choose “Inspect Element” you’ll see something like this:
2: Icon IDs
In your WordPress installation folder, navigate to: wp-content/themes/kleo/assets/font and find the config.json file. Go to fontello.com and from the tools menu, choose Import:
When prompted, upload your config.json file and the fontello website will highlight all the icons that KLEO provides. Next, click on the Customise Codes tab and you’ll see a list of the icons with their unique codes below them.
Find the icon you want to use and write down it’s code (the code always starts with “E”).
3: Write CSS
The format of your CSS will be slightly different depending on whether you’re changing a profile icon or a group icon. In the example below, I’m changing the LOCATION icon for both profile (location-personal-li) and group (nav-gmw-group-location-groups-li) pages to icon number E868 (a map pin).
/* Profiles: LOCATION icon */
#buddypress div#item-nav ul #location-personal-li a:before { content: "\E868"; }
/* Groups: LOCATION icon */
#buddypress div#item-nav ul #nav-gmw-group-location-groups-li a:before { content: "\E868"; }
Note how there’s a # in front of the icon id, and a \ in front of the icon code.
4: Add CSS
Important: Make sure that Kleo Child is the active theme (in Appearance > Themes) first!!
In the WordPress admin area, go in to Appearance > Editor and edit the Kleo Child: Stylesheet (style.css) – it looks like this:
/*
Theme Name: Kleo Child
Theme URI:
Description: Child theme for Kleo
Author: SeventhQueen
Author URI: http://seventhqueen.com
Template: kleo
Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-menu, featured-images, post-formats, sticky-post, translation-ready
License: GNU General Public License
License URI: license.txt
*/
/*
* Please add your custom styles below
*/
Add in the CSS code you made earlier and save it.
5: Test
After clearing your browser cache, go into the front end and refresh the profile or group page to check it’s working. If it’s not working, common mistakes include:
- Forgetting to put the # in front of the icon id or mistyping the id
- Forgetting to put the \ in front of the icon code
If you need help, please ask in our support forums.
6: Common ID’s
Common profile item id’s:
- ACTIVITY: activity-personal-li
- PROFILE: xprofile-personal-li
- NOTIFICATIONS: notifications-personal-li
- MESSAGES: messages-personal-li
- FRIENDS: friends-personal-li
- FOLLOWING: members-following-personal-li (BuddyPress Follow plugin)
- FOLLOWERS: members-followers-personal-li (BuddyPress Follow plugin)
- GROUPS: groups-personal-li
- FORUMS: forums-personal-li
- LOCATION: location-personal-li (Geo my WP plugin)
- BUDDYDRIVE: buddydrive-personal-li (BuddyDrive plugin)
- DOCS: docs-personal-li (BuddyDocs plugin)
- SETTINGS: settings-personal-li
- MEDIA: media-personal-li (rtMedia plugin)
- MY ARTICLES: articles-personal-li (Social Articles plugin)
Common group item id’s:
- HOME: home-groups-li
- FORUM: nav-forum-groups-li (bbPress plugin)
- DOCS: nav-docs-groups-li (BuddyDocs plugin – if you rename the menu item in its settings, the id will change)
- MEMBERS: members-group-li
- GROUP TREE: nav-hierachy-groups-li (BP Group Hierarchy plugin – when link is active, the id changes to group-hierarchy-group-li so you’ll need to add both to your CSS)
- LOCATION: nav-gmw-group-location-groups-li (GMW Group Locator plugin)
- SEND INVITES: invite-groups-li
- EMAIL-OPTIONS: nav-notifications-groups-li (BuddyPress Group Email Subscription plugin)
