Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 24, 2020 at 12:26 am #1248015
    Jason

    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.
    cheers,
    Jason

    September 24, 2020 at 9:05 am #1248085
    Rikard

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

    September 25, 2020 at 12:46 am #1248285
    Jason

    sure thing, details below

    September 26, 2020 at 7:22 am #1248565
    Rikard

    Hi,

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

    September 27, 2020 at 9:46 pm #1248876
    Jason

    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?
    Jason

    September 28, 2020 at 7:00 pm #1249123
    Victoria

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

    September 28, 2020 at 9:01 pm #1249175
    Jason

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

    September 30, 2020 at 12:36 am #1249513
    Jason

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

    October 2, 2020 at 5:21 am #1249968
    Ismael

    Hi,

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

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