Popular CSS snippets examples

Custom fonts

Changing fonts for the entire Product Fruits experience.

.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 often above overlays or other elements in your application, you can adjust the default Z-index settings. You should find the right value by experimenting with the number. Lower numbers mean hints will be visible more under.

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

Update history pop-up header color

.productfruits--changelog-history-header {
	background-color: #112233 !important;
}