CSS Classes for Tours

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:

.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:

.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:

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

.productfruits--card 

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

.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:

.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:

.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: 

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

To disable this animation, add this Custom CSS rule: 

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

Header classes
 

.productfruits--card-header

Styles the card header.
Default styles:

.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:

.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:

.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:

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

.productfruits--btn-close-modern

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

.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:

.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:

.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: 

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

.productfruits--card-body-text

Styles the text inside of a section.
Default styles:

.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:

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

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

Styles a Typeform section.
🖍️ Default inline styles: 

element.style {
    height: 350px;
}

.productfruits--mood-meter-root

Styles an adoption meter section.
Default styles:

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

🖍️ Default inline styles:

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:

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

🖍️ Default inline styles:

.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:

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

.productfruits--section-video-parent-holder

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

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

.pf-designer-video-youtube

Styles a video's embed.
Default styles:

.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: 

.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:

.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:

.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:

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

.productfruits--card-footer-next-button

Styles the 'Next' button.
Default styles: 

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

Button classes
 

.productfruits--btn

Note: This class affects all buttons across Product Fruits. To style specific buttons, please make sure to refine your selector.

Default styles:

.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:

.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:

.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:

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

🖍️ Default inline styles:

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

Target highlight: .productfruits--backdrop-highlighter

Default styles: 

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

🖍️ Default inline styles:

.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.

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:  

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

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

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

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

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