Welcome To Our Customer Service Portal


Slim Floating widget customization

For instructions on how to implement these examples see  How to customize Slim widget? guide.  Note: this guide is applicable only for Slim Float widget. 

1) Widget header color

2) Widget width and height

3) Bottom and side margins

4) Widget title font and colors

5) Answer title font and colors

6) Answer text font and colors

7) Links

 

1) Widget header color

Header color can be changed in Touchpoints menu directly : 

 

If you wish to override the color set there use the following piece of code:

.widget-floating__header {
    background: red !important;
}

2) Widget width and height

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


3) Bottom and side margins

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

4) Widget title font and colors

.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 */
}

5) Answer title font and colors

.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 */
}

6) Answer text font and colors

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 Article editor

.answer-body__html { 
    font-family: 'Josefin Sans', sans-serif;
    color: grey;
}

7) Links

[nr-normalize] a {
    text-decoration: none;
    cursor: pointer;
    color: red;