Changing Watershed's Colors to Match Your Brand

Watershed is a beautiful blue that looks as fantastic as it is useful. But what if you want to change the appearance of Watershed to match your brand? This guide walks you through how using the Appearance section of Settings.

Who can use this feature?
 User Types
Only Global Admins can access these features.
 Pricing 
Available on paid plans (AnalystCLO, and Enterprise).
 Expertise
Only expert users should use this feature.

 Heads up: Test all appearance changes in your Sandbox account first!

Accessing Appearance Settings

To access Appearance Settings, go to Appearance on the Settings menu: appearance.png

Appearance Settings has 4 main customization options: Organization Name, Organization Image, Custom Styling, and Custom Chart Colors.Screen_Shot_2018-02-12_at_3.18.00_PM.png

Organization Name

The first option, Organization Name, changes the name of your account:organization_name.png

The name of your account is primarily seen in the top right corner of Watershed (next to the Settings menu). In the example below, the Organization Name is set to "One True Demo"onetruedemo.png

Organization Image

The Organization Image option controls the main logo in all accounts:organization_image.png

By default, it's the Watershed logo, but to upload a your own organization's logo click the Upload Image button and follow the steps.

 Please note: The ideal logo file:

  • is a horizontally-oriented PNG file.
  • has a transparent background.
  • is 400 pixels wide.
  • is no more than 200 pixels tall.

Custom Styling

The Custom Styling option allows you to completely transform the appearance of Watershed.

To change the appearance of Watershed's interface, you can upload a watershed.less file that defines the colors to use.

Create this file in a text editor by copying and editting the example below then saving the file as watershed.less (or another filename with the .less extension). You should replace the Watershed default of six shades of blue with hexadecimal values from your brand palette. For example, saving and uploading the following code will turn Watershed pink as seen in the screenshot above!

@ws-blue-lighter: #fff;
@ws-blue-light: #ffb3e6;
@ws-blue: #ff00aa;
@ws-blue-dark: #800055;
@ws-blue-darker: #330022;
@wsLinkColor: #e60099;

Some places these colors are used include:

  • The lighter blue (@ws-blue-lighter) is used as the background for card summaries.
  • The light blue (@ws-blue-light) is used as the border for cards.
  • The blue (@ws-blue) is used as the background for card titles and at 70% opacity for card icons. 
  • The dark blue (@ws-blue-dark) is used as a background for the secondary navigation in the top right.
  • The darker blue (@ws-blue-darker) is shown as a highlight indicating the active tab on the menu.
  • The last line (@wsLinkColor) controls the color of links such as the card MORE link. 

lesskey.png

To upload a watershed.less file, click the Upload Less File button and find the file on your computer:upload_less.png

 Please note: Advanced users can also customize Watershed's five shades of gray using the @gray, @gray-light, @gray-lighter, @gray-dark and @gray-darker properties. It is not possible to customize other colors in the watershed.less file. See above for chart color customization.

Once the watershed.less file is uploaded, it will take some time for the changes to be reset in your browser’s cache. We recommend that you clear your browser’s cache, log out and back in, and then refresh your browser until you see the results.

Custom Chart Colors

The Custom Chart Colors option allows you to set the colors on Watershed's charts and graphs. Colors can be set at the organization, measure and card level.chart_colors.png

Setting Organization Chart Colors

The custom chart colors are controlled by adding hexadecimal values to the Custom Chart Colors text box. If the Custom Chart Colors box is empty, Watershed will use the default organization chart colors. First click Edit in the text box:clickeditchartcolors.png

In the box, inside the square brackets, enter a series of CSS color values and then click Save. The list of colors needs to be separated in commas. The example below is a list of 5 different shades of pink:

#ffb3e6, #ff00aa, #800055, #330022, #e60099

colorsuploaded.png

Once saved these colors will be previewed below and used as the default colors on cards.

To return chart colors to default, save the Custom Chart Colors text box with just square brackets.

 Please note: If a card uses more colors than those specified, it will default to the default Watershed colors once the specified colors have been used.

Setting Measure Colors

You can also assign colors to measures, so that the measure same color will be used for the measure in every card it appears on. This is done by editing the Color setting of the measure. The input box background will preview the color to be used for the measure.

image2.png

Setting Card Colors

Customization at the card level is done using the colors Advanced Configuration property. This includes a list of valid CSS colors to be used in reports. For example the code below is used to set the chart colors to red, blue and green.

"colors": [
  "red",
  "#00ff00",
  "rgb(0,0,255)"
]

 Please note: If colors are configured on a card that includes measures with configured colors, the card colors will be used rather than the measure colors.

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

Comments

0 comments

Please sign in to leave a comment.

If you can't find what you need or you want to ask a real person a question, please contact customer support.