Popular CSS snippets examples

Custom CSS

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. 

Custom fonts

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;
}

Tours

Custom fonts

.productfruits--tour-container {
	font-family: Arial;
}

Skip button colors

.productfruits--card-footer
.productfruits--card-footer-skip-button {
    background-color: black;
    color: white;
}

Previous button colors

.productfruits--card-footer
.productfruits--card-footer-back-button {
    background-color: black;
    color: white;
}

Hide the Skip button and show the close cross button in the corner

.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 */
}

Hide card step counter

.productfruits--card-footer-steps-counter {
    visibility: hidden;
}

Hints

Default z-index for icons

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;
}

Announcements

Hide history footer in pop-ups

.productfruits--changelog-footer {
	display: none !important;
}

Change banner custom button color

.productfruits--inline-messaging-container[data-type="banner"] .productfruits--link-appearance-btn-primary {
	background-color: #112233 !important;
}