Print

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.

Requires KB Template Option

This CSS customization only applies to the KB Template option. If you are using the Current Theme option you will need to style this page through your theme settings or contact the theme company to find out how to customize article page titles.

CSS
/* Changes the article title color */
#eckb-article-page-container-v2 .eckb-article-title {
 color: red !important;
}
CSS
/* Article Page Background Color */
#eckb-article-page-container-v2 {
    background-color: #f4f4f4;
}

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.

CSS
/* 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;
}

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.

CSS
/* 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.

CSS
/* 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; }
}
CSS
/* 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; }
}
Adding Custom CSS to Your Site​

Adding Custom CSS requires some knowledge of CSS. You can add this CSS to your theme settings if that is available or to your child theme. If you do not know how to do this, talk to your web developer.

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?
Previous Adding Custom Section to Articles using Hooks
Next Search Engine Optimization (SEO)
Table of Contents

Recent Articles