Print

Additional Styling of Category Page

If you want to further customize your Category Archive page you can use the CSS snippets below.

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 Custom Post Type Category Archive Pages.

CSS
/* Changes the Background Color */
#eckb-categories-archive-container-v2 #eckb-categories-archive__body__content {
   background-color: red !important;
}
CSS
/* Changes the Page Title Icon Color */
.eckb-category-archive-title .eckb-category-archive-title-icon {
   color: #fea208 !important;
}
CSS
/* Changes Disc Color */
.eckb-category-archive-title .eckb-category-archive-title-desc {
   color: #fea208 !important;
}
CSS
/* Changes Page Title Color */
.eckb-category-archive-title .eckb-category-archive-title-name {
   color: #fea208 !important;
}
CSS
/* Changes Article Title Color */
#eckb-categories-archive-container-v2 .eckb-article-title a {
color:blue !important;
}
CSS
/* Changes Read More Text Color */
#eckb-categories-archive-container-v2 .eckb-article-read-more {
   color: purple !important;
}
CSS
/* Sets Min Height to article containers */
#eckb-categories-archive-container-v2 .eckb-category-archive-style-5 .eckb-article-container {
   min-height: 193px;
}
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;
}

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
}

 

 

 

 

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?
4 out Of 5 Stars
5 Stars 0%
4 Stars 50%
3 Stars 50%
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 Creating Custom Category Pages
Table of Contents

Recent Articles