Customize branding in XTRF

Owned by Oksana Vishchuk
Last updated: Jul 03, 2024
4 min read

Introduction

XTRF platform allows you to add your company logo, favicon, custom background, and colors to the Home, Vendor, and Client Portals.

Changing the logo is a free option for all XTRF Plans. For other branding options, additional charges may apply. Please contact the XTRF Support or your Regional Growth Manager for more information. 

Add your logo

To add your company logo to the, perform the following steps:

  1. Sign in to the XTRF Home Portal.

  2. Go to the Configuration menu → General Configuration → Branding → Logo tab.

  3. Hover over the Custom logo card.

  4. Click the Select File … button that appears on the Custom logo card, and upload a PNG or JPEG file from your local machine.

  5. To display the logo publicly, switch to the Custom logo option with the radio button. The changes will be saved automatically.

Logo image requirements:

  • 1920 x 1080 pixels

  • PNG or JPG format.

The logo will be later resized to fit certain fields in the sign-in screens and the top left-hand corner of the Portals (200 x 50 pixels).

Customize the XTRF’s sign-in background

  1. Go to the Configuration menu → General Configuration → Branding section.

  2. Go to the desired Portal tab.

  3. Scroll down to the Background card.

  4. Hover over the Custom background card.

  5. Click the Select File … button that appears on the Custom background card, and upload a PNG or JPEG file from your local machine.

  6. Switch to the Custom background option with the radio button to apply the selected background. The changes will be saved automatically.

Background image requirements:

  • 1920 x 1080 pixels

  • PNG or JPG format.

The background field in XTRF has a 16:9 aspect ratio.

Customize the XTRF’s favicon

  1. Go to the Configuration menu → General Configuration → Branding section.

  2. Go to the desired Portal tab.

  3. Scroll down to the Favicon card.

  4. Click the Select File … button that appears on the Custom favicon card, and upload a PNG, JPEG, SVG, or ICO file from your local machine.

  5. To display the new favicon publicly, switch to the Custom favicon option with the radio button. The changes will be saved automatically.

Favicon image requirements:

  • Min. 96 x 96 pixels

  • PNG, JPEG, SVG, or ICO format.

Customize the XTRF’s colors

You can change the colors of the following elements:

 

Home Portal

Vendor Portal

Client Portal

 

Home Portal

Vendor Portal

Client Portal

Top navigation menu bar

  • Background color

  • Search bar color

  • Font color

  • Background color

  • Font color

  • Background color

  • Buttons color

  • Font color

Main menu

  • Background color

  • Font color

  • Background color

  • Font color

 

Main components (buttons, checkboxes, calendar tiles, etc.)

  • Primary color

  • Tabs color

  • Font color

  • Primary color

  • Tabs color

  • Font color

  • Primary color

  • Tabs color

  • Font color

To change the colors, perform the following steps:

  1. Go to the Configuration menu → General Configuration → Branding section.

  2. Go to the desired Portal tab.

  3. Scroll down to the Colors card.

  4. Click on the color buttons for specific design elements and select the desired color. You can also use the HEX color code.

  5. For some elements, you can also set the hover effects. Click on the color button, then go to the Hover tab.

    1. Click on the Lighten or Darken option.

    2. Use the percent bar to adjust the effect.

  6. Click on the Preview button in the top right-hand corner of the Colors card to check how the new colors and effects will look on the selected portal.

  7. Click the Set Colors button to confirm the changes.

  8. Click the Back to default button to restore the default portal colors.