Configuring Theme Elements

You can customize the appearance of buttons, cards, search bar, and input fields that appear on the portals. The Theme Elements section lets you control the shape, corner radius, and color settings for each UI element. Changes are reflected simultaneously in the live preview while you work in the theme workspace.

To configure theme elements:

1. In the Navigation Menu, browse to Publishing > Themes.

2. On the Themes page, navigate to the Custom Themes section and select the Edit button next to the theme you want to customize.

3. In the Themes workspace, navigate to Global > Theme Elements and select the Expand button.

4. The Theme Elements section displays the following UI elements. Select the Edit icon next to an element to configure it:

   • Primary Button
   • Secondary Button
   • Input Field
   • Cards
   • Search Bar

5. After configuring the desired theme elements, click the Save button to retain your changes.

6. Click Publish to make the updated theme available on the portal.

Primary Button

The Primary Button settings let you customize the shape and colors of the main action button on the portal.

To configure the primary button:

1. Select the Edit icon next to Primary Button.

2. Under Shape, select one of the following options:

   • Rectangle: Applies a square-cornered shape to the button.
   • Rounded: Applies a moderately rounded shape to the button.
   • Pill: Applies a fully rounded, pill-shaped appearance to the button.

3. Optionally, select Custom Corners to set a specific corner radius value in pixels. You can set individual corner radii using the four corner fields displayed.

4. Configure the following color settings:

   • Background Color: Sets the fill color of the button for light and dark modes.
   • Border Color: Sets the outline color of the button for light and dark modes.
   • Text Color: Sets the color of the button label text for light and dark modes.

5. Select the Back button to return to the Theme Elements list.

Secondary Button

The Secondary Button settings let you customize the shape and colors of the secondary action button on the portal.

To configure the secondary button:

1. Select the Edit icon next to Secondary Button.

2. Under Shape, select one of the following options:

   • Rectangle: Applies a square-cornered shape to the button.
   • Rounded: Applies a moderately rounded shape to the button.
   • Pill: Applies a fully rounded, pill-shaped appearance to the button.

3. Optionally, select Custom Corners to set a specific corner radius value in pixels. You can set individual corner radii using the four corner fields displayed.

4. Configure the following color settings:

   • Background Color: Sets the fill color of the button for light and dark modes.
   • Border Color: Sets the outline color of the button for light and dark modes.
   • Text Color: Sets the color of the button label text for light and dark modes.

5. Select the Back button to return to the Theme Elements list.

Input Field

The Input Field settings let you adjust the corner radius of text input fields on the portal.

To configure the input field:

1. Select the Edit icon next to Input Field.

2. In the Corner Radius field, enter a value in pixels to set the overall corner rounding of the input field.

3. Optionally, expand the individual corner fields to set a different radius for each corner of the input field.

4. Select the Back button to return to the Theme Elements list.

Cards

The Cards settings let you adjust the corner radius of content cards displayed on the portal.

To configure cards:

1. Select the Edit icon next to Cards.

2. In the Corner Radius field, enter a value in pixels to set the overall corner rounding of the cards.

3. Optionally, expand the individual corner fields to set a different radius for each corner of the card.

4. Select the Back button to return to the Theme Elements list.

Search Bar

The Search Bar settings let you customize the shape, corner radius, and colors of the search bar on the portal.

To configure the search bar:

1. Select the Edit icon next to Search Bar.

2. Under Shape, select one of the following options:

   • Rectangle: Applies a square-cornered shape to the search bar.
   • Rounded: Applies a moderately rounded shape to the search bar.
   • Pill: Applies a fully rounded, pill-shaped appearance to the search bar.

3. Optionally, select Custom Corners to set a specific corner radius value in pixels. You can set individual corner radii using the four corner fields displayed.

4. Configure the following color settings:

   • Background Color: Sets the fill color of the search bar for light and dark modes.
   • Border Color: Sets the outline color of the search bar for light and dark modes.
   • Text Color: Sets the color of the placeholder and input text for light and dark modes.

5. Select the Back button to return to the Theme Elements list.