WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Display thumbnail before post title

[Resolved] Display thumbnail before post title

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author aldolat
    Participant

    @aldolat

    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.

    ccontinenza
    Member

    @ccontinenza

    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/

    Plugin Author aldolat
    Participant

    @aldolat

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

    ccontinenza
    Member

    @ccontinenza

    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;
    }

    Plugin Author aldolat
    Participant

    @aldolat

    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.

    ccontinenza
    Member

    @ccontinenza

    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!

    Plugin Author aldolat
    Participant

    @aldolat

    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.

    ccontinenza
    Member

    @ccontinenza

    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!!

    Plugin Author aldolat
    Participant

    @aldolat

    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 35×60 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.

    ccontinenza
    Member

    @ccontinenza

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Resolved] Display thumbnail before post title’ is closed to new replies.