Change the font settings of name of categories on the categories page

Development

AI-generated summary

Change the font settings of name of categories on the categories page

AnkitJain seeks help with CSS code to change the font type, color, and weight of category names on the categories page. dax suggests using the browser’s inspector to find the correct CSS class and parent, and provides an example code snippet.

AnkitJain tries the provided code but is unable to change the color. dax offers an alternative code snippet. AnkitJain finds a working solution, modifying the code to target the correct elements and successfully changing the font settings and color.

AnkitJain thanks dax for the help and mentions using the inspect element feature in Firefox to understand CSS codes.

1

Please help with css code to change the type of font, color and weight

Thanks for the help.

I did this but it does not change the color:

.category-list tbody
.category h3 {
font-weight: 370;
font-size: 18;
line-height: 1.9;
color: teal;
font-family: Calibre-Regular, Helvetica, Arial, sans-serif;

2

This really depends of what type of category page you chose, for example for categories with topics the code will be something like this:

.category-list.with-topics .category-name {
    font-size: 25px;
    font-weight: normal;
    color: gray;
}

You need to use the browser’s inspector to find to CSS class (and parent) that you want to use, see

image
image1894Ă—823 76.7 KB

The parent serves to indicate that you want to change the appearance of the category name only on this page and not globally.

To change the font type see Change the default font on your site

The next time before posting use the search function on the top right and you will surely find the answers you are looking for.

This one instead, CSS Tutorial, is a good place to start learning a bit of CSS.

3

Thanks for the reply.

But the code you gave is not doing the change. The one I gave is doing the changes but not changing the color.

Where am I going wrong?

4

Try with

.category-list .category-name {
    font-weight: 370;
    font-size: 18px;
    line-height: 1.9;
    color: teal;
    font-family: Calibre-Regular, Helvetica, Arial, sans-serif;
}
5

The code by you changed fonts of name of sub-categories on the main categories page.

This worked:

.category-list tbody
.category h3 {
   font-weight: 375;
   font-size: 17px;
   line-height: 21px;
   font-family: "Open Sans", Helvetica, sans-serif;
}

.category-list tbody .category h3 a[href] {
    color: black;
}

Thanks a lot for your help. I learnt new things

6

Yes, I am using inspect element feature in firefox to understand the css codes.

Thanks a lot