Knowledge Box Theme

Search Bar Section

The Knowledge Box search bar can be customized using CSS classes and CSS variables.

CSS Classes

Class Name	Description
.ai12z-suggest-container	Styles the knowledge box background color.
.ai12z-suggest-answer	Customizes the font size of the response text.
.ai12zBtn	Customizes the button background color and text color.
.custom-privacy	Customize the privacy statement to the knowledge box

CSS Variables

Variable Name	Description
--ai12z-knowledge-box-bg-color	Customizes the background color of the response text.
--ai12z-knowledge-box-font-size	Customizes the font size of the response text.
--ai12z-knowledge-box-button-bgcolor	Customizes the Knowledge Box button background color.
--ai12z-knowledge-box-button-color	Customizes the Knowledge Box button text color.

Privacy Section

The Privacy Statement section can be customized using CSS variables.

Variable Name	Description
--ai12z-knowledge-box-privacy-color	Customizes the font color of the privacy statement.
--ai12z-knowledge-box-privacy-font-size	Customizes the font size of the privacy statement.

---

Usage Example

.ai12z-suggest-container {
  background-color: var(--ai12z-knowledge-box-bg-color);
}

.ai12z-suggest-answer {
  font-size: var(--ai12z-knowledge-box-font-size);
}

.ai12zBtn {
  background-color: var(--ai12z-knowledge-box-button-bgcolor);
  color: var(--ai12z-knowledge-box-button-color);
}

.custom-privacy {
  color: var(--ai12z-knowledge-box-privacy-color);
  font-size: var(--ai12z-knowledge-box-privacy-font-size);
}