Display thumbnail before post title

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.

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:
https://69.89.31.161/~heartre1/

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

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

Ok, your current CSS file is this:

/*
Theme Name: Oxygen-child
Theme URI: https://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.

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!

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.

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

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.

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