Topic display: Style your tabs

By default, the Tabs layout option will use a thin grey border around the active tab and under the inactive tabs.

The color of the inactive tabs depends on which theme you're using. They all use the default color for hyperlinks across your knowledge base, but that color is different depending on your theme:

• Minimalist theme: Will use a color based on your Highlights & Accents color set in Settings > Style
• Classic, Clayton, and Modern themes: Will use a default blue hyperlink color

To update any of the styles for your tabs:

1. Go to Settings > Style.
2. In the Customize HTML, CSS, and JS section, be sure Custom CSS is selected.
3. Copy the appropriate CSS below.
4. Paste it into your Custom CSS pane.
5. Adjust the colors or other details to your liking.
6. Be sure to Save your changes once you're done!

Use the CSS below for step 3. And if you want to change an element of the styles that you don't see listed below, drop a comment on this article with what you're looking for so we can help you and update the documentation to include it!

Active tabs

Use this CSS to change the color of the active/selected tab:

/* Change color of active tab */
.nav-tabs>li.ko-topic-display-tab.active a {
  background-color: #fff; /* tab background color */
  color: #555; /* tab label color */
  border: 1px solid #ddd /* change border/outline */
}

Inactive tabs

Use this CSS to change the color of the inactive tabs and the font color they use:

/* Change color of inactive tabs */
.nav-tabs>li.ko-topic-display-tab:not(.active) a {
  background-color: #ddd; /* tab background color, default is none */
  color: #ddd; /* tab label color */
  border: 1px solid #ddd; /* border around top of tabs, default is transparent */
}

Use this CSS to change the border that displays beneath the inactive tabs:

/* Change inactive tabs border color/thickness */
.nav-tabs {
  border-bottom: 1px solid #ddd;
}