> For the complete documentation index, see [llms.txt](https://help.checkoutchamp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/customer-portal/setting-up-the-customer-portal/styles.md).

# Styles

The **Styles** section lets you customize the colors used throughout the Customer Portal. These settings help match the portal experience to your brand by controlling button colors, header colors, menu colors, and footer colors.

### Open the Styles Settings

From the Customer Portal Builder, select **Styles** from the left-side menu.

Each style setting includes a color picker. Select the pencil icon or color box to update the color.

***

## Orders

The **Orders** styles control colors for order-related buttons and labels.

| Setting                           | What it controls                                                                                      |
| --------------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Buy Again Button Color**        | The color of the Buy Again button shown on eligible past orders.                                      |
| **Subscribe & Save Button Color** | The color of the Subscribe & Save button shown when customers can start a subscription from an order. |
| **Save Amount Color**             | The color used to highlight the savings amount for Subscribe & Save offers.                           |
| **Withdrawal Button Color**       | The color of the withdrawal button shown when withdrawal requests are enabled.                        |

These colors only apply when the related order settings are enabled.

***

## Subscriptions

The **Subscriptions** styles control the colors of subscription action buttons shown to customers.

| Setting                         | What it controls                                          |
| ------------------------------- | --------------------------------------------------------- |
| **Edit Button Color**           | The button used to edit a subscription.                   |
| **Pause Button Color**          | The button used to pause an active subscription.          |
| **Resume Button Color**         | The button used to resume a paused subscription.          |
| **Cancel Button Color**         | The button used to cancel a subscription.                 |
| **Reactivate Button Color**     | The button used to reactivate an eligible subscription.   |
| **Skip Button Color**           | The button used to skip a billing cycle.                  |
| **Frequency Button Color**      | The button used when editing billing frequency.           |
| **Delay Button Color**          | The button used when delaying billing.                    |
| **Price Button Color**          | The button used when editing price, if enabled.           |
| **Quantity Button Color**       | The button used when editing quantity.                    |
| **Next Bill Date Button Color** | The button used when editing the next bill date.          |
| **Coupon Code Button Color**    | The button used to apply or submit a coupon code.         |
| **Change Variant Button Color** | The button used to change a subscription product variant. |

These colors help customers quickly identify available subscription actions.

***

## Header

The **Header** styles control the top section of the Customer Portal.

| Setting              | What it controls                           |
| -------------------- | ------------------------------------------ |
| **Background Color** | The background color of the portal header. |
| **Font Color**       | The text color used in the portal header.  |

Choose colors that keep the header readable and consistent with your brand.

***

## Menu

The **Menu** styles control the portal navigation menu.

| Setting              | What it controls                             |
| -------------------- | -------------------------------------------- |
| **Background Color** | The background color of the navigation menu. |
| **Font Color**       | The text color used for menu items.          |

Make sure the menu font color has enough contrast against the menu background color so customers can easily read the navigation options.

***

## Footer

The **Footer** styles control the bottom section of the Customer Portal.

| Setting              | What it controls                           |
| -------------------- | ------------------------------------------ |
| **Background Color** | The background color of the portal footer. |
| **Font Color**       | The text color used in the footer.         |

These settings apply when a footer is enabled in the Layout section.

***

## Color Values

Colors may display as hex values, such as:

```
#5D3CBB
#4A90E2FF
#FFFFFFFF
```

Some values may include transparency. For example, an 8-character hex value includes opacity information.