# CSS overrides

Last updated: May 14, 2025

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

<figure><img src="https://3658670565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FndNAuxS4koYyI8AQTpS9%2Fuploads%2FXp7w7ZENjcz7RjKTDZSb%2FScreenshot%202024-04-10%20at%2012.20.44%E2%80%AFPM.png?alt=media&#x26;token=0f2428f9-981b-4e97-930a-b4ce5dca54b4" alt=""><figcaption></figcaption></figure>

CSS override rules will be scoped to the following selectors:

* <mark style="color:purple;">`#smartrr_account`</mark>&#x20;
* <mark style="color:purple;">`#smartrr_wrapper`</mark>&#x20;
* <mark style="color:purple;">`#smartrr_toast_container`</mark>&#x20;
* <mark style="color:purple;">`#smartrr_inner`</mark>&#x20;
* <mark style="color:purple;">`#smartrr_header`</mark>

Below is the full list of CSS variables that manipulated. ⬇️ [<mark style="color:blue;">Jump</mark>](#css-override-examples) to examples of how to use these CSS overrides to further customize your shop's customer portal.

* 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&#x20;

```css
/* 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

```css
/* 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

```css
/* 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

```css
/* Quantity indicators */

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

### Lines

```css
/* Lines */

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

### Next Order / Subscription Tabs

```css
/* 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
}
```