Add style configuration

To create a portal styling different from your default styling supply a styling name in the Enter a name input field and click on the Add button. The new style configuration will become visible in the Style Configurations table above.

Remove a Style Configuration

In the Style Configurations table click on the Remove action at the end of the style configuration row you wish to delete. The configuration is removed without further questions.

Edit a Style Configuration

In the Style Configurations table click on the row with the style configuration you wish to edit. The styling configuration page opens.

Top Section

Change the name of the style configuration by overwriting the value in the name input field. Click on Save to store the changed name.

To make your style configuration the default style set the Default checkbox. Click on Save to store the change.

Settings Section

In the Settings section you have different tabs for changing the styles with colors, shapes, fonts, a logo and by applying the styling to Zuora's hosted payment page (HPP). If you change styles on one tab you need to Save your changes before switching to a different tab.

Colors

To overwrite the default coloring of Subscription Suite portals configure the color of the respective element. Enter either the hexadecimal value into the # fields (like # "B0D300") or the decimal values for Red, Green and Blue (like R "176" G "211" B "0").

• Primary: Changes the color of text, headlines and labels.
• Accent: Changes the color of buttons, progress bars and links.
• Body Background: Changes the background color of the page.
• Light Content Box: Changes the color of light boxes used to structure content.
• Dark Content Box: Changes the color of dark boxes used to structure content.
• Dark Content box - Text: As Primary text is probably visible in light content boxes but not in dark content boxes you can color the text of dark content boxes separately.
• Light Box Border: Changes the color of light box borders.
• Base Borders: Changes the border color of input fields and the color of separators.
• Error Messages: Changes the error message color.

Click on Save to update the views of your Subscription Suite portal(s).

 ❗ If you have a portal of the Subscription Suite already open please don't forget to reload it. Otherwise, your changes (after clicking on Save) will not be visible.

Shapes

Change the Border Size and Border Radius of Boxes, Buttons and Input Fields by adjusting the respective slider or putting in the required value in pixels.

Click on Save to update the views of your Subscription Suite portal(s).

❗ If you have a portal of the Subscription Suite already open please don't forget to reload it. Otherwise, your changes (after clicking on Save) will not be visible.

Fonts

Change the fonts of headlines, labels, input fields, tables, buttons, links, checkboxes and radio buttons. Select the respective Typeface, Weight (Light, Regular, Bold) and conversion. Regular doesn't change the respective text, Uppercase turns the specified text into all uppercase letters. 

Click on Save to update the views of your Subscription Suite portal(s).

❗ If you have a portal of the Subscription Suite already open please don't forget to reload it. Otherwise, your changes (after clicking on Save) will not be visible.

Logo

Upload your company's logo image file to have it displayed in the Subscription Suite portals. The image will not be sized or cropped, it will be used "as is".

❗ If you have a portal of the Subscription Suite already open please don't forget to reload it. Otherwise, your logo change will not be visible.

HPP (Hosted Payment Page)

After making your configurations under Colors, Shapes, Fonts and Logo go to this HPP (Hosted Payment Page) tab. Select the full content of the CSS code box and copy it. Go to Zuora > User Menu > Payments > Setup Hosted Pages.

On Hosted Pages go to Page List and click on [Edit] for the respective hosted page you wish to visually update.

On the specific configuration page for the selected Hosted Page scroll down to the CSS text area, select all of its content and replace it with the content you copied from the Admin Portal (see above). Click on generate and save page.

❗ If you have a payment page of the Subscription Suite already open please don't forget to reload it. Otherwise, your changes (after clicking on Save in Zuora) will not be visible.