STEP 7: Add/Change Colors in Value Collaborator
Previous - Add a Simple Table in Value Collaborator
Overview
You can select the color of your choice for styling the Prototype page, tables, and charts.
Step-by-Step Guide
Prototype
Follow the steps to Add a Simple Table in Value Collaborator.
- Click Styles. It expands to show the various styling options.
- Click the color box to change the background color of the top navigation. If you want a particular color, you can choose the color from the Color Picker or provide the Hex color code or RGBA color code.
- Click Save on the top navigation and then click Prototype.
- The Top Navigation Background Color changes to the selected color.
- Select the color of your choice to change the Side Navigation Background Color.
- Change the Panel Heading Color to change the heading color of the Panel.
- Select a color of your choice to change the Background Color.
- Select a color of your choice to change the Panel Background Color.
- Select the color of your choice to change the Font Hover Color.
- Select a color of your choice to change the Input Variable Font Color.
- Select a color of your choice to change the Top Navigation Font Color.
- Select a color of your choice to change the Side Navigation Font Color.
- Select a color of your choice to change the Label Font Color. Here label refers to the titles added to the table.
- Select a color of your choice to change the Output Variable Font Color.
- Select a color of your choice to change the Tooltip Color.
- Select a color of your choice to change the Table Border Color.
- Select a color of your choice to change the Live Toggle Color. The Live Toggle button is seen when a Visualizer is created in the Sales Dashboard.
- Select a color of your choice to change the Test Toggle Color. The Test Toggle button is seen when a Visualizer is created in the Sales Dashboard.
Note:
The Styles section also allows you to change the font, font size, font weight of top navigation, side navigation, input/output panels, labels, input/output variables, and tooltips.
You can also modify table row padding, table border thickness, input field width, and input field height.
- The Override toggle button automatically becomes activated when the color is changed. If for some reason, it doesn't get activated automatically, you need to change it manually. Otherwise, the colors would not change.
Tables
- Click Table on the Value Collaborator page.
Click the color box to change the color.
- Click the Save button on the top navigation and then click Prototype.
- Select a color of your choice to change the Header Background color.
- Select a color of your choice to change the Odd Row Background color.
Select a color of your choice to change the Even Row Background color.
- Hover the mouse on the first column and click the Style icon.
- Select a color to change the Table Title Text Color of the particular column.
- Select a color of your choice to change the color of the Column Background.
- Hover the mouse on a row and click the Style icon. Click the color box to change the Font Color of the particular row.
- The font color of the particular row changes to the color of your choice.
- Select a color of your choice to change the Row Background color. The background color of the particular row only changes.
Charts
- Follow the steps to Add Charts in Value Collaborator.
- Click the color box to select a color of your choice for the variables and labels.
- When complete, click Create and the chart will appear on the Prototype page.