-
Echo Knowledge Base
-
Add-ons
-
Access Manager
Additional Styling of Category Page
4.3 out Of 5 Stars
3 ratings
5 Stars | 33% | |
4 Stars | 33% | |
3 Stars | 33% | |
2 Stars | 0% | |
1 Stars | 0% |
If you want to further customize your Category Archive page you can use the CSS snippets below.
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.
Please note that we are working on enhancements for the Category Archive Page. If you would like an early beta preview version, please contact us
Move the Category Archive page down
/* Move the Category Archive page down */
#eckb-categories-archive-container-v2 {
margin-top: 100px !important;
}
Background Color
/* Changes the Background Color */
#eckb-categories-archive-container-v2 #eckb-categories-archive__body__content {
background-color: red !important;
}
Page Title - Icon Color
/* 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
/* 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
/* 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
/* Changes Article Title Color */
#eckb-categories-archive-container-v2 .eckb-article-title a {
color:blue !important;
font-family: 'Roboto' !important;
}
Read More Text Color
/* Changes Read More Text Color */
#eckb-categories-archive-container-v2 .eckb-article-read-more {
color: purple !important;
}
Have the size of grids be uniform
/* 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.
/* 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
See the comment in each code block to see the effect it will do.
/* 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
}
/* 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
/* 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; }
}
Â
Â
Â
Â
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.
4.3 out Of 5 Stars
3 ratings
5 Stars | 33% | |
4 Stars | 33% | |
3 Stars | 33% | |
2 Stars | 0% | |
1 Stars | 0% |