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 can be blurry on some 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 to use Data-URIs
• 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. 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.

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

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

From bottom-left or other corners

You need to unset the right and bottom CSS properties first and then set the position.

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

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(.....)
}