Additional Styling of Category Archive Page
If you want to further customize your Category Archive page you can use the CSS snippets below.
Move the Category Archive page down
Copy the URL link to this section to share
CSS
/* Move the Category Archive page down */
#eckb-categories-archive-container-v2 {
margin-top: 100px !important;
}
Background Color
Copy the URL link to this section to share
CSS
/* Changes the Background Color */
#eckb-categories-archive-container-v2 #eckb-categories-archive__body__content {
background-color: red !important;
}
Page Title - Icon Color
Copy the URL link to this section to share
CSS
/* Changes the Page Title Icon Color */
.eckb-category-archive-title .eckb-category-archive-title-icon {
color: #fea208 !important;
}
Page Title - Disc Color and Font Family
Copy the URL link to this section to share
CSS
/* Changes Disc Color */
.eckb-category-archive-title .eckb-category-archive-title-desc {
color: #fea208 !important;
font-family: 'Roboto' !important;
}
Page Title - Color and Font Family
Copy the URL link to this section to share
CSS
/* Changes Page Title Color */
.eckb-category-archive-title .eckb-category-archive-title-name {
color: #fea208 !important;
font-family: 'Roboto' !important;
}
Article Title Color and Font Family
Copy the URL link to this section to share
CSS
/* Changes Article Title Color */
#eckb-categories-archive-container-v2 .eckb-article-title a {
color:blue !important;
font-family: 'Roboto' !important;
}
Read More Text Color
Copy the URL link to this section to share
CSS
/* Changes Read More Text Color */
#eckb-categories-archive-container-v2 .eckb-article-read-more {
color: purple !important;
}
Have the size of grids be uniform
Copy the URL link to this section to share
CSS
/* Sets Min Height to article containers */
#eckb-categories-archive-container-v2 .eckb-category-archive-style-5 .eckb-article-container {
min-height: 193px;
}
Adjust the Sidebar Width and Main Content.
Copy the URL link to this section to share
CSS
/* Sets Widths of the sidebar and Main content
In this example:
First value (30%) is the left sidebar width.
Second value (70%) is the main content width.
Third value (0%) is the right sidebar width ( if there is one )
*/
#eckb-categories-archive-container-v2 #eckb-categories-archive__body {
grid-template-columns: 30% 70% 0 !important;
}
Hiding Features
Copy the URL link to this section to share
See the comment in each code block to see the effect it will do.
CSS
/* This will hide all the Meta Data ( Date / Author / Category ) */
#eckb-categories-archive-container-v2 .eckb-article-metadata {
display:none !important
}
CSS
/* This will hide the Date ONLY */
#eckb-categories-archive-container-v2 .eckb-article-posted-on {
display:none !important
}
CSS
/* This will hide the Author ONLY */
#eckb-categories-archive-container-v2 .eckb-article-byline {
display:none !important
}
CSS
/* This will hide the Category ONLY */
#eckb-categories-archive-container-v2 .eckb-article-categories {
display:none !important
}
CSS
/* This will hide the Read More link */
#eckb-categories-archive-container-v2 .eckb-article-read-more {
display:none !important
}
Changing the Order of the Sidebars on Mobile
Copy the URL link to this section to share
CSS
/* Display order: Content / Left Sidebar / Right Sidebar
This will show the content first and then the sidebars last on mobile.
*/
@media only screen and (max-width: 768px) {
#eckb-categories-archive-container-v2 #eckb-categories-archive__body__content { order: 1; }
#eckb-categories-archive-container-v2 #eckb-categories-archive__body__left-sidebar { order: 2; }
#eckb-categories-archive-container-v2 #eckb-categories-archive__body__right-sidebar { order: 3; }
}
