Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.


Configure homepage top task icons

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

This task is for users with the following roles: OC Site Designer.

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 need to be configured first. We recommend that only users with front-end developer experience undertake this task.

the top task tab with icons

There are two ways to use an icon with the homepage top tasks; you can either upload them directly to the Files Library and add them to the OC Top Task page or upload a sprite sheet to your theme for multiple icons.

To use a sprite sheet effectively, there are several steps you need to take. You'll also need to create your sprite sheet first; we recommend using a .svg file for your sprite sheet.

  1. With your sprite sheet created, you'll first need to upload it to the Files tab of your theme.
  2. Then, go to More > Site Management > your site > Settings > Homepage. Under Top task icons, you'll see a list of any icons you already have for homepage top tasks. Add the name of each new icon in the Enter new icon field, then select Add.
    icon names in site management
  3. Select Save Settings and Save. These icon names will appear in your Theme Builder and the Select task icon dropdown menu of OC Top Task pages.
  4. However, before you can use them on pages, you need to specify which icon in your sprite sheet they're referring to. Go to More > Themes Management > your theme > Styles > Top tasks - Homepage.
  5. In the Icon section, choose your sprite sheet in the Primary sprite sheet dropdown 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.
  6. Scroll down, and you'll see the list of icon names you established in the Homepage Site Management settings. You need to specify the coordinates of each icon in the sprite sheet.
    icons with coordinates in the theme builder
  7. 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:

What else?

Was this article helpful?
0 out of 1 found this helpful