customize category items (font and buttons/wrappers) in blog overview

shift_ict · May 2022

Dear reader,

I'e created a page where you can filter the blogs by category. I need to customize the category items that appear upon clicking the filter, and I cannot figure out how.

The page I'm referring to is https://kenniscentrumtgg.nl/artikelen-en-publicaties/ (code ktgg).

I am looking for a similar customization option as I've done for the category items on the side-bar-menu, (I succeeded with the following css that I found somewhere on this forum):

html body .widget ul li{

font-size:16px !important;

}

html body .widget ul li > a{

padding:1px 10px !important;

}

Can you provide me with the right instructions/code to do the same but then for the catergory list in the blog overview page?

Also, I would like to control how the list is organized: on mobile: the list appears in two columns, and I want them to appear in one column. So I would to add some code that gives that specific instruction for the mobile screens.

Thank you in advance,

Irma

Phil · May 2022

Hi,

Please, use the following CSS code:

#Filters .categories a{
   font-size: 12px!important;
   padding: 0!important;
}
@media only screen and (max-width: 767px){
   #Filters .filters_wrapper ul li{
      width: 100%!important;
   }
}

Thanks

shift_ict · May 2022

Thank you so much. That worked.

Now, the categories appear in alphabetical order. Can I change that to appearance based on how many blogs fall under the category, or adjust it manually one-by-one?

And one more question: the X icon to close the category list is almost black on hover. I cannot seem to change that in the theme options either. Do you have a code for me to change that close-icon and the icon-background?

Phil · May 2022

1) There is no option to set the order of the categories. To change that you would have to modify the theme files, but we do not provide help with such customization.

2) Do you mean this icon?:

If yes, please, use the following code:

#Filters .categories .close a:hover{
   background-color: #f00!important;
}

Thanks

shift_ict · May 2022

Yes, perfect! Exactly what I needed.

Thank you!

customize category items (font and buttons/wrappers) in blog overview

Comments