Customize Life Ring Button

Change icon

You change the Life Ring Button icon via the Custom CSS section. We strongly recommend using SVG format for icons. Otherwise, icons may appear blurry on certain devices.

.productfruits--lifering-ico {
    --img: url(INSERT THE FULL URL HERE);
    -webkit-mask-image: var(--img) !important;
    mask-image: var(--img) !important;
}

Notes

• Some browsers don't support HTTP/HTTPS URLs with the mask-image CSS property. Try using Data-URIs instead.
• For example, you can use this tool to generate the Data URI from your image. 

Change the size of the launcher

.productfruits--lifering {
    height: 40px !important;
    width: 40px !important;
}

Notes

• The built-in icon in the button should adjust itself
• If you also use text, it might overlap with smaller launcher button sizes. To correct this, use a larger size or change the font size with font-size CSS property.

Change the position of the launcher

From the bottom-right corner (default)

The first option is to use the settings in the Life Ring Button Design tab. This will offset the position by the X or Y axis.

The second option is to use Custom CSS. In this case, do not use the Design position fields shown above. 

.productfruits--lifering {
    right: 200px;
    bottom: 200px;
}

From bottom-left or other corners

This option allow you to unset the right and bottom CSS properties first and then set the position.

.productfruits--lifering {
    right: unset;
    bottom: unset;
    top: 200px;
    left: 200px;
}

Removing the img at the top left of the modal

This will get rid of the secondary image of a lifesaver.

.productfruits--lifering-modal-title::before {
visibility: hidden !important;
}

Change the drag-handle

If your Life Ring Button is enabled to be moved by users manually on the screen, you might want to adjust the design of the drag handle which is displayed on mouse hover. Use the following snippet:

/* For the handle container */
.pf-life-ring-launcher-move {
	backgroud-color: red;
}

/* For the handle icon */
.pf-life-ring-launcher-move::after {
	background-image: url(.....)
}