Canvas Guides

How do I customize the design of the Impact Support Center?

Admins can manage the Support Center design using the default theme, a custom theme, or their Canvas theme.

Note: When creating a customized button, there are 2 separate contexts, one for the default support button and one for the customized button you created. The customized button you created has a different template/context. If you expect a message to show up that is attached to the context of the default button, it will not show up because a new context is now available that isn't connected to that message.

Connect to Canvas Instance

Connect to your Canvas Instance through the Impact dashboard, click the Instance drop-down menu [1] and select the instance name [2]

Open Support

In Global Navigation, click the Support link.

Open Design

In the My Support Center page, click the Design link.

Select a Support Center to Edit

In the Support Center drop-down menu, select the Support Center you need to edit if you have more than one active support center.

Open Themes

To manage your theme, click the Expand icon [1].

To view the Support Center in the default theme, click the Default option [2].

To use your Canvas theme for the Support Center, click the Canvas Theme option [3].

To create a custom theme, click the Custom Theme option [4].

Note: If Canvas Theme and Custom Theme are not present, please submit a ticket to [email protected] to request customization.

Manage Custom Theme

In your theme design, you can use the following custom fields:

Header Background [1]: A background color for the header.
Header font color [2]: A color for the header text.
Top button [3]: A color of the buttons in the header.
Main area background [4]: A background color for the main area.
Main area font color [5]: A color for the main area text.
Links [6]: A color for links.
Content area background [7]: A background color for the content area.
Contact area font color [8]: A color for the contact area text.
Contact buttons [9]: A color for the contact buttons.
Footer background [10]: A background color for the footer.
Footer font color [11]: A color for the footer text.

Note: To see a style guide of what the button will look like with different designs, visit the Impact Support Center Button Style Guide.

Manage Custom Button

Custom Design Default

By default, the Custom design toggle is disabled to not interfere with existing custom set ups. If you choose to turn on custom design, it will override the existing custom set up and you will be able to create a new one.

Note: If you turn on custom design, you will always be able to go back to the previous design by switching the Custom design toggle.

Custom Button Design

In your button design, you can use the following custom fields:

Size [1]: Display size small or big.
Display type [2]: Display floating or sidebar button.
Alignment [3]: Display alignment left side, center, or right side.
Position [4]: Display position top, center, or bottom.
Button corners [5]: Change button corners appearance.
Colors [6]: A primary color and background color for the button
Button text [7]: Text when hovering over button.
Icon [8]: Display button with or without icon.
Icon Positioning [9]: Position the icon on the left or right side or the text when hovering.
Behaviour [10]: Create a static or draggable button.
Drag controls positioning [11]: Draggable button controls display on the left or right side.
Expandability [12]: Expandability display for button.

Preview Support Center Button

As you design your Support Center Button, you can preview the button settings, icon, and behavior you have selected to display.

Notes:

The preview of the default button style shown above may not be accurate if you have previously worked with the Impact team to customize your support button style. Switching to 'Custom Design' will override any previous support button styling that may have been implemented.
If you are using Blackboard Ultra or Ultra Courses then these button styling will not apply.

Save Changes

Click the Save changes button.

Refresh Canvas Instance

Go into your Canvas Instance and refresh to see the new changes in effect.

Note: Customizations might take more time than usual to load in your environment.