The Prima customer portal theme uses CSS variables to apply default style settings globally. These variables can be customized and updated to match your brand. This guide explains how to get started using advanced customizations with the Prima customer portal theme. 

Before you start

• CSS customizations can be added through your Recharge customer portal settings.
• Prima's customization process utilizes classes for the majority of styling options. 
• All CSS code must be placed between a <style></style>tag.
• Updating styling through CSS requires custom code and is not supported by Recharge as per the design and integration policy. If you require further assistance, work with a third-party developer.

Main CSS classes used with Prima

The majority of classes used on Prima begin with rct_. This helps avoid any errors around naming if you are using a third-party integration or custom code in your customer portal. 

.recharge-te strong,
.rct_sidebar strong {
font-size: 14px;
font-weight: bold;
}

Update theme variables globally

The following piece of code can be used to update all major variables in the Prima theme at once. This ensures that any change made applies to every option in the Prima theme. 

.recharge-te,
.rct_sidebar {
    --theme-prima-background-color: #F8F8F8;
    --theme-prima-text-color: #000;
    --theme-prima-card-color: #FFF;
    --theme-prima-color-white: #FFF;
    --theme-prima-color-middle-grey: #808F99;
    --theme-prima-color-light-grey: #D9DDE0;
    --theme-prima-color-red: #EC3D10;

    --theme-prima-button-primary: #000;
    --theme-prima-button-secondary: transparent;

    --theme-prima-text-size: 13px;
    --theme-prima-text-line-height: 17px;
    --theme-prima-text-size-small: 11px;
    --theme-prima-text-line-height-small: 14px;
    --theme-prima-font-family: 'Roboto', sans-serif;

    --theme-prima-header-height: 56px;
    --theme-prima-footer-height: 62px;
    --theme-prima-navigation-height: 40px;
} 

Custom CSS examples

Change the theme background color 

.recharge-te {
    --theme-prima-background-color: <your-color-of-choice>;
}

Change the sidebar color

.rct_sidebar {
  background-color: <your-color-of-choice>;
}

Change the card color

.recharge-te,
.rct_sidebar {
    --theme-prima-card-color: <your-prefered-card-color>;
}

Change button colors

There are two variations of buttons available in the Prima theme:

• Primary buttons: Primary buttons are initially filled. These buttons are transparent with an outline on the hover. The Order now is the primary button shown in the screenshot below. 
• Secondary buttons: Secondary buttons initially appear transparent with an outline and are then filled on hover. The Swap product is the secondary button shown in the screenshot below. 

.recharge-te,
.rct_sidebar {
    --theme-prima-button-primary: <your-prefered-primary-button-color>;
    --theme-prima-button-secondary: <your-prefered-secondary-button-color>;
}

Change the font family

.recharge-te,
.rct_sidebar {
    --theme-prima-font-family: <your-prefered-font-family>;
}

Change the font size

Prima offers two main font sizes, default and small. It's recommended to change the related line height to match the new font size when updating the font size to ensure that the elements are spaced correctly. 

.recharge-te,
.rct_sidebar {
  --theme-prima-text-size: <your-default-font-size>;
  --theme-prima-text-size-small: <your-small-font-size>;
  --theme-prima-text-line-height: <your-default-line-height>;
  --theme-prima-text-line-height-small: <your-default-small-line-height>;
}

Hide the order now button

.recharge-te [data-charge-order-now],
.recharge-te [data-subscription-order-now] {
display: none;
}

Additional customizations

Style a specific button

Almost all of the buttons in Prima have unique data attributes, which are also used to attach behavior to each button. This is useful for applying specific styles to each button.

The following is an example of where a CSS rule is used to style the Add discount button: 

// Styling "Add discount" button from the Manage Subscription page 
.rct_button [data-subscription-discount-add] {
  padding: 8px;
  border-radius: 0;
}

Style a specific form or form elements

Forms can be targeted using either a data attribute or an ID. Verify the correct form or form element to target using the Inspect option with your browser's Developer Tools. 

For example, CSS was used here to style the Quantity form:  

// Styling the Quantity form from the Manage Subscription page 
#ReChargeForm-subscription-quantity-edit {
  margin: 10px;
  padding: 8px;
}

// Styling a specific element within the Quantity form 
// from the Manage Subscription page 
#ReChargeForm-subscription-quantity-edit input[name="quantity"] {
  color: blue;
  border: 0;
}

Style the calendar

The calendar used by customers to update dates related to their orders is a complex component. Styling specific elements of the calendar may require you to use your browser's Developer Tools to determine which elements need to be updated. Specific styles may also vary depending on the current CSS configured for your store, and the impact it has globally. 

The calendar can be targeted using the class rct_datepicker. In the example below, CSS is used to remove unwanted borders from within the calendar component:

.rct_datepicker th, 
.rct_datepicker td {
  border: none;
}

Common display fixes

The Prima theme uses a standard theme file, which displays correctly on the majority of themes. Depending on the theme you are using, or any additional customizations you've added, you may need to add additional CSS to ensure the customer portal displays as intended.

Slider page display fixes

On occasion, the contents of the slider page may appear off-center or may be overwritten by your store's theme header.

This can also result in the store header overlapping with the slider page. 

Add the following code to the Header/HTML/CSS/JSS section in the customer portal settings page to fix these issues with the slider page: 

<script>
(() => {
  if (ReCharge && ReCharge.Sidebar) {
    ReCharge.Sidebar.config.panelSelector = 'body';
  }
})()
</script>

Header navigation links are not aligned 

You may notice discrepancies with the way the navigation links are displayed in the header.

Add the following code to the Header/HTML/CSS/JSS section in the customer portal settings page to align the headers on the customer portal correctly: 

<style>
.rct_navigation__desktop {
margin-top: auto;
}

.rct_navigation {
min-height: 50px;
}
</style>

The min-height value recorded may need to be adjusted for your store depending on the header size you are using.

Header menu appears shortened

The header menu may not extend the full page width.

The following code can be added to the Header HTML/CSS/JS section in the customer portal settings page to ensure the header menu is the length of the page:

<style>
.wrapper {
min-width: 100%;
}
</style>

Remove underline styling from header navigation links

Depending on your theme settings, the navigation links in the header may automatically be underlined.

Add the following code to the Header/HTML/CSS/JSS section in the customer portal settings page to ensure the navigation links are not underlined: 

.rct_navigation__item__link {
  text-decoration: none;
}

Field layout is not visible 

Customers making changes to their subscriptions may report that the layout fields are not visible. This can happen when the pre-existing theme code overwrites the Prima theme code.

You can inspect the field object using your browser's Developer Tools to determine which CSS properties are overridden in the console. Overridden properties show with a strikethrough:

To ensure that certain elements are displayed, copy the overridden elements and add them in the Header/HTML/CSS/JSS section in the customer portal settings page and add the !important tag at the end of each line.

In the example below, CSS is used to ensure that the border, padding, height, and border-radius elements are present in the Prima theme:

<style>
.rct_form__input {
    border: 1px solid var(--theme-color-middle-grey) !important;
    padding: 15px 12px !important;
    height: 42px !important;
    border-radius: 4px !important;
}
</style>

Dropdown selectors are displayed incorrectly

Dropdown selectors can be used for customers to select their shipping province or country. On occasion, these selectors may initially appear with alignment issues.

You may also notice an option appears twice. 

Add the following code to the Header/HTML/CSS/JSS section in the customer portal settings page so that the dropdown selectors are displayed correctly: 

.recharge-te .select-wrapper {
    display: none;
}