Welcome To Our Customer Service Portal


Slim Embedded 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 Embedded  widget. 

1) Widget header color

2) Widget width and height

3) Widget title font and colors

4) Answer title font and colors

5) Answer text font and colors

6) 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-embedded__header {
    background: red !important;
}

2) Widget width and height

Embedded widget width is to be set for widget container div: 

#nanorep-embedded-widget {
    width: 500px;
    height: 600px;

}

 

3) Widget title font and colors

.widget-embedded__header {
    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:green; /* Font color. You can also use color set in HEX or RGB format */
}

4) 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 */
}

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

6) Links

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