Learn how to customize the user interface of your portal using branding images and styles.

1. Enter the installed Subscriber Portal instance and click the Look and Feel tab.
2. In the Portal Branding Images section, upload your company logos and other brand marketing images to help identify your portal. Logos and marketing images are customer-facing and will be displayed in the portal as indicated by the listed name. The recommended size for each image is displayed, and modifications to images may be required.
3. In the Override Default CSS section, edit or overwrite the default CSS to customize the portal with your branding. The aspects of the portal that can be customized include the size and shape of buttons, font style, color schemes of the headers and footers, and so on.

   • To edit CSS, click Default CSS to review the default CSS and use it as a template for any desired modifications.

   • To overwrite CSS, directly enter the desired CSS in the input box.

4. In the Dashboard Configuration section, configure the cards of the end user’s dashboard. Cards are different sections of information in the dashboard, for example, the account balance, invoice information, and the default payment method of an account. Each portal has 8 pre-configured cards that can be edited and you can create additional cards. Pre-configured cards cannot be deleted. The Card Title of the default cards are auto-populated and cannot be changed.

   • To configure the default dashboard cards:

     1. Enable the cards to be displayed in the portal.

     2. Click the icon to drag and drop the card tiles in the desired order to rearrange the display order of the cards. The first card will be displayed on the top left section of the page with the subsequent cards filling into the right until a new row is needed.

     3. Select the value in the Bootstrap Columns dropdown list for each card. The size of a card is determined by the selected number. The Bootstrap framework uses a grid system where 12 columns are evenly split across the UI and appropriately scale to the browser size. For more information, see Example of configuring bootstrap columns.

   • To create a new card, click + Add a custom card . A new card is created at the bottom of the Dashboard Configuration section.

     1. Enter the Card Title, select the Enable checkbox, and select the number in Bootstrap Columns for the new card.

     2. Click Configure . The Configure Custom Card dialog opens.

     3. Enter the Javascript code and Markup HTML code respectively. For more information, see Example of configuring custom panels.

     4. Click Done .

   • To configure additional dashboard details:

     1. Click Edit Carousel Links to upload marketing images that can be linked to the desired pages relevant to your company. Up to 6 images can be uploaded and all will be cycled through on the dashboard in the order that is listed. Note that if a card is enabled, the carousel will cycle through all of the images regardless of if they have been changed from the default. If you have only two images, it is recommended that you fill up all image placeholders by alternating two images to ensure no default images are displayed. If no hyperlink is associated with the image, the image will be displayed but it will not redirect to other pages when end users click the marketing images displayed in the portal dashboard. Up to 6 images can be uploaded.

     2. Click Edit Quicklinks to enter important links for your business. You can add up to 4 links.

5. In the Login and Site Entry page HTML section, enter the text to be displayed on the portal login page:

   • Subtext - The descriptive text with the HTML formatting to be displayed under the login page logo.

   • Entry Footer Text - The descriptive text with the HTML formatting to be displayed under the end user login information.

   • Image Overlay Text - The descriptive text with the HTML formatting to be superimposed on the login page marketing image.

6. Enter the plain text or HTML for the footer in the Configure Your Footer HTML text box. The footer will be displayed at the bottom of all portal pages. Only the HTML and Javascript are supported.
7. Complete the email templates for the new user invitation, new account confirmation, and password reset respectively.
   1. Select the desired email template to configure from the dropdown list.
   2. Configure the body, footer, and header of your email template respectively. You can enter either plain text or HTML in these text boxes. For more information, see Example of configuring email templates.
   3. Enter the subject line of your email in the Subject field.
8. Submit a ticket at Zuora Global Support to change the "from" address to the address of your organization. If this address is not changed, all future emails to end subscribers will be sent out from support@connect.com . This would create confusion for end subscribers and support issues for your organization.
9. Click Save Settings to save the configurations.