WordPress.org

Forums

Posts in Sidebar
[resolved] Display thumbnail before post title (11 posts)

  1. ccontinenza
    Member
    Posted 1 year ago #

    Hi, first I want to say I love this plug-in and how responsive you are to users' requests! I'm new to all this, but wanted to know if it's possible to display the thumbnail before (to the left of) the post title in the sidebar. I'd like the image and the title to be on one line, similar to in this blog.

    http://simplemedicine.co/

    The Web site I'm asking about is
    http://69.89.31.161/~heartre1/

    Thank you!

    http://wordpress.org/plugins/posts-in-sidebar/

  2. aldolat
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,
    try these css lines:

    widget-posts-in-sidebar li.pis-li {
      clear: both;
    }
    
    widget-posts-in-sidebar p.pis-title {
      float: right;
      width: 105px;
    }
    
    widget-posts-in-sidebar p.pis-excerpt {
      float: left;
    }
    
    widget-posts-in-sidebar img.pis-thumbnail-img {
      float: left;
      margin-right: 15px;
      width: 40px;
      height: auto;
    }

    Let me know if you resolve.

  3. ccontinenza
    Member
    Posted 1 year ago #

    Hi, thanks for the quick response! Unfortunately, it didn't work. :( The image is still showing up after the title, and they're not on the same line. Is there anything else I can try?

    Now it looks like this:
    http://69.89.31.161/~heartre1/

  4. aldolat
    Member
    Plugin Author

    Posted 1 year ago #

    Did you paste those lines at the end of your CSS file? I do not see them.

  5. ccontinenza
    Member
    Posted 1 year ago #

    I did--I went to my Dashboard > Appearance > Edit CSS and put them at the bottom. I'm using the Jetpack plug-in, in case that makes a difference.

    This is what I pasted:
    widget-posts-in-sidebar li.pis-li {
    clear: both;
    }

    widget-posts-in-sidebar p.pis-title {
    float: right;
    width: 105px;
    }

    widget-posts-in-sidebar p.pis-excerpt {
    float: left;
    }

    widget-posts-in-sidebar img.pis-thumbnail-img {
    float: left;
    margin-right: 15px;
    width: 40px;
    height: auto;
    }

  6. aldolat
    Member
    Plugin Author

    Posted 1 year ago #

    Ok, your current CSS file is this:

    /*
    Theme Name: Oxygen-child
    Theme URI: http://69.89.31.161/~heartre1/
    Description: A child theme of Oxygen
    Author: CarlaContinenza
    Template: oxygen
    Version: 1.0
    */
    @import url("../oxygen/style.css");

    Paste those lines at the end of this file.

    If it won't work, try pasting those lines in the "Custom styles" text area at the bottom section of the "Posts in Sidebar" widget (if you have more widgets for "Posts in Sidebar", it's enough pasting the code in one widget only: the modification will be applied to every widget of this plugin).

    Let me know.

  7. ccontinenza
    Member
    Posted 1 year ago #

    I believe I found the location you were referring to, by going to Appearance > Editor. I didn't see the lines there, so I pasted them, hit "update file," but still nothing.

    Then I added them to the "Custom Styles" text area in the widget, and it still hasn't changed. I can't figure out what I could be doing wrong. Thanks for your patience and continued support!

  8. aldolat
    Member
    Plugin Author

    Posted 1 year ago #

    Carla, I'm sorry but I forgot a series of dots in the code... Will you forgive me? :)

    Here the correct code:

    .widget-posts-in-sidebar li.pis-li {
      clear: both;
    }
    
    .widget-posts-in-sidebar p.pis-title {
      float: right;
      width: 105px;
    }
    
    .widget-posts-in-sidebar p.pis-excerpt {
      float: left;
    }
    
    .widget-posts-in-sidebar img.pis-thumbnail-img {
      float: left;
      margin-right: 15px;
      width: 40px;
      height: auto;
    }

    Delete the old lines and paste these new ones.

    Let me know, please.

    P.S.
    If you paste those lines in the widget textarea, remove the lines you added in the CSS file, and vice versa.

  9. ccontinenza
    Member
    Posted 1 year ago #

    It worked, it worked, it worked! Thank you so much!

    I do have one last question, though: Is it possible to change the thumbnail so it's longer than it is wide (I tried playing around with the px in the last section, but it was just making the images bleed into one another) and tighten the vertical space between the two lines of one title?

    (i.e. between the lines
    "so long so long
    lonesome"

    Thank you again!!

  10. aldolat
    Member
    Plugin Author

    Posted 1 year ago #

    About tightening the lines of the titles, change the entire code into this one:

    .widget-posts-in-sidebar li.pis-li {
      clear: both;
      overflow: hidden;
      margin-bottom: 10px;
    }
    
    .widget-posts-in-sidebar p.pis-title {
      float: right;
      line-height: 16px;
      width: 105px;
    }
    
    .widget-posts-in-sidebar p.pis-excerpt {
      float: left;
    }
    
    .widget-posts-in-sidebar img.pis-thumbnail-img {
      float: left;
      margin-right: 15px;
      width: 40px;
      height: auto;
    }

    Edit margin-bottom: 10px; and line-height: 16px; to the values you like.

    About the images, currently you have images 40px (width) x auto (height). Perhaps you should define a custom image size and Simple Image Sizes could help you. Before defining a new image size, consider the space you have:

    Sidebar width: 160px
    Title width: 105px
    Right margin of the image: 15px
    Resulting availabe image width: 160-105-15 = 40px

    If you want, you can modify 40px to (for example) 45px: in this case, edit other values accordingly in the CSS (for example, title width=100px OR image margin-right=10px).

    Let's say you want a thumbnail 35x60 pixels. In the plugin Simple Image Sizes define a new image size 35px x 60px and give it a name of your choice. In the Posts in Sidebar widget panel you'll find this new image size. After choosing this image in the widget panel, change also the CSS accordingly, in this case change image width to 35px and title width to 110px (or image right margin to 10px).

    Bye.

  11. ccontinenza
    Member
    Posted 1 year ago #

    Thank you so much! I really appreciate all your help.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Posts in Sidebar
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.