Adding Visual Tree Icons

Learning Experience Team

November 05, 2019 18:16

Although the Branding page is mainly for adding your company colors and logos, you can also edit the rank icons that appear in the Web Office Visual Tree.

What Are Visual Tree Icons?

You can upload SVG icons for each Rank and Associate Type. These icons will replace the generic profile shadow image in the Visual Tree for all Tree members.

If there aren't icons uploaded for a certain Rank, it will default to the Visual Tree Associate Type icons.

Creating SVG Icons

The Visual Tree uses SVGs for icons and can be a little tricky to create as they combine visual designing and coding.

Programs that can create SVGs:

Adobe Illustrator is the preferred program for creating SVGs.
Sketch is also a great program that makes clean SVGs.
While Adobe Photoshop can create SVGs, it’s not ideal as it’s not a vector-based program.

In Adobe Illustrator

Use simple shapes to create your icons.
Convert all text to paths (Type > Create Outlines (SHIFT+CTRL+O)
If you are using filters, use the SVG Filters found on the Effects menu.
Simplify your paths as the last step before saving (Object > Path > Simplify…).
Use unique naming for your layers and artboards; this is important to ensure the styles do not override each other on the tree.
When saving as an SVG, use the Presentation Attributes on your Advanced CSS Properties.

Uploading Icons

Admin: Web Office Admin
Page: Web Office Configuration > Branding
URL: [CLIENTID].admin.directscale.com/#/Branding
Permission: Branding

The Visual Tree Icon background color cannot be configured and is white by default. Because of this, white icons may not be visible unless they contain a heavy shadow or outline.

In the Icons section, hover your mouse over a rank and click the icon.

Your computer’s file finder opens.
Navigate to your image’s saved location on your computer and click Open.

Images must be an SVG file.
Your icon is uploaded. Repeat for each rank tile.