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

Change each levels font family, font-weight. Here you can target the individual levels with your own custom CSS. 

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

CSS
				/* 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;
}
			
CSS
				/* Make the sidebar stick when scrolling */
#elay-sidebar-container-v2 {
    position: sticky !important;
    top: 0 !important;
}
			

Orange Background Color – This is the Margin area for the Article Template

Green Background Color – This is the Padding area for the Article Template

Yellow Background color – This is the Article Container, which contains all the individual containers. 

A brief explanation of the Orange Boxes.

 

Heading / Search

This container is where the search box is located.

Left Sidebar

The left sidebar can hold Widgets container, TOC, and the Elegant Layouts Navigation 

Center Content

This container holds the elements like – Article Content from your page builder, Breadcrumbs, Tags, Back navigation button.

Right Sidebar

The right sidebar can hold Widgets container, TOC 

Footer

This container is not currently used but you can hook into it with custom code.

Click on Image to zoom in
Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
5
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?
Table of Contents