Slim Support Center widget customization

Slim Support Center widget customization

For instructions on how to implement these examples see How to customize the Slim widget? guide.

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

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

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

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

Customize links

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