Skip to main content

Knowledge Box Theme

Search Bar Section

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

CSS Classes

Class NameDescription
.ai12z-suggest-containerStyles the knowledge box background color.
.ai12z-suggest-answerCustomizes the font size of the response text.
.ai12zBtnCustomizes the button background color and text color.
.custom-privacyCustomize the privacy statement to the knowledge box

CSS Variables

Variable NameDescription
--ai12z-knowledge-box-bg-colorCustomizes the background color of the response text.
--ai12z-knowledge-box-font-sizeCustomizes the font size of the response text.
--ai12z-knowledge-box-button-bgcolorCustomizes the Knowledge Box button background color.
--ai12z-knowledge-box-button-colorCustomizes the Knowledge Box button text color.

knowledgeBox

Privacy Section

The Privacy Statement section can be customized using CSS variables.

Variable NameDescription
--ai12z-knowledge-box-privacy-colorCustomizes the font color of the privacy statement.
--ai12z-knowledge-box-privacy-font-sizeCustomizes the font size of the privacy statement.

privacy policy


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