How to Customize CSS

It is possible to change the style of every widget via CSS. Add a link element to your page where the widget should be rendered

<link rel="stylesheet" type="text/css" href="https://mydomain/mypath/mycustom.css">

All possible style information can be retrieved via https://widget.raisenow.com/widgets/{type}/{apikey}/css/dds-widget.min.css. Note that the placeholder type and apikey have to be replaced with your own data.

We recommend to change only background and font color. For all other CSS changes, we do not guarantee proper functioning of the widget.

We also allow to import our LESS as base for your customization. LESS files can be retrieved via http: https://widget.raisenow.com/widgets/{type}/_default/less/styles.less

Font and background color

Here is an example of customizing the radio labels, the headers and the background of input fields in the widget Lema:

#lema-container.lema-container .lema-wrapper .lema-radio-label {
    color: orange;
}
#lema-container.lema-container .lema-wrapper .lema-step-header-text {
    color: blue;
}
#lema-container.lema-container input.getunik-radio:checked+label.getunik-radio-label {
    color: green;
}
#lema-container.lema-container .lema-wrapper .lema-input-text {
    background-color: yellow;
}

Checkboxes and Radioboxes

Checkboxes and Radioboxes are based on images. To modify these elements, the images have to be updated. Check out https://widget.raisenow.com/widgets/plain/_defaul/img/check_radio_sheet.png or use the attached source file sprite.psd.zip

We also provide svg versions of the radio button and checkbox. Use inline style to change the color of the elements.

#dds-container-id.dds-container input[type="checkbox"]:checked + label span {
    background: url("https://mydomain/mypath/check_radio_sheet.png") -19px top no-repeat;
}
#dds-container-id.dds-container input[type="radio"] + label span {
    background: url("https://mydomain/mypath/check_radio_sheet.png") -39px center no-repeat;
}
#dds-container-id.dds-container input[type="radio"]:checked + label span {
    background: url("https://mydomain/mypath/check_radio_sheet.png") -58px center no-repeat;
}
#dds-container-id.dds-container input[type="checkbox"] + label span {
    background: url("https://mydomain/mypath/check_radio_sheet.png") left top no-repeat;
}

INFO: You can render the widget with non-minimized/compressed Javascript and CSS. For that purpose, add the hash ddsdev at the end of the URL of your page (e.g. https://mydomain/mypath/mypage#ddsdev).