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: Adjust the max-width: 768px as necessary to match your requirements.
/* 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;
}
Template Padding / Margin Diagram
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.
