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
β Please note that 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...
}