Customizing the Novum Customer Portal Theme

This article goes through common questions about customizing the Novum Customer Portal Themes. See the dedicated Customer Portal Themes article for general information.

Sections

• What’s the difference between the Theme Editor and the Customer Portal Themes?
• Do the settings in the Translations settings page work with Novum?
• How can I make minor style customizations to my Customer Portal?
• How can I customize the product cards in the Toss these in and Add products section?
• How do I customize the colors of the Novum customer portal?

What’s the difference between the Theme Editor and the Customer Portal Themes?

The Theme Editor, powered by the Theme Engine, is a feature available to all Pro merchants. It gives users the ability to completely customize the Customer Portal experience including new functionality using custom coding.

The Theme Editor is not required to access or activate the Customer Portal Themes and Novum theme. However, if you do have access to the Theme Editor, you can select and customize the Novum theme files by clicking Create new theme in the Theme Editor.

Do the settings in the Translations settings page work with Novum?

Yes, the language settings available in Translations work with the Novum theme.

How can I make minor style customizations to my Customer Portal?

Open up your Recharge Dashboard and go to Settings and Customer Portal.

There’s a section titled Customize styles, which contains space for you to customize the header code, footer code, and credit card page CSS.

How can I customize the product cards in the Toss these in and Add products section?

You can make changes to Novum's HTML, CSS, and JS in Settings, Customer Portal, Customize styles. Using this section, you can hide specific items, change the styling of the Toss these in product cards, and more.

Modify all product cards

Modify Toss me in

.js-toggle-card.text-center.rc_element_wrapper.rc_single_product_card-wrapper

Modify Add products

.rc_product_card.border-light.text-center.rc_single_product_card-wrapper

Modify a single product card

Use the product ID for the card you want to modify. All product card IDs are tied to the product ID.

<style>
 #product_1234567891011 {
  background-color: #7FC582 !important;
 }
</style>

Hide a specific product

You can use CSS to hide the product from the Add product and the Toss these in sections.

<style>
 #product_1234567891011 {
  display: none;
 }
</style>

Hide the Toss these in section

The easiest way to completely hide the Toss these in section without affecting other parts of the customer portal is to hide the whole section using CSS.

In Footer HTML/CSS/JS section, select the upsells--wrapper element and give it a display: none; tag.

How can I customize the colors of the Novum customer portal?

You can customize the colors of the Novum customer portal through Settings > Customer portal > Customize styles. Using the new variables, put your CSS into the Header, Footer, and Credit Card fields. CSS is centralized for colors, you can modify it in one place and it will be visible across all of the Novum portal.

New variables

• preview-primary: #FFFFFF; - modifies the product preview modal background, card background, modal background, primary button color, and the primary button hover color.
• primary-background: #F8F8F8; - modifies the theme background color.
• secondary-background: #F0F0F0; - modifies navbar/menu background, divider on subscription card in subsciprtions.html and borders on inputs.
• button-primary: #252525; - modifies primary button background, primary button hover background, navbar option color, H2, and H3 titles.
• button-secondary: #252525; - modifies card titles.
• input-color: #252525; - modifies H4 titles, paragraphs, and spans.
• color-light-green: #50B68E; - modifies the text color of the upcoming charge date and the delivery schedule's frequency.

Example code

/* Colors */
body#recharge-novum {
  --preview-primary: #ffffff;
  --primary-background: #f8f8f8;
  --secondary-background: #f0f0f0;
  --button-primary: #252525;
  --button-secondary: #252525;
  --input-color: #252525;
}body#recharge-novum {
  --primary-color: var(--button-primary);
  --color-white: var(--preview-primary);
  --color-black: #000000;
  --color-green: var(--input-color);
  --color-red: #ff0000;
  --color-dark-red: #ec3d11;
  --color-transparent: #00000000;
  --color-light-green: #50B68E;
  --color-dark-green: var(--button-secondary);
  --color-light-blue: var(--secondary-background);
  --color-thin-blue: var(--secondary-background);
  --color-turquoise-blue: #09919E;
  --color-gray: #808f99;
  --background-color: var(--primary-background);
  --background-green: var(--button-primary);
  --color-subscription-expired: #c0c0c0;
  --border-color: var(--secondary-background);
  --info-modal-color-dark: #424242;
  --info-modal-color-light-gray: #cccccc;
  --color-orange: #f1833b;
  --info-modal-color-blue: #317d94;
}