For instructions on how to implement these examples see How to customize Slim widget.
If you want to override the color set, use the following CSS code:
.widget-side__header, .core-search__query-field { background: red ; }
To change the side opener background color, override the following classes:
.widget-side__opener-container, .widget-side__opener { background: red ; }
You can also change the Side opener icon:
To do so, on the Basics tab of the widget customization page enter the new HTML code in the Custom Opener field.
To increase the size of the Side opener to match your image size, do it by modifying the following classes:
.widget-side__opener-content, .widget-side__opener { width: 60px ; }
For expanded state:
.widget-side--expanded div.widget-side__wrapper{ width: 500px ; }
.widget-side__caption { font-family: 'Josefin Sans', sans-serif; /* If you use a custom font type, 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 */ }
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-header__title-text-node { font-family: 'Josefin Sans', sans-serif; /* If you use a custom font type, 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-body__html { font-family: 'Josefin Sans', sans-serif; }
[nr-normalize] a { text-decoration: none ; cursor: pointer ; color: red ; }