How to add different classes to each related post

  • Resolved jamo_dodger

    (@jamo_dodger)


    11 years ago

    Hello,

    Great plugin it works perfectly.

    I am currently displaying 6 related posts at the bottom of each article:

    Post 1 | Post 2 | Post 3
    Post 4 | Post 5 | Post 6

    I would like to the plugin to completely fill the container they are in (its about 780 pixels wide.)

    Currently I have set each list item/thumbnail to be 240 pixels wide with 10px of margin either side = 10 + 240 + 10 + 10 + 240 + 10 + 10 + 240 + 10 = 780 pixels and this may have to do. I would like to apply margin to only the middle post on each line so the left and right list items/images are flush against the container edge, yet I cannot target these 2nd and 5th posts to do this.

    Any ideas?

    Regards,

    James

    https://www.ads-software.com/plugins/wordpress-23-related-posts-plugin/

Viewing 5 replies - 1 through 5 (of 5 total)
  • silvoslaf

    (@silvoslaf)

    Hey James, thanks for reaching out, I’ll gladly help!

    But in order to do so, I’m gonna need some more info — is there a chance you could send me a link to one of you blog posts, where this is displayed? I’m sure we could get this sorted once we would have those related posts on our screen.

    Let us know, we’re eager to help you out! Take care & have a nice day!

    Best,
    Silvo

    Thread Starter jamo_dodger

    (@jamo_dodger)

    Hi Silvo,

    Thank you for getting back to me, my site is not ready yet but I have set up a quick demo site:

    https://www.nothingbutzen.com/example/2014/02/28/example-6/

    I have used the following custom CSS in the plugin settings:

    wp_rp_wrap {
    width: 625px !important;
    margin: 0 auto !important;
    }
    .related_post_title {
    }
    ul.related_post {
    }
    ul.related_post li {
    margin: 12px !important;
    width: 180px !important;
    height: 120px !important;
    }
    ul.related_post li a {
    }
    ul.related_post li img {
    width: 180px !important;
    height: 90px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    }

    silvoslaf

    (@silvoslaf)

    Hey, thanks for the link, much appreciated!

    I don’t think we can fill up the whole width of the body of your blog post, but try the following code below to see if it’s any better.

    Here’s the code (something is missinge, other changes are bolded):

    wp_rp_wrap {
    width: 625px !important;
    margin: 0 auto !important;
    }
    .related_post_title {
    }
    ul.related_post {
    }
    ul.related_post li {
    margin: 10px 0px 10px 0px !important;
    width: 208px !important;
    height: 120px !important;
    }
    ul.related_post li a {
    }
    ul.related_post li img {
    width: 180px !important;
    height: 90px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    }

    Don’t forget to click on the ‘Save Changes’ button, before checking it out! Let us know how it goes!

    Take care & have a nice weekend!

    Best,
    Silvo

    Thread Starter jamo_dodger

    (@jamo_dodger)

    Thank you for your help Silvo. It is not exactly how I want it, but no worries. I can always use the nth child CSS but wanted something completely cross browser compatible.

    Thanks again,

    James

    silvoslaf

    (@silvoslaf)

    Hey James, we’re really sorry we couldn’t be of greater help, but it was the best we could (momentarily) do! Hope you find your way around the problem nonetheless! I hope you don’t mind if I mark this topic as resolved? Let me know if you do.

    As always — if you have any questions or if you stumble upon any problems, do not hesitate to let me know! I’ll gladly help!

    Take care & have a nice rest of the day!

    Best,
    Silvo

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add different classes to each related post’ is closed to new replies.