Additional Styling of Category Page

Created OnAugust 12, 2020

Updated OnFebruary 14, 2021

By:Dave

4 out Of 5 Stars

5 Stars		0%
4 Stars		50%
3 Stars		50%
2 Stars		0%
1 Stars		0%

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.

Archive Page - Background Color

Copy the URL link to this section to share

Custom CSS

#eckb-categories-archive-container-v2 #eckb-categories-archive__body__content {
background-color: red !important;
}

Archive Page Title - Icon Color

Copy the URL link to this section to share

Custom CSS

.eckb-category-archive-title .eckb-category-archive-title-icon {
color: #fea208 !important;
}

Archive Page Title - Disc Color

Copy the URL link to this section to share

Custom CSS

.eckb-category-archive-title .eckb-category-archive-title-desc {
color: #fea208 !important;
}

Archive Page Title - Name Color

Copy the URL link to this section to share

Custom CSS

.eckb-category-archive-title .eckb-category-archive-title-name {
color: #fea208 !important;
}

Article Title Color

Copy the URL link to this section to share

Custom CSS

#eckb-categories-archive-container-v2 .eckb-article-title a {
color:blue !important;
}

Read More Text Color

Copy the URL link to this section to share

Custom CSS

#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

Custom CSS

#eckb-categories-archive-container-v2 .eckb-category-archive-style-5 .eckb-article-container {
min-height: 193px;
}

Hiding Features

Copy the URL link to this section to share

Custom CSS

This will hide all the Meta Data ( Date / Author / Category )

#eckb-categories-archive-container-v2 .eckb-article-metadata {
display:none !important
}

This will hide the Date ONLY

#eckb-categories-archive-container-v2 .eckb-article-posted-on {
display:none !important
}

This will hide the Author ONLY

#eckb-categories-archive-container-v2 .eckb-article-byline {
display:none !important
}

This will hide the Category ONLY

#eckb-categories-archive-container-v2 .eckb-article-categories {
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%

Tags:

Table of Contents