WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Related Posts
[resolved] Thumbnails and font color (10 posts)

  1. VittorioC93
    Member
    Posted 8 months ago #

    Hi :)
    How can I change the thumbnails width and the font color of the title?

    Thanks a lot!
    Vittorio

    https://wordpress.org/plugins/wordpress-23-related-posts-plugin/

  2. PetraP
    Member
    Plugin Author

    Posted 8 months ago #

    Hey Vittorio,

    thanks for reaching out - I'll gladly help! But in order to do so, I am going to need the link to your blog, so that I can take a closer look.

    Looking forward to your reply,
    Petra

  3. VittorioC93
    Member
    Posted 8 months ago #

    Sure ;)
    Here is my blog: http://noodloves.it

    I would like to have a 205x130 (horizontal) thumbnail and a dark-grey title.

    Thanks a lot!! :)
    Vittorio

  4. PetraP
    Member
    Plugin Author

    Posted 8 months ago #

    Hey,

    thanks for the link! :)

    So, here is how you do it:
    TITLE
    1.) in your plugin settings, go to "Advanced settings"-> "Customize"-> and tick the box next to "Enable custom CSS" and insert color: #00ff00 !important; between that .related_post_title {..here..} .
    Here is a list of all the color values for dark gray, so find the one you like and replace the #00ff00 (this one will make the title lime green ;))
    2.) Everything put together (thumbnails size included) should look like this:

    .related_post_title {
    color: #00ff00 !important;
    }
    ul.related_post {
    }
    ul.related_post li {
    width: 205px !important;
    }
    ul.related_post li a {
    }
    ul.related_post li img {
    width:205px !important;
    height:130px !important;
    }

    THUMBNAILS
    1.) in the settings, tick the box next to "Use Custom Size Thumbnails" and insert Custom Width/Height(px). In your case 205 and 130.
    2.) save the changes, refresh your blog page and see the magic happen (hopefully) :)

    I made a screenshot for easier navigation. Hope it helps!

    Please let me know how it goes,
    Petra

  5. VittorioC93
    Member
    Posted 8 months ago #

    Thanks a lot, you are so kind!! :D
    Thumbnails are now of the perfect size ;) Is it possible to have eyed corners and no shadows?
    I would also like to increase the space between posts (or, better, justify the "box").

    The font color is just the same but maybe I dind't explain well. I would like to change each post-title not the plugin-title ;)

    Vittorio

    P.S. Thanks a lot for your help. I know, I'm a pain in the *** LOL

  6. PetraP
    Member
    Plugin Author

    Posted 8 months ago #

    ;)
    To be honest, adjusting the CSS code is really fun for me.
    So, here we go:
    1.) each post title (again replace #00ff00 with whatever you want your color to be):

    ul.related_post li a {
    color: #00ff00 !important;
    }

    2.) spaces (just a heads up, if you will use more space between posts, they will not fit 3 of them in a row):

    ul.related_post li {
    width: 205px !important;
    margin: 5px 25px 5px 0 !important;
    }

    3.) shadows:

    ul.related_post li img {
    width:205px !important;
    height:130px !important;
    box-shadow: none !important;
    }

    4.) "eyed corners" - you want them more round? If yes, try this:

    ul.related_post li img {
    width:205px !important;
    height:130px !important;
    box-shadow: none !important;
    border-radius: 15px !important;
    }

    To sum it up - everything put together should look like this:

    .related_post_title {
    }
    ul.related_post {
    }
    ul.related_post li {
    width: 205px !important;
    margin: 5px 25px 5px 0 !important;
    }
    ul.related_post li a {
    color: #00ff00 !important;
    
    }
    ul.related_post li img {
    width:205px !important;
    height:130px !important;
    box-shadow: none !important;
    border-radius: 15px !important;
    }

    And if you need anything else adjusted, bring it on :D

  7. VittorioC93
    Member
    Posted 8 months ago #

    You are my hero! Thanks a lot :)
    Just two more things, then I'm fine.. LOL

    1. Sorry for my english, I made a mistake. I would like to have NO round corners.
    2. Unfortunately, with this margin every row has just 2 posts, non three. Which one I have to reduce?
    3. How can I reduce the plugin-title size?

    Thanks again!!!!!
    Have a nice day :)

  8. PetraP
    Member
    Plugin Author

    Posted 8 months ago #

    :)

    1. no round corners: border-radius: 0px !important;
    2. margin: 10px 10px 10px 5px !important; (not really sure, but I think it will work)
    3. font-size: 14px !important;

    So, everything looks like this now:

    .related_post_title {
    font-size: 14px !important;
    }
    ul.related_post {
    }
    ul.related_post li {
    width: 205px !important;
    margin: 10px 10px 10px 5px !important;
    }
    ul.related_post li a {
    color: #00ff00 !important;
    
    }
    ul.related_post li img {
    width:205px !important;
    height:130px !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    }

    Have a lovely day! :)

  9. VittorioC93
    Member
    Posted 8 months ago #

    Amazing!!!!
    Thanks a lot, you are the best! :D :D

  10. PetraP
    Member
    Plugin Author

    Posted 8 months ago #

    You're welcome :)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.