All pages
Powered by GitBook
1 of 1

CSS overrides

Developers can override in-app theme settings with our override tool.

Last updated: April 10, 2024

Custom code placed in the CSS Overrides box in Theming will override any global or product settings.

CSS override rules will be scoped to the following selectors:

  • #smartrr_account

  • #smartrr_wrapper

  • #smartrr_toast_container

  • #smartrr_inner

  • #smartrr_header

  • header

  • customer-name

  • customer-email

  • customer-since

  • marketing-banner

  • inner

  • year-select

  • delivery-address-input

  • delivery-address-row

  • address-wrapper

  • current-address-1

  • address-1

  • current-address-2

  • address-2

  • settings-grid

  • addon

  • addon-wrapper

  • addon-selected

  • item-product-container

  • item-product-image

  • next-order-price

  • addon-no-products

  • subscription-grid

  • upcoming-deliveries

  • your-subscriptions-wrapper

  • edit-item-quantity-container

  • product-name

  • product-variant-name

  • manage-order-buttons

  • modal-center-text

  • modal-center-text-title

  • modal-center-text-subtitle

  • edit-subscription-apply-discount

  • ship-to

  • date-picker

  • list-item

  • list-item-selected

  • list-item-disabled

  • list-item-prepaid

  • upcoming-order-card

CSS Override Examples

Typography Examples 

/* Headings */

h1, h2, h3, h4, h5{
  font-family: "Lota Grotesque";
}

/* Body */

p{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

/* Captions */

[class*="caption"] {
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #2B2D70;
}

/* "Customer since" text */

[class*="customer-since"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 13px;
  text-transform: uppercase;
  color: #2B2D70;
}

/* "Primary button text */

[class*="primary-button"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

/* "Secondary button text */

[class*="secondary-button"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

Badge Examples

/* Captions within badges */

[class*="caption1"], [class*="info-badge"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #2B2D70;
}

/* Icon color */

[class*="info-badge"] svg{
   stroke: #2B2D70;
}

Page Margin

/* Desktop portal top margin */

[class*="customer-header"]{
  margin-top: 160px;
}

/* Mobile portal top margin */

@media screen and (max-width: 600px) {
  [class*="customer-header"]{
  margin-top: 100px;
	}
}

Quantity Indicators

/* Quantity indicators */

[class*="quantity-container"]{
  background-color: #2B2D70;
  button{
      padding:0px;
  }
}

Lines

/* Lines */

hr{
  background-color: #2B2D70;
  border-width: 0px;
  height: 1px;
}

Next Order / Subscription Tabs

/* Styling unselected tab*/

[class*="tab-wrapper"] [class*="tab-button"]{
  background-color:rgb(0 0 0 / 30%);
  
  /* Add space between the tabs - Optional */
  
  :first-child{
    margin-right: 10px;
  }
  
  /* Change color of Icon*/
  
  svg {
    stroke: #fff;
  }
  
}

/* Styling selected tab*/

[class*="tab-wrapper"] [class*="selected"]{
    background-color:#000 !important;
}

/* Hiding active indicator bar*/

.MuiTabs-indicator{
  display:none;
}

Prevent Navigation from Overlapping Portal Header

.smartrr-portal-header{
  padding-top: 150px; // Adjust value to fit navigation height
}