Skip to main content
How to Use Basic CSS to Brand Your Return Center (Modern Mode)

A basic template and CSS coding guide for your Modern Mode returns center

Kaylie avatar
Written by Kaylie
Updated over a year ago

Below is a basic template to use to customize your returns portal. Make sure you copy and paste the entire template any time you want to use variables. Every variable has a default set in the template, so you don't need to remove any variables that you don't want to modify. If you would like to remove variables, copy the entire template and then remove them manually to avoid formatting errors.

Lines that start and end with /* ... */ are comments. These are notes within the template and are not functional code. They can be removed without any side-effects. Do not modify these lines beyond deleting them if you are not familiar with CSS.

The :root { line near the start after @import and the } line at the end are required for the template to work. Don't delete these.

You need to remove the --background-image line if you aren't using a background image.

You should also remove the @import url() line and the --font-family line if you aren't specifying a custom font.

Basic Template

/* font url */ @import url('https://fonts.googleapis.com/css2?&family=Roboto:wght@500&family=Wavefont:wght@500&display=swap');

/* variables must go inside this :root (sans the @import line) */ :root { /* font family name associated with the above imported URL */ --font-family: 'Roboto';

/* background image (Remove this if you want to use a solid background color) */ --background-image: url('http://kittehbox.returnlogic.com/assets/rlBrandingLogo/PoweredByRL-BlackText-NoBkg.png');

/* background color: if no background image is specified, then this color will always apply. if a background image is specified, the image will take precedence over the color, but the color will display while the image is loading and if the image is broken */ --background-color: #F0F6F8;

/* color for most buttons and some accents. must use a darker color for contrast */ --primary-color: #333333;

/* background color for the bonus credit badges. must use a ligher color for contrast */ --bonus-credit-badge-color: #85daf3;

/* colors for steps on status page for early steps: authorized/in-transit/requested statuses */ --status-in-progress-color: #FFCB00;

/* colors for steps on status page where retailer is taking actions: delivered/active/processed */ --status-complete-color: #027DB4;

/* colors for steps on status page where there has been an issue: rejected/cancelled */ --status-issue-color: #A30014; }

Advanced Template

This is an advanced template to use if you would like more in-depth customizations and are comfortable with CSS coding.

/* font url */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=Wavefont:wght@500&display=swap');

/* variables must go inside this :root (sans the @import line) */
:root {
  /* font family name associated with the above imported URL */
  --font-family: 'Roboto';

  /* background image (Remove this if you want to use a solid background color) */
  --background-image: url('http://kittehbox.returnlogic.com/assets/rlBrandingLogo/PoweredByRL-BlackText-NoBkg.png');

  /* background color: if no background image is specified, then this color will always apply.
     if a background image is specified, the image will take precedence over the color, but the color will display while the image is loading and if the image is broken */
  --background-color: #F0F6F8;

  /* color for most buttons and some accents. must use a darker color for contrast */
  --primary-color: #333333;

  /* background color for the bonus credit badges. must use a ligher color for contrast */
  --bonus-credit-badge-color: #85daf3;

  /* colors for steps on status page for early steps: authorized/in-transit-requested statuses */
  --status-in-progress-color: #FFCB00;

  /* colors for steps on status page where retailer is taking actions: delivered/active/processed */
  --status-complete-color: #027DB4;

  /* colors for steps on status page where there has been an issue: rejected/cancelled */
  --status-issue-color: #A30014;

  /****************************/
  /* Advanced customizations. */
  /****************************/

  /* the most common type of button in the code; used frequently in modals, etc. */
  --dark-primary-button-background-color: var(--primary-color);

  /* start RMA button color. Button color on the landing page and if the start gift card page */
  --dark-start-rma-button-color: var(--primary-color);

  /* the back/previous buttons that are at the bottom of the return center */
  --dark-go-back-button-color: var(--primary-color);

  /* buttons that go forward in the return process, including checkout button */
  --dark-go-forward-button-color: var(--primary-color);

  /* variant modal button options: Add to cart button, change quantity button, etc. */
  --dark-cart-modify-button-color: var(--primary-color);

  /* button credit badge background color; needs to be a light color */
  --light-bonus-credit-background-color: var(--bonus-credit-badge-color);

  /* status page header/accent color */
  --dark-status-page-accent-color: var(--primary-color);

  /* status page print shipping label button */
  --dark-status-page-print-shipping-label-button: var(--primary-color);

  /* status page find USPS locations button */
  --dark-status-page-find-usps-locations-button: var(--primary-color);

  /* the step circles on the left of the Return Status box on the status page
   * completed: The step is done
   * current: The current step
   * retailer started RMA: All circles change to this color after the RMA is received/active/processed/complete
   */
  --dark-status-page-step-completed-circle: var(--primary-color);
  --dark-status-page-current-step-circle: var(--status-in-progress-color);
  --dark-status-page-retailer-started-rma-circle: var(--status-complete-color);

  /* the circle/icon on the right side of the Return Status box on the status page */
  --dark-status-page-authorized-icon: var(--status-in-progress-color);
  --dark-status-page-complete-icon: var(--status-in-progress-color);
  --dark-status-page-received-icon: var(--status-in-progress-color);
  --dark-status-page-requested-icon: var(--status-in-progress-color);
  --dark-status-page-cancelled-icon: var(--status-issue-color);
  --dark-status-page-in-transit-icon: var(--status-in-progress-color);
  --dark-status-page-delivered-icon: var(--status-complete-color);
  --dark-status-page-active-icon: var(--status-complete-color);
  --dark-status-page-processed-icon: var(--status-complete-color);
  --dark-status-page-rejected-icon: var(--status-issue-color);
}

Modifying the Basic Template

Adding a custom font

Check if the font you're looking for is available in Google Fonts. If you can't find your font, browse the website and search for a lookalike.

Once you find an appropriate font, select your font and its variant. This will open up a side panel that allows you access to the URL that you need to import to be able to use the font:

There are two lines that need to be changed to use a custom font.

Copy the @import line shown above, ignoring the <style> on the top and the bottom, and add it to the top of the CSS, replacing the existing @import line in the template. Next, find the name of the font family that you are using. In Google Fonts it will be in the same side panel. In the below screenshot, our font name is Roboto. You can ignore the sans-serif part. Find the --font-family variable and replace Roboto with the new font. The font should now apply globally.

Adding/Removing Background Image

Find the --background-image variable in the CSS template. You should notice that it has a url('https:..'); section to it. You'll want to replace the existing URL with the URL of an image.

If you do not wish to use a background image, delete the --background-image variable. Without the background image variable, the background will be the flat color specified in the --background-color variable.

Setting the background color

The background color is set using the --background-color variable. Colors should be supplied as hex codes. If you do not know what a hex code is, here is a color picker that you can use. Once you have your hex code, replace the existing color with the new color.

It can be wise to set a background color even if you're using a background image. Background images always take precedence over the set background color, but images can take a few seconds to load in after the page has started displaying its content. While the image is loading the website will default to the background color, instead. You'll likely want to set the background color to be a similar tone as the image.

Setting button color

Colors that you pick need to have good contrast. All of the customizable buttons in our platform use dark colors, so any color swaps need to also use dark colors, for example. The default background color for most buttons is #333333 , shown below:

If a lighter color is used as a button background color, the text will become difficult to read, so make sure you pick a color that has good contrast with white:

Basic Template Buttons

To change the color of most buttons in the platform, update the --primary-color variable. Make sure to pick a dark color to retain text contrast.

Advanced Template Buttons

To change the color of a set of buttons, find its variable. You can find a list of button variables and the location/function of their associated buttons in the Advanced customizations section of the Advanced Template.

The default button color can be changed by updating the --primary-color variable. If you'd like to drill down and make changes to individual groups of buttons, find them in the Advanced customizations section, then replace the var(...) value with the color hex code you'd like to use.

If a variable starts with dark , then try to choose a dark color that will contrast well with white text. If the variable starts with light , then try to choose a light color that will contrast well with black text.

Setting misc colors

There are two other customizable items aside from the background and buttons. You can also set the color of bonus credit badge (note: the bonus credit badge uses dark text, so be sure to choose a light or pastel background color) and the status page status box icons and progress circles. Deeper customization, such as customizing the color of the header and footer accents on the review page, can be found in the Advanced Template.

Did this answer your question?