For instructions on how to implement these examples, see How to customize the Slim widget
Header color can be changed directly in the Widget settings:
To override the color set, use the following CSS code:
.widget-floating__header {
background: red !important;
}
For both expanded and minimized states:
.widget-floating__wrapper {
width:600px;
}
Only for expanded state:
.widget-floating--state-2 > .widget-floating__wrapper {
width: 600px;
height: 720px;
}
Only for minimized state:
.widget-floating--state-0 > .widget-floating__wrapper , .widget-floating--state-1 > .widget-floating__wrapper {
width: 650px;
height: 200px;
}
For both expanded and minimized states:
widget-floating__wrapper {
margin-left: 100px;
margin-bottom: 100px;
}
Only for expanded state:
.widget-floating--state-2 > .widget-floating__wrapper {
margin-left: 100px;
margin-bottom: 100px;
}
Only for minimized state:
.widget-floating--state-0 > .widget-floating__wrapper , .widget-floating--state-1 > .widget-floating__wrapper {
margin-left: 100px;
margin-bottom: 100px;
}
.widget-floating__title {
font-family: 'Josefin Sans', sans-serif;
/* If you use custom font, make sure to link it at parent page */
font-size: 20px;
font-weight: bold;
/* Bold text */
text-decoration: underline;
/* Underlined text */
font-style: italic;
/* Italic text */
color: grey;
/* Font color. You can also use color set in HEX or RGB format */
}
.answer-header__title-text-node {
font-family: 'Josefin Sans', sans-serif;
/* If you use custom font, make sure to link it at parent page */
font-size: 20px;
font-weight: bold;
/* Bold text */
text-decoration: underline;
/* Underlined text */
font-style: italic;
/* Italic text */
color: grey;
/* Font color. You can also use color set in HEX or RGB format */
}
Note that we do not recommend overriding any settings except font-family and text color. All other text style changes are to be done in the Article Editor.
.answer-body__html { font-family: 'Josefin Sans', sans-serif; color: grey; }
[nr-normalize] a { text-decoration: none; cursor: pointer; color: red; }
You can display a message when a customer's question is too long and hence it is unlikely to receive a relevant answer.
To define a message, do the following: