To style a Resource Center, you must first create one and include modules within it. For instructions, see Set up a Resource Center.
This article covers how to change the content of the home view of the Resource Center and the styling of the Resource Center container. For information about editing individual modules, see Overview of the Resource Center.
Step 1. Open the Resource Center in the Visual Design Studio
The Resource Center is customized in the Visual Design Studio. Following the instructions to open the your Resource Center in the Visual Design Studio. Save and exit the Visual Design Studio when your done. For more information about the Visual Design Studio, see Get started with Visual Design Studio.
- Go to Guides > Resource Center from the left-side menu in Pendo.
- Find and open your Resource Center from the table in the Resource Center page.
- From the Draft tab of your Resource Center's Settings page, select Manage in my app.
- This opens an Edit Home View window with two tabs: Content and Styling. Edit the content and styling of your Resource Center as required.
Step 2. Edit content
From the Content tab of the Edit Home View window, edit the following as needed.
- Resource Center title. This is the public-facing name of your Resource Center, seen by your visitors at the top of the Resource Center's home page. This is different from the internal name of the Resource Center that's visible in Guides > Resource Center, which is only visible to internal Pendo users.
- ARIA labels for the close button, Resource Center dialog box (menu), back button, and module titles.
- Module titles and subtitles.
Note: The internal name isn't the Resource Center's name published in the application. To change the internal name, find and open your Resource Center from the table in the Resource Center page, hover over the name of the Resource Center, and enter a new name.
Step 3. Edit styling
From the Styling tab of the Edit Home View window, edit the following as needed.
Container
From the Container section of the Styling tab, you can edit:
- The background color of all screens in the Resource Center, including the header.
- The dimensions (width and height) of the Resource Center. This applies to the total size of the Resource Center menu.
- Caret (›) color.
- Spacing (padding) of the home view of the Resource Center. Left and right padding are edited separately.
Header
From the Header section of the Styling tab, you can edit:
- The top and bottom borders of the Resource Center.
- Use the toggle to add or remove the top and bottom borders.
- Choose the color and weight of the top and bottom borders separately.
- Font properties of the Resource Center title:
- Alignment (left, middle, or right)
- Font family
- Weight
- Size
- Color
- Text transform (capitalization)
- Letter spacing
- Close button in the top-right corner of the Resource Center:
- Use the toggle to add or remove the close button.
- Choose the default color and hover color the close button.
- Edit the spacing (padding and margins) of the close button. Top, bottom, left and right padding and margins are edited separately.
Module section
From the Module section of the Styling tab, you can edit:
- The title and subtitle font properties of modules in the home view of the Resource Center:
- Font family
- Weight
- Size
- Color
- Text transform (capitalization)
- Letter spacing
- The color and weight of the section dividers between modules in the home view of the Resource Center.
- Spacing (padding) of the modules home view of the Resource Center. Top and bottom padding are edited separately.
Alert badge
The alert badge is the number inside a circle that overlaps the main badge icon for your Resource Center and that appears at the end of the row for each module that has notifications for the visitor.
From the Alert Badge section of the Styling tab, you can edit:
- The background color of the alert badge.
- The font properties of the number inside the alert badge:
- Font family
- Weight
- Color
If you want to change the location of the alert badge (to be top-left, top-right, bottom-left, or bottom-right of the badge icon), see Activate your Resource Center instead.