Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 21, 2019 at 6:17 pm #1081507
    rkumar12

    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 {
    color:#ffffff;
    background: transparent;
    font-weight: 800;
    }

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

    March 24, 2019 at 6:46 pm #1082320
    Basilis

    Hey rkumar12,

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

    Best regards,
    Basilis

    March 27, 2019 at 5:47 pm #1083716
    rkumar12

    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

    March 27, 2019 at 6:03 pm #1083729
    cg

    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.

    March 27, 2019 at 6:14 pm #1083736
    rkumar12

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

    March 30, 2019 at 6:13 pm #1084912
    Nikko

    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,
    Nikko

    April 1, 2019 at 3:11 pm #1085550
    rkumar12

    This works perfectly! Thank you!

    April 1, 2019 at 6:17 pm #1085613
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

  • Author
    Posts
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.