> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/what-would-you-like-to-learn-about/creator-edit-configuration/look-and-feel/customize-your-creator-edit-portal.md). # Customize Your Creator Edit Portal {% hint style="warning" %} This article covers configuring your [Creator Edit portal](/brand/what-would-you-like-to-learn-about/creator-edit-configuration/creator-edit-overview.md). [Contact us](https://app.impact.com/support/portal.ihtml?createTicket=true&) to learn more. {% endhint %} Customize the appearance of your Creator Edit portal to align with your brand's visual identity. You can modify a range of visual elements, including colors, fonts, and component styles, ensuring a consistent brand experience for your creators. {% hint style="danger" %} **Changes go live immediately.** Creators will see your edits as soon as you save. If you're unsure about a setting, [contact support](https://app.impact.com/support/portal.ihtml?createTicket=true&) before making changes. {% endhint %} #### Access the settings page You can only access this settings page from impact.com. 1. From the top navigation bar in your impact.com account, select ![](/files/2qeX6EqajzdOPiwzfeV5) **\[User profile] → Settings.** 2. From the right, beneath *Program Settings*, navigate to *Creator Edit* and select [**Look and Feel**](https://app.impact.com/secure/advertiser/fr/branded-portal/look-and-feel.ihtml)**.** 3. In the *Look and Feel* settings, adjust the visual options for your portal. See *Edit your portal's look and feel* section below. 4. Once you're satisfied, select **Save**. #### Edit your portal's look and feel {% tabs %} {% tab title="General colors" %} Define the general colors of your portal using hexadecimal color codes. These colors apply to backgrounds, borders, and branding elements. * **Primary branding**: Set your main brand color. * **Secondary branding**: Set your secondary brand color. * **Tertiary branding**: Set an accent or tertiary brand color. * **Splash background**: Set the background color of the splash/loading screen. * **Onboarding background**: Set the background color for the creator onboarding flow. * **Settings background**: Set the background color for the portal's settings page. * **Primary background**: Set the main background color for the portal's dashboard. * **Primary border**: Set the color for the primary borders and dividers. * **Success**: Set the color used for success messages and notifications. * **Warning**: Set the color used for warning messages and alerts. {% endtab %} {% tab title="Buttons" %} Define the appearance of your portal's buttons, including their text color, background color, and interaction states (hover and click). You can also preview how your buttons will look in your portal. * **Primary button**: Set the color of your primary buttons' *Text*, *Background*, *Background Hover*, and *Click*. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color. * **Secondary button**: Set the color of your secondary buttons' *Text*, *Background*, *Background Hover*, and *Click*. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color. {% endtab %} {% tab title="Text" %} Define the colors for various text elements to ensure readability and consistency using hexadecimal color codes. You can also preview how your text will look in your portal. * **Errors**: Set the color for error messages. * **Influencer metrics label text**: Set the color for labels on performance metrics. * **Link color**: Set the color for all clickable hyperlinks. * **Onboarding text**: Set the main text color during the onboarding process. * **Onboarding secondary text**: Set the secondary text color used during the onboarding process. * **Primary modal text**: Set the text color inside modal pop-ups. * **Primary text**: Set the default text color for most body content. * **Secondary link**: Set the color for secondary or less prominent links. * **Secondary text**: Set the color for supplementary or less emphasized text. * **Settings text**: Set the text color specifically for the settings pages. * **Splash text**: Set the text color on the splash/loading screen. * **UI component primary text**: Set the text color for the primary UI components. {% endtab %} {% tab title="Forms" %} Define the look of interactive form elements to match your branding using hexadecimal color codes. You can also preview how your checkbox and radio button will look in your portal. * **Selected checkbox**: Set the color of a checkbox when it's selected. * **Selected radio**: Set the color of a radio button when it's selected. {% endtab %} {% tab title="Components" %} Define the colors for various structural components of your portal using hexadecimal color codes. * **Primary modal background**: Set the background color for modal pop-ups. * **UI component primary**: Set the color for the primary UI elements like active tabs or selected items. * **UI component secondary**: Set the color for secondary UI elements. * **Pill container background**: Set the background color for pill-shaped tags or labels. * **Footer background**: Set the background color of the page footer. * **Header background**: Set the background color of the page header. * **Progress bar background**: Set the background color for progress bars. {% endtab %} {% tab title="Fonts" %} Define your brand's fonts to be used across your portal. Supported file formats include .TTF, .OTF, and .WOFF. You can also preview how your uploaded fonts will look in your portal. * **Font light, regular, bold**: Upload fonts for your primary font styles. * **Secondary font semi bold, regular, bold**: Upload fonts for your secondary font styles. {% endtab %} {% tab title="Other styles" %} Adjust additional styling options for specific components. You can also preview how your chosen styling options will look in your portal. * **Button border radius**: Set the roundness of the corners for the primary button. * **Benefit content header font size**: Adjust the font size for the header on benefit content cards. {% endtab %} {% tab title="Categories & collections" %} Define the style for the cards used to display categories and collections on your portal. You can preview how your chosen styling will look in your portal. * **Categories card style**: Choose between **Circular** and **Square**. If you choose the **Square** style, you can customize the corner roundness for the cards. * **Collections card style**: Choose between **Circular** and **Square**. If you choose the **Square** style, you can customize the corner roundness for the cards. {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.impact.com/brand/what-would-you-like-to-learn-about/creator-edit-configuration/look-and-feel/customize-your-creator-edit-portal.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.