Custom Widget Styles

In addition to changing the widget tabs, labels, and headers by using the built-in settings, you can also customize its look and feel using CSS and Javascript.

Use the Custom Widget Styles section of KB settings > Widget to add custom CSS to style your widget.

You can play around with a right-click and inspect on various fields or areas in the widget to try to identify the classes being used. Here are a few of the most frequently changed styles. You can copy and paste these in to your Custom Widget Styles section and then change the appropriate text to make adjustments.

Change the background color of the tabs

To use this code, update the value used for background-color in row 3 with the color of your choice. Here, we use a hex code but you can use rgb values, like rgb(0, 151, 167).

/* Tab color */
.widget .widget__nav a {
    background-color: #0097a7;
}

Change the font on the tab labels

To use this code, update the font-family in row 3 from Neuton to a family of your choice.

/* Tab label font used (must be defined on the site where widget is being used */
.widget .widget__nav a {
  font-family: Neuton;
}

Change the color of all hyperlinks

To use this code, update the value used for color in row 7 with color of your choice. Here, we use a hex code but you can use rgb values, like rgb(0, 151, 167).

/* Change the color of hyperlinks */
.article-links a,
.list-links a,
.list-links i,
.btn-upload,
a {
    color: #1f9baa;
}

Change the contact form submit button color

To use this code, update the value used for background-color in row 3 with the color of your choice. Here, we use a hex code but you can use rgb values, like rgb(0, 151, 167).

/* Contact Form submit button color */
.form .form-submit {
    background-color: #fc9f00;
}

Change the > icon next to articles in the Knowledge tab and search results

We use a FontAwesome chevron-right icon next to the titles of articles in the Knowledge tab and the search results.

If you'd like to change this to use a different Font Awesome icon, you'll need to know the unicode for the Font Awesome icon you'd like to use. Replace the f15c in row 5 below with that unicode. Be sure you keep the "\" around it:

/* Change the default ">" icon in the Knowledge tab navigation (chevron-right)
and the Search results (angle-right), including Contact Form search results */
.list-links .fas.fa-chevron-right:before,
.list-links .fas.fa-angle-right:before {
  content: "\f15c" !important;
}

Hide one of the widget's tabs

You can use CSS to hide one or more of the tabs from the widget. Refer to Hide one of the Widget 2.0 tabs for full instructions.

Custom article styles in the widget

Some authors want to style article elements differently in the widget from their main knowledge base (such as article title, etc.).

For these customizations, instead of using KB settings > Widget, add the Custom CSS directly to Customize > Style (HTML & CSS). Preface your class selectors with .w-documentation-article, which targets articles displayed in the widget rather than in the knowledge base.

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Add the Custom CSS for your widget article styles.
4. Save.

For example, h1.hg-article-title is the CSS selector for the article title in your full knowledge base. This sample code will let you set the article title to a 20px font-size in the widget only (you can update the font-size in row 2 to any size you'd like):

.w-documentation-article h1.hg-article-title {
  font-size: 20px;
}