> This page is for Docs. > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://zuora.ferndocs.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://zuora.ferndocs.com/_mcp/server. # Configure user interface > Learn how to customize the user interface of your portal using branding images and styles. Learn how to customize the user interface of your portal using branding images and styles. Customize the look and feel of the portal by using your company’s branding images and styles to help market your portal. Enter the installed Subscriber Portal instance and click the **Look and Feel** tab. 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. 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. 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. ![Dashboard Configurations](/_fern-img/9230a998b010e76fac97b4e8b7235a5eb5b563fe96d83f1dd47bccacf9a6a92e.webp) * 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](/docs/platform/integration/integration-hub/core-connectors-and-applications/subscriber-portal/configure-user-interface/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](/docs/platform/integration/integration-hub/core-connectors-and-applications/subscriber-portal/configure-user-interface/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. 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. ![Different Texts on Portal Page](/_fern-img/4b118364c7f9da20df788185385d58394dd0c53caf651976b80afd74692ee52e.webp) 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. 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. ![email\_temp\_selection](/_fern-img/5e09d37f3fb2051a8c3bb0d423b258c03f3466fba4e9f324a5a4cab601288051.webp) 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](/docs/platform/integration/integration-hub/core-connectors-and-applications/subscriber-portal/configure-user-interface/example-of-configuring-email-templates). 3. Enter the subject line of your email in the **Subject** field. Submit a ticket at [Zuora Global Support](https://support.zuora.com/) 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](support@connect.com). This would create confusion for end subscribers and support issues for your organization. Click **Save Settings** to save the configurations.