How to change color of a category title on the homepage?

  • Unknown's avatar
    yhmmagazine · Member ·

    Is there a code to change the color of a category on the homepage? I would like to change the pre-hover and hovering colors.

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi there, sure. You would find the ID for each item, and add some CSS. It might look like this, but with your correct colors and IDs:

    #menu-item-15094 a {
	color: orange;
}	

#menu-item-15094 a:hover {
	color: blue;
}

    And, if you need help finding the element you’re working on, here’s how to use Inspect Element to find it:
    https://wordpress.com/support/custom-design/how-to-find-your-themes-css/#chrome

    Hoping that helps!

  • Unknown's avatar
    yhmmagazine · Member ·

    Hello!

    Thanks; this works great for the categories that show up in the menu/navbar. I adjusted the code for the categories that show up the next post on the homepage.

    .entry-cats a {
    color: orange;
    }

    .entry-cats a:hover {
    color: blue;
    }

    Would you be able to share any insight on how to display only one category at a time?

    For example, on the homepage of yhmmagazine.com, the post “Camille Hoffman; Art, Cultural Identity and Polly Pockets” has three categories listed (Culture, Editors’ Picks, Muse). I would only like to display one. I tried using the code below to remove one category, but it actually removes the post from showing up on the homepage. Thoughts?

    .home .category-editors-picks {display: none;}

  • kokkieh · Staff ·

    Would you be able to share any insight on how to display only one category at a time?

    Do you mean in the list of categories appearing in the post meta section, under the publication date?

    It’s possible using CSS:

    div.entry-cats a:not(:first-child) {
	display: none;
}

    That will hide all but the first category from the list. However, there is no way to hide the commas that appear between the category names. Hiding those would require editing the theme’s PHP files themselves (which require our Business Plan, and creating a child theme), and if you did that you could just as well modify the PHP code that determines how many categories are listed.

    I would only like to display one. I tried using the code below to remove one category, but it actually removes the post from showing up on the homepage. Thoughts?

    .home .category-editors-picks {display: none;}

    That will hide the posts themselves, yes, as that code is targeting any HTML element on the page that has the class, .category-editors-picks assigned, which includes any post assigned to that category.

    That class is not assigned to the list of categories appearing under the post publication date.

  • The topic ‘How to change color of a category title on the homepage?’ is closed to new replies.