Skip to main content

How to Customize Your Color and Font to Match Your Brand

This article explains how to customize the Colors and Fonts within the Nutrogen platform

Step-by-Step Guide:

  1. Access the Branding Menu: In the main menu on the left-hand side of the Nutrogen platform, navigate to the "Branding" menu.

  2. Navigate to Basic Branding: From the branding submenu, select "Basic Branding." (Screenshot at 0:09 shows the basic branding tab)

  3. Choose the Color and Font: Under "Basic Branding," click the "Colors and Font" tab. (Screenshot at 0:12 shows the "Colors and Font" tab)

  4. Select Your Preferred Colors: Choose from the different options of Menu, Button, Supporting, Background, and Text colors. (Screenshot at 0:16 shows the color options)

    • Update Hex codes: Insert the HEX code, or adjust the Transparency using the color slider. (Screenshot at 1:00 shows the color selector)

  5. Customize Your Preferred Font: Choose from the different options of Arial, Verdana, Georgia, Kanit, or Roboto, using the Font Select drop down menu. (Screenshot at 1:07 shows the font options)

  6. Preview Your Selections: To see how your changes look, before making the changes live, press the "Preview" button. (Screenshot at 1:11 shows the "Preview" button.)

    • To return to the "Color and Font" tab, press the "Exit Preview Mode" link near the "Apply Changes" link on the top right of the screen. (Screenshot at 1:19 shows the apply and exit preview buttons.)

  7. Apply Changes: After making your customizations, click the "Save Changes" button. Your login and registration pages will immediately reflect the new design, colors, and branding. (Screenshot at 1:29 shows the "Save Changes" button)

  8. Examine Different Parts of the App: By exploring different screens, like the nutrition pages, you can double check and ensure the Color and Font styles meet your expectations.

Did this answer your question?