Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1081507

    Could not find this searching through previous topics. I found how to change the title & background color of the portfolio grid element entries. Which is below. However what if I want different background colors to go with the categories. I.e. portfolio category 1 entries gets background color blue, portfolio category 2 entries gets background color orange, etc. How do I do this?
    // CSS – Portfolio Grid Title and Background

    /* Font */
    .grid-entry .grid-entry-title {
    background: transparent;
    font-weight: 800;

    /* Title background */
    .grid-entry .grid-content,
    /* Arrow*/
    .grid-entry .grid-content .avia-arrow {
    background: #35383c


    Hey rkumar12,

    Not sure what this code does and what you need to achieve, send us a link of your web site.

    Best regards,


    See in private content the link to what I am referring to. See the box w/ title for each portfolio entry that has a gray background below the featured image? I was wondering if there is a way to have multiple background colors here on the basis of categoryies For example:
    Category A gets a blue box
    Category B gets a green box


    You can adress the different entries by portfolio-category … i just tested that because it sounds usefull … :-)
    At least every portfolio-entry shown through the masonry-grid has a CSS-selector added to them based on the portfolio-category.

    av-masonry-entry.portfolio_entries-[%your-portfolio-slug%] .av-masonry-outerimage-container {
      background-color: blue;

    Replace [%your-portfolio-slug%] with the sanitized form of your category-title.

    So i think that could work for your grid too … which element do you use to show the portfolio-grid?
    I do not see the private content … so this is as far as i can help.


    I guess only moderators can see the private content. I am using a portfolio grid element. Will this code work using this as well?


    Hi rkumar12,

    You can use this css code pattern:

    #top .CATEGORY_sort.grid-entry .grid-content, 
    #top .CATEGORY_sort.grid-entry .grid-content .avia-arrow {
        background-color: red;

    so it should look like this on your case:

    #top .case-studies_sort.grid-entry .grid-content, 
    #top .case-studies_sort.grid-entry .grid-content .avia-arrow {
        background-color: red;
    #top .workforce-management_sort.grid-entry .grid-content, 
    #top .workforce-management_sort.grid-entry .grid-content .avia-arrow {
        background-color: red;
    #top .engineering_sort.grid-entry .grid-content, 
    #top .engineering_sort.grid-entry .grid-content .avia-arrow {
        background-color: blue;

    Best regards,


    This works perfectly! Thank you!



    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Use different background colors on portfolio grid element PER Category’ is closed to new replies.