---
title: "CSS Classes for Tours"
url: "https://help.productfruits.com/en/article/css-classes-for-tours"
language: "en"
last_updated: "2026-01-19T12:21:12.387Z"
---

# CSS Classes for Tours

This list of CSS classes and their default values for tour can act as a frame of reference to aid you in making adjustments

![](https://cdn-assets.productfruits.com/b46b5211-583c-4e4b-a75e-478adae94972)**Tip:** Overriding default inline styles requires adding `!important` to your style declarations. For easier identification, inline styles are marked with the 🖍️ emoji.

  
*Example of a Custom CSS rule that will overwrite a default inline style:*

```css
.productfruits--backdrop-highlighter {
    box-shadow: rgb(0, 255, 191) 0px 0px 0px 3px !important;
}
```

##   
General classes  
 

> `.productfruits--tour-container`

Styles the container that wraps the entire tour.   
Default styles:

```css
.productfruits--tour-container {
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
 width: 100%;
 z-index: 10009999;
 pointer-events: none;
 }
```

🖍️ Default inline styles:

```css
.productfruits--tour-container {
position: fixed;
}
```

> `.productfruits--card` 

Styles the card of a tour.  
🖍️ Default inline styles:

```css
.productfruits--card {
 width: var(--card-responsive-width);
 max-width: 440px;
 background-color: rgb(164, 1, 255);}
```

> `.productfruits--card-presenter` 

Styles a card of the 'pointer'/'highlighter' type.

> `.productfruits--card-arrow`

Styles a pointer card's arrow.  
Default styles:

```css
.productfruits--card-arrow.productfruits--card-arrow-top {
    position: absolute;
    display: block;
    border-bottom: 11px solid var(--arrow-bg-color);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}
```

🖍️ Default inline styles:

```css
.productfruits--card-arrow {
    --arrow-bg-color: white;
    left: somevaluepx;
    top: somevaluepx;
}
```

> `.productfruits--card-dialog-style` 

Styles a card of the 'modal' type.

> `.productfruits--animation-fadein`

Styles a card's animation.  
Default styles: 

```css
.productfruits--animation-fadein {
   animation-name: fadeIn;
   animation-duration: 0.2s;
}
```

To disable this animation, add this Custom CSS rule: 

```css
.productfruits--animation-fadein { 
animation-duration: 0s;
}
```

* * *

## Header classes  
 

> `.productfruits--card-header`

Styles the card header.  
Default styles:

```css
.productfruits--card-header {
    position: relative;
    padding: var(--card-header-padding);
    font-weight: 700;
    font-size: 1em;
    border-top-left-radius: var(--card-border-radius);
    border-top-right-radius: var(--card-border-radius);
    display: flex;
    align-items: center;
    --border-color: #dee4eb;
    }
```

> `.productfruits--card-header-text`

Styles the text inside the card header.  
Default styles:

```css
.productfruits--card-header .productfruits--card-header-text {
    min-width: 20px;
    display: inline-block;
    flex-grow: 1;
}
```

> `.productfruits--card-header-skip-button`

Styles the closing button.  
Default styles:

```css
.productfruits--card-header-skip-button {
    display: none;
    right: 10px;
    top: 10px;
    position: absolute;
    z-index: 10;
}
```

This button is hidden by default. To display it and use it, add this Custom CSS rule:

```css
.productfruits--card-header-skip-button {
 display: block;
}
```

> `.productfruits--btn-close-modern`

Styles the 'inside' of the closing button.  
Default styles: 

```css
.productfruits--btn-close-modern {
    mask-image: url(data:image/svg+xml;base64,/*data uri*/);
    -webkit-mask-image: url(data:image/svg+xml;base64,/* data uri */);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
    width: 14px;
    height: 14px;
    mask-size: contain;
    -webkit-mask-size: contain;
    cursor: pointer;
    background-color: #2e0000;
    border: 0;
    padding: 0;
}
```

* * *

## Body/section classes  
 

> `.productfruits--card-body`

Styles the body of a card (excluding the header and footer).

*🖍️* Default inline styles:

```css
.productfruits--card-body {
min-height: 350px;
}
.productfruits--card-presenter.productfruits--card-dialog-style .productfruits--card-body {
overflow-y: auto;
}
```

> `.productfruits--section-row`

Styles the sections of a card. Each section is a new row.

Default styles:

```css
.productfruits--section-row {
    display: flex;
    position: relative;
}
.productfruits--card-body .productfruits--section-row:first-of-type:not(:only-of-type) {
    padding-top: 12px;
}
```

> `.pf-body-section`

Styles the body of a section.

Default styles: 

```css
.pf-body-section {
    flex-grow: 1;
    flex-basis: 0;
}
```

> `.productfruits--card-body-text`

Styles the text inside of a section.  
Default styles:

```css
.productfruits--card-body-text {
    padding: var(--card-body-text-padding);
}
.productfruits--card-body .productfruits--section-row:only-of-type .productfruits--card-body-text {
    padding-top: 24px;
    padding-bottom: 24px;
}
```

> `.productfruits--section-html-holder`

Styles a HTML section.  
Default styles:

```css
.productfruits--section-html-holder {
    width: 100%;
}
```

> `.pf-body-section productfruits--card-body-typeform`

Styles a Typeform section.  
🖍️ Default inline styles: 

```css
element.style {
    height: 350px;
}
```

> `.productfruits--mood-meter-root`

Styles an adoption meter section.  
Default styles:

```css
.productfruits--mood-meter-root {
    padding-top: 10px;
    padding-bottom: 10px;
}
```

🖍️ Default inline styles:

```css
productfruits--mood-meter-root {
    display: flex;
    flex-direction: column;
    width: 100%;
}
productfruits--mood-meter-root div {
    display: flex;
    flex-direction: column;
}
```

> `.productfruits--mood-meter-question`

Styles the adoption meter text.  
Default styles:

```css
.productfruits--mood-meter-question {
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}
```

🖍️ Default inline styles:

```css
.productfruits--mood-meter-question div {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
```

> `.productfruits--mood-meter-icon`

Styles the adoption meter icons.  
🖍️ Default inline styles:

```css
.productfruits--mood-meter-icon {
    width: 35px;
    height: 35px;
    cursor: pointer;
}
```

> `.productfruits--section-video-parent-holder`

Styles a video section's video container.  
Default styles:

```css
.productfruits--section-video-parent-holder {
    width: 100%;
}
```

> `.pf-designer-video-youtube`

Styles a video's embed.  
Default styles:

```css
.pf-designer-video-youtube {
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 300px; 
    display: block;
}
```

* * *

## Footer classes  
 

> `.productfruits--card-footer`

Styles the card's footer.  
Default styles: 

```css
.productfruits--card-footer {
    position: relative;
    border-bottom-left-radius: var(--card-border-radius);
    border-bottom-right-radius: var(--card-border-radius);
    display: flex;
    align-items: center;
    padding: var(--card-footer-padding);
    --border-color: #dee4eb;
}
```

> `.productfruits--card-footer-steps-counter`

Styles the steps counter.  
Default styles:

```css
.productfruits--card-footer-steps-counter {
    align-self: center;
    flex-grow: 1;
    text-align: left;
    font-size: 1em;
    color: #919192;
}
```

> `.productfruits--card-footer-skip-button`

Styles the 'Skip' button.  
Default styles:

```css
.productfruits--card-footer-skip-button {
    background-color: transparent;
    color: #919192;
    padding-left: 12px;
    padding-right: 12px;
}
```

> `.productfruits--card-footer-back-button`

Styles the 'Back' button.  
Default styles:

```css
.productfruits--card-footer-back-button {
    margin-left: 11px;
}
```

> `.productfruits--card-footer-next-button`

Styles the 'Next' button.  
Default styles: 

```css
.productfruits--card-footer-next-button {
    margin-left: 11px;
}
```

* * *

## Button classes  
 

> `.productfruits--btn`

![](https://cdn-assets.productfruits.com/b46b5211-583c-4e4b-a75e-478adae94972)**Note:** This class affects all buttons across Product Fruits. To style specific buttons, please make sure to refine your selector.

  
  
Default styles:

```css
.productfruits--btn {
    box-shadow: none;
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.2s ease-in-out;
    border: 0;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    white-space: normal;
    word-wrap: break-word;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    background-color: #3047ec;
    color: white;
    line-height: 1;
    display: flex;
    align-items: center;
}
```

> `.productfruits--card-body-button`

Styles a button inside the card's body - aka a 'custom button'.  
Default styles:

```css
.productfruits--card-body-button {
    display: flex;
    justify-content: center;
    padding: var(--card-body-button-padding);
}
```

> `.productfruits--btn-card-content`

Styles the content of a custom button.

* * *

## Classes that can be targeted via the Look & Feel menu  
 

The Look & Feel menu applies changes globally for all tours. With these selectors, you can tailor settings for individual tour cards.  
 

> **Dividers:** `.productfruits--card-header:after, .productfruits--card-footer:before`

Default styles:

```css
.productfruits--card-header:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    margin: auto;
    width: calc(100% - 40px);
    color: var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.productfruits--card-footer:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    margin: auto;
    width: calc(100% - 40px);
    color: var(--border-color);
    border-bottom: 1px solid var(--border-color);
    bottom: unset;
    top: 0;
}
```

> **Backdrop:** `.productfruits--single-backdrop`

Default styles:

```css
.productfruits--single-backdrop {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}
```

*🖍️* Default inline styles:

```css
.productfruits--single-backdrop {
    position: fixed;
    inset: 0px;
    z-index: 10000010;
    background-color: transparent;
}
```

  
 

> **Target highlight:** `.productfruits--backdrop-highlighter`

Default styles: 

```css
.productfruits--backdrop-highlighter {
    position: absolute;
    background: transparent;
    opacity: 1;
    z-index: 10001000;
    pointer-events: none;
}
```

*🖍️* Default inline styles:

```css
.productfruits--backdrop-highlighter {
    left: 6px;
    top: 6px;
    width: 1498.67px;
    height: 52px;
    box-shadow: rgb(40, 53, 147) 0px 0px 0px 3px, rgba(137, 136, 138, 0.43) 0px 0px 0px 4000px;
}
```

* * *

## Targeting a specific tour or tour step

  
Here's how to use data attributes to target specific tours or individual steps for a more relevant user experience.  
 

> `[data-pf-card-tour``="0"]`

Targets a tour by its ID. Replace `'0'` with the ID of the tour you wish to target.  
You can find the ID of a tour by looking at the web address (URL) of the tour's detail page. The ID is usually a number at the very end of the URL. For example, in a URL like `https://my.productfruits.com/portal/workspace/default/in-app-content/tours/detail/12345`, the tour ID is `12345`.

![](https://cdn-assets.productfruits.com/b46b5211-583c-4e4b-a75e-478adae94972)**Tip:** When working in the Editor, all tours are assigned a default ID of `'0'`. Your CSS changes won't appear in the Editor, but will be visible in Preview mode. To see your style updates directly in the Editor, include this data attribute with the tour ID `'0'` in your Custom CSS rule. This is useful for previewing changes. Once you're happy with the styling, replace the attribute for your CSS with the actual tour ID.

> `[data-pf-card-step``="``1``"]`

Targets a tour step based on its order in the tour. `1` targets the first card, `2` targets the second card, etc.  
 

#### Data attributes in action

Getting the selector structure right is essential for accurate targeting. Here's how to do it.  
To only target a specific tour, your selector structure should be:  

```css
.target-class [data-pf-card-tour="00000"] {
style declarations...
}
```

To only target a specific tour step, your selector structure should be: 

```css
.target-class [data-pf-card-step="1"]  {
style declarations...
}
```

To target both a tour and a specific card step, your selector structure should be:

```css
.target-class [data-pf-card-tour="00000"][data-pf-card-step="1"] {
style declarations...
}
```