Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #1248015

    hey there,
    i’m using a blog posts widget on a page, it’s displaying in a grid layout (4 columns).
    i’d like to know if there’s some way to target/add a solid 10px, colored border to the bottom of each post – dependent upon the category the post has been assigned to?
    border-bottom: solid 10px #fcda02;
    like this example
    i am using a child theme.


    Hey Jason,

    Thanks for the screenshot, could you post a link to where we can see the elements in question as well please?

    Best regards,


    sure thing, details below



    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-1024 .avia-content-slider .slide-entry:nth-child(1) {
      border-bottom: 5px solid red;
    .page-id-1024 .avia-content-slider .slide-entry:nth-child(2) {
      border-bottom: 5px solid yellow;
    .page-id-1024 .avia-content-slider .slide-entry:nth-child(3) {
      border-bottom: 5px solid green;
    .page-id-1024 .avia-content-slider .slide-entry:nth-child(4) {
      border-bottom: 5px solid blue;

    Best regards,


    hi Rikard,
    thanks for that, it’s not the css as such (i know how to write that), it’s being able to apply that border & colour automatically to posts (as they are added), & assigned to specific categories.
    so any posts assigned to the hot tips category would have the blue border, any assigned to workshop, yellow (etc, etc).
    i need a way to apply specific css to a category if you like.
    does that explain things a little clearer?


    Hi Jason,

    Well, the grid by itself does not use category classes in its html and so you need to edit the files first to get the classes there, and only then you can add css to use different colors based on a category class.

    Best regards,


    Hi Victoria,
    That makes sense – any chance you could point me in the right direction with regard to those files?


    ok, i’ve found some other references to something similar to what i want to do, but i’m still not having any luck adding a different post style for each category
    i did find this post Grid Layout change background by category but i’m a little stuck on the comment by Yigit

    You can copy the file inside “shortcodes” folder on your child theme and add this code in Functions.php file of your child theme

    i’ve followed along as best i can, but i’m still not getting the unique category css class added to the post (in order to style it).
    any additional pointers?
    thanks heaps,



    Thank you for the update.

    Looks like you have already managed to add the category to each post and apply the appropriate style or borders.

    #top .whats-new-grid article.slide-entry.Recipes {
        border-bottom: solid 10px #fcda02;
    #top .whats-new-grid article.slide-entry.Hot-Tips {
    	border-bottom: solid 10px #11ab6c;

    Let us know if you need anything else.

    Best regards,

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.