Additional Styling of Article Page
If you want to further customize your Article page you can use the CSS snippets below. We will be adding these as settings in the future, for now, you can add this CSS to add this further customization.
Article Page - Title
/* Changes the article title color */
#eckb-article-page-container-v2 .eckb-article-title {
color: red !important;
}
Article Page Background Color
/* Article Page Background Color */
#eckb-article-page-container-v2 {
background-color: #f4f4f4;
}
Article Center Content - Font Family
The article content styling ( Font family , size ) etc.. is controlled by either your active theme or your page builder. If for some reason your theme does not have these settings, you can apply this custom CSS to add the font family to your article.
Note: Make sure you change the font family name to the one you wish to use:
font-family: sans-serif !important;Â Â If this does not work, your website might not support that font family or you have a typo.
/* Article Page font family */
#eckb-article-page-container-v2 #eckb-article-content-body,
#eckb-article-page-container-v2 #eckb-article-content-body p,
#eckb-article-page-container-v2 #eckb-article-content-body h1,
#eckb-article-page-container-v2 #eckb-article-content-body h2,
#eckb-article-page-container-v2 #eckb-article-content-body h3,
#eckb-article-page-container-v2 #eckb-article-content-body h4,
#eckb-article-page-container-v2 #eckb-article-content-body h5,
#eckb-article-page-container-v2 #eckb-article-content-body h6,
#eckb-article-page-container-v2 #eckb-article-content-body ul,
#eckb-article-page-container-v2 #eckb-article-content-body ol {
font-family: sans-serif !important;
}
Changing the Order of the Sidebars on Mobile
Display Order:Â The article content will be shown first, followed by the Left Sidebar then Right sidebar.
Please note: If you have changed your mobile values in the KB Editor settings, you will need to adjust this value: max-width: 768px in these examples to match your new settings.
/* Display order: Content / Left Sidebar / Right Sidebar */
@media only screen and (max-width: 768px) {
#eckb-article-page-container-v2 #eckb-article-content { order: 1; }
#eckb-article-page-container-v2 #eckb-article-left-sidebar { order: 2; }
#eckb-article-page-container-v2 #eckb-article-right-sidebar { order: 3; }
}
Display Order:Â The article content will be shown first, followed by the Right Sidebar then Left sidebar.
/* Display order: Content / Right Sidebar / Left Sidebar */
@media only screen and (max-width: 768px) {
#eckb-article-page-container-v2 #eckb-article-content { order: 1; }
#eckb-article-page-container-v2 #eckb-article-left-sidebar { order: 3; }
#eckb-article-page-container-v2 #eckb-article-right-sidebar { order: 2; }
}
Hide Both sidebars on Mobile
/* Do not display Sidebars on Mobile */
@media only screen and (max-width: 768px) {
#eckb-article-page-container-v2 #eckb-article-left-sidebar { display:none !important; }
#eckb-article-page-container-v2 #eckb-article-right-sidebar { display:none !important; }
}
Table of Contents ( TOC )
Change each levels font family, font-weight. Here you can target the individual levels with your own custom CSS.Â
/* Change the Font Family and Font weight of Level 1 */
#eckb-article-page-container-v2 .eckb-article-toc .eckb-article-toc__level-1 a {
font-family: fantasy !important;
font-weight: bold;
}
/* Change the Font Family and Font weight of Level 2 */
#eckb-article-page-container-v2 .eckb-article-toc .eckb-article-toc__level-2 a {
font-family: fantasy !important;
font-weight: bold;
}
/* Change the Font Family and Font weight of Level 3 */
#eckb-article-page-container-v2 .eckb-article-toc .eckb-article-toc__level-3 a {
font-family: fantasy !important;
font-weight: bold;
}
Change list spacing
/* Change the spacing ( Margin ) of list items. */
#eckb-article-page-container-v2 .eckb-article-toc .eckb-article-toc__inner ul li {
margin: 10px 10px 10px 10px !important;
}
Make the article sidebar 'sticky'
/* Make the sidebar stick when scrolling */
#elay-sidebar-container-v2 {
position: sticky !important;
top: 0 !important;
}
