Additional customization of KB Main page
If you want to further customize your KB Main page you can use the CSS snippets below.
For additional personalization of the main page’s modular layout, you have the option to incorporate custom CSS within this section at admin > knowledge base > configuration > general > settings page. Alternatively, you may choose to integrate it into your child theme for a more cohesive customization approach.
CSS
/* Row Margins Top / Bottom
Choose which Row you wish to target
#epkb-ml__row-1
#epkb-ml__row-2
#epkb-ml__row-3
#epkb-ml__row-4
This example adds top and bottom margin for row 1
*/
#epkb-ml__row-1 {
margin-top: 100px;
margin-bottom: 100px;
}
Main Page Page - Width
This code adjusts the length of categories to match the length of the page content, making them full width.
Please note: If this code doesn’t work, your theme’s parent container may be restricting the width. You’ll need to adjust that as well. Some themes offer a Full Width page option.
CSS
/* Makes the length of the categories the same as the length of the page content, full width. */
#epkb-main-page-container.epkb-basic-template .epkb-boxed,
#epkb-main-page-container.epkb-basic-template .epkb-full #epkb-content-container {
max-width: 100% !important;
}
Category Title Line Height
CSS
/* Changes the line height of the text adds more spacing */
#epkb-main-page-container .epkb-cat-name {
line-height: 1.5 !important;
}
Hide Articles Icon
This code hides the article icons on the main page.
CSS
/* Hide Article Icons */
.eckb-article-title__icon {
display:none !important;
}
Show / Hide Text Toggle Color
CSS
/* Change Show / Hide Text Color */
#epkb-main-page-container .epkb-show-text,
#epkb-main-page-container .epkb-hide-text {
color: #FF0000;
}
