This task is for users with the OC Site Designer role.
Your top tasks may be the first content your community sees on your homepage, so you want them to be prominent. Icons will make them more noticeable, but they must be configured first. We recommend that only users with front-end developer experience undertake this task.
There are two ways to use icons with the homepage top tasks:
- Upload them directly to the Files Library and add them to the OC Top Task page
- Upload a sprite sheet to your theme for multiple icons
To use a sprite sheet effectively, you'll need to create a sprite sheet; we recommend using an SVG file for your sprite sheet.
- Once you have created your sprite sheet, you must upload it to the Files tab of your theme.
- Then, go to More > Site Management > your site > Settings > Homepage. Under Top task icons, you'll see a list of icons you already have for homepage top tasks.
- Add the name of each new icon in the Enter new icon field, then select Add.
- Select Save Settings and Save. These icon names will appear in your Theme Builder and the Select task icon drop-down menu of OC Top Task pages.
- Before using them on pages, specify which icon they refer to in your sprite sheet. Go to More > Themes Management > your theme > Styles > Top tasks - Homepage.
- In the Icon section, choose your sprite sheet in the Primary sprite sheet drop-down menu, and then select a Fallback sprite sheet if you need one. Then specify the Sprite sheet size, the Width and Height of your icons, and the Margin and Padding.
- Scroll down to see the icon names you established in the Homepage Site Management settings. You need to specify the coordinates of each icon in the sprite sheet.
- Save and Publish your theme, then Apply it to your site if you need to.
Now that you have configured your top task icons in your theme, they will be available for you to select in the Select task icon of your OC Top Task pages.
This video will also take you through the ins and outs of adding top task icons: