To navigate to the custom CSS input page, first click on the More icon on the bottom left of the Product Fruits administration menu then click Branding --> Custom CSS.
Changes fonts for the entire Product Fruits experience. Please use a font that is already present in your application as due to Product Fruits rendering its content in the shadow DOM, it's currently not possible to import a font via Custom CSS.
.productfruits--container-root {
font-family: Arial;
}
.productfruits--tour-container {
font-family: Arial;
}
.productfruits--card-footer
.productfruits--card-footer-skip-button {
background-color: black;
color: white;
}
.productfruits--card-footer
.productfruits--card-footer-back-button {
background-color: black;
color: white;
}
.productfruits--card-footer
.productfruits--card-footer-skip-button {
display: none !important; /* hide the default footer Skip button */
}
.productfruits--card-header-skip-button {
display: block; /* show the cross button */
background-color: #441122; /* adjust the color */
top: 15px; /* adjust the position */
right: 15px; /* adjust the position */
}
.productfruits--card-footer-steps-counter {
visibility: hidden;
}
If hints are (incorrectly) overlaid on top of elements in your application, you can adjust the default Z-index settings. You should find the right value by experimenting with the number. A lower numbers mean hints will fall beneath more elements.
.productfruits--context-help-help-icon {
z-index: 123 !important;
}
.productfruits--changelog-footer {
display: none !important;
}
.productfruits--inline-messaging-container[data-type="banner"] .productfruits--link-appearance-btn-primary {
background-color: #112233 !important;
}