Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 25, 2019 at 12:40 pm #1113209
    emsbrand

    Hello there,

    We would like to style the blog post single view and blog post listing (Blog Post Slider) with automatically assigned custom CSS class using the php function modulus.

    We need 4 different classes also we will be using % 4.

    Also, in both single view and listing view (archive and/or post slider):
    – the 1st, 5th, 9th, etc. posts will get the first custom class.
    – the 2nd, 6th, 10th, etc. posts will get the second custom class.
    – the 3rd, 7th, 11th, etc. posts will get the third custom class.
    – the 4th, 8th, 12th, etc. posts will get the fourth custom class.

    We are using a child Theme so hopefully it is possible to modify the files and keep the changes when Theme updates are made.

    Thank you in advance.

    June 26, 2019 at 5:56 am #1113468
    Rikard

    Hey EMSBRAND,

    Maybe it would be easier if you target those elements using nth-child instead? https://css-tricks.com/almanac/selectors/n/nth-child/

    Best regards,
    Rikard

    June 26, 2019 at 9:21 am #1113541
    emsbrand

    Hello Rikard,

    that would work in an Archive Page or Posts Listing but not in the actual Post.
    I’ll try to explain the expected results:

    • the 1st, 5th, 9th, etc. post will get the class bk-red-txt-wht
    • the 2nd, 6th, 10th, etc. post will get the class bk-blk-txt-wht
    • the 3rd, 7th, 11th, etc. post will get the class bk-dgry-txt-wht
    • the 4th, 8th, 12th, etc. post will get the class bk-lgry-txt-blk

    To display a list of the Posts we will use CSS but when a Post is clicked we want to display the header element with the respective background and text color combination.

    Thank you for your support,
    EMSBRAND

    June 27, 2019 at 3:55 am #1113773
    Rikard

    Hi,

    Thanks for the update, I don’t understand why you wouldn’t be able to target single posts with nth-child, but I’m sure there’s a good reason. Anyway, what you are looking to achieve would be considered custom work and would be out of scope of theme support. We can help you out with small changes if you should get any problems along the way though.

    Best regards,
    Rikard

    June 27, 2019 at 5:09 pm #1114024
    emsbrand

    Hi,

    Because when someone navigates to /blog/post1/ There is no nth-child to style.
    In the end we sorted our problem.

    Thank you for assistance,
    EMSBRAND

    PS. The topic can be closed.

    June 27, 2019 at 5:14 pm #1114026
    Yigit

    Hi!

    Glad you figured it out! Let us know if you have any other questions or issues and enjoy the rest of your day :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Automatically Assign CSS Classes for Blog Post Single View and Blog Post Listing’ is closed to new replies.