Welcome To Our Customer Service Portal


Slim Support Center 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 Support Center widget type.

If the widget you want to adjust is hosted in our Support Center, don't hesitate to contact us for any design change requests and we will make the necessary adjustments. 

1) Widget width and height

2) Answer title font and colors

3) Answer text font and colors

4) Links

1) Widget width and height

Since this widget type is basically just a search bar from regular embedded widget  its width can be limited by changing container div style directly: 

#nanorep-embedded-widget {

width: 500px; 

}

As for the widget height, it is highly dependent on font settings in search bar. If you decide to increase/decrease height of search bar, you need to make sure that all the settings below are also increased/decreased:

.widget-embedded--support-center .query-field__placeholder, .query-field__input{
    padding: 25px 15px 25px; /* padding bottom, padding right, padding top */
    line-height: 20px; /* should not be less than font-size value */
    font-size: 25px; /* should not be bigger than height value
    height: 90px;
}

 

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

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

4) Links

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