NOTE: View the New Admin Experience version of this process.
Badge management is accomplished from the Tools section of the Admin interface. To access the Admin interface:
- Click Admin in the Webmaster Links menu.
- Click Admin.
Manage Ribbon Categories
Navigate to Tools > Ribbon Categories to create categories to organize your badges into groups.
The other benefit to organizing your badges into categories is the Digital Ribbons and Badges widget can be configured to only show badges of a specific category, giving you control over which badges are displayed to your users on a given page.
To create a category, click Add New Ribbon Category, give it a name, and click Save. All created categories are selectable when creating new badges.
Navigate to Tools > Digital Ribbons to manage your badges. In addition to editing or deleting any existing badges, you can:
- Manage your badge images
- Create a badge
Manage badge images
Click Manage Ribbon Background Images. On the resulting page:
- Here at the top, you can upload new images to use with your badges. These are selectable when creating or editing a badge.
- Down below, you can select any existing badge to update its name and/or image.
NOTE: The recommended size for badges is 250px wide by 40px tall; the recommended size for badges is 250px wide by 200px tall. Images larger than these dimensions will be re-sized.
Supported file types include: JPG, PNG, and GIF.
Create a badge
Click Add New Ribbon. On the resulting page, there are a number of settings to configure. As you do so, the Preview area on the right updates your badge’s size, text, color, and text alignment in real-time, making it easy to get everything just right as you work.
|Ribbon Image||Select the desired badge image from this menu.
The available images are pulled from the Manage badge Background Images area.
The recommended size for badges is 250px wide by 40px tall; the recommended size for Badges is 250px wide by 200px tall. Images larger than these dimensions will be re-sized.
|Ribbon Name||Give the badge a name appropriate for its purpose. This name is only seen by admins, and can differ from the text displayed to users.|
|Ribbon Height / Width||The image's height and width, in pixels. Use these two settings to adjust your badge image, as needed, especially to accommodate any text.|
|Ribbon Text||Any text entered here is displayed on top of the image. This field is often left blank if a badge's image has text.|
|Text Offset||This controls the text's vertical alignment. Depending on the size of a badge's image, you'll want to adjust this number until the text is centered.|
|Font||Select the desired font type from this menu.|
|Font Size||Select the desired font size, in pixels, from this menu.|
|Font Color||This field only displays the hex code for the current font color. To update it, you need to use the Color Wheel to select a color and shade.|
|Description||Describe your badge here. This text displays to users when hovering over the badge on their profile, and is a great way to explain how a badge can be earned if set to Attainable.|
|Show as an attainable achievement||Controls whether a badge is Attainable or not.
badges set to Attainable are opaquely displayed on the profiles of users who have not yet earned them, and is a great way to give users a preview of the badges they can achieve.
Whether Attainable badges are shown is also a configurable setting for the Digital Ribbons and Badges widget.
|Category||Group the badge into a category, if desired. The available categories are pulled from the Tools > Ribbon Categories page.
The Digital Ribbons and Badges widget can be configured to only show badges of a specific category, giving you control over which badges are displayed to your users on a given page.
|Sort Order||The Sort Order is important because it determines the order badges appear on a user’s profile. Badges are listed from lowest to highest, so you’ll generally want to set your most important badges lower so they appear above the others.|
|URL (if clicked)||If you want users taken to a website when the badge is clicked, enter its URL here. This is often used to take users to a page explaining what a badge is and, for attainable badges, to explain how to earn them.
Enter URLs in the format: http://www.examplewebsite.com
Links are opened in a new tab.