Welcome To Our Customer Service Portal


Slim Side 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 and side opener colors

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

8) Custom header and footer

1) Widget header and side opener colors

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-side__header, .core-search__query-field  {
    background: red ;
}

In order to change side opener background color override these classes:

 .widget-side__opener-container, .widget-side__opener {
    
    background: red;
}

You can also change Side opener icon completely:

 In order to do it, go to Nanorep console =>  Touchpoints => Basics tab and input new HTML code Custom opener field, for example, base64 encoded image:

If you need to increase size of opener to match your image size, do it by modifying these classes: 

.widget-side__opener-content, .widget-side__opener {

    width: 60px
}

 

2) Widget width

For expanded state:

.widget-side--expanded  div.widget-side__wrapper{

    width: 500px
}

4) Widget title font and colors

.widget-side__caption {
    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: white; /* 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: green; /* 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;
}

7) Links

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

 

8) Custom header and footer 

It is possible to enhance side widget with custom header and footer. Just like for custom opener, it can be done in Nanorep console => Touchpoints => Basics tab:

You can use any HTML code there, for this example we will add images to footer and header area: