[Resolved] Coloured block around post category

Home Forums Support Coloured block around post category

  • This topic has 10 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1337231
    nomadiceman

    I am using the Avery theme and trying to have a coloured block around the category name

    https://gpsites.co/avery/category/lifestyle/

    I want to give each category its own colour for the block

    Im struggling to figure that out in CSS.

    Any ideas out to achieve that?

    Thank you again for your help

    #1337248
    David
    Staff
    Customer Support

    Hi there,

    if the block is just around the title then use this CSS for the default color:

    .category .page-hero h1 {
        display: inline;
        padding: 20px;
        background-color: red;
    }

    then you will need to add after that rule a separate CSS rule for each Category eg.

    .category-lifestyle .page-hero h1 {
        background-color: yellow;
    }
    #1337322
    nomadiceman

    Thank you for this. I’ll give it a try

    The block was going to be around just the category name on the archive and also single pages

    For example, the “music” category would have a green coloured background as a block. The “books” category would have a brown block

    I need to also remove the little folder symbol too that’s near the category tags

    #1337387
    David
    Staff
    Customer Support

    Try this method:

    /* Remove icon */
    
    .cat-links:before {
        display: none;
    }
    
    /* Remove comma delimiters */
    
    .cat-links {
        display: block;
        font-size: 0;
        margin-bottom: 20px;
    }
    
    /* Base style tag */
    
    .cat-links a {
        font-size: 14px;
        margin-right: 5px;
        padding: 5px;
        background-color: red;
        color: #fff !important;
    }
    
    /* Style specific category */
    
    .cat-links a[href*="/inspiration"] {
        background-color: green;
    }
    #1337622
    JOAQUIM GALANTE

    Nice David, but now the color is red for all categories, how can ia personalize the colors to put diffrent colors for each category ?

    #1337642
    JOAQUIM GALANTE

    I discover it. Thanks a lot David

    #1337700
    David
    Staff
    Customer Support
    #1337988
    nomadiceman

    JOAQUIM GALANTE any chance you can share how you did it?

    Thanks David for your help once again

    #1337995
    nomadiceman

    ive figured it out

    change the url for each category and colour in this part of the code

    /* Style specific category */
    
    .cat-links a[href*="/inspiration"] {
        background-color: green;
    }

    awesome. thanks guys. I wouldn’t have been able to figure that one out. 🙂

    #1338021
    nomadiceman

    Great Ive just figured this out. I have the WP Show Posts and using it on the front page. This css works to do the same thing 🙂 I believe it is correct

    .wp-show-posts-terms {
        display: block;
        font-size: 0;
        margin-bottom: 20px;
    }
    
    .wp-show-posts-terms a {
        font-size: 14px;
        margin-right: 5px;
        padding: 5px;
        background-color: red;
        color: #fff !important;
    }
    
    .wp-show-posts-terms a[href*="/inspiration"] {
        background-color: green;
    }

    Thanks for your help again mate.

    #1338407
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.