Thumbnail position and Custom Styles

I got the styles on the title working with this.

.pis-title a.pis-title-link {
font-family: ‘Droid Sans’, sans-serif;
color: #d75703 !important;
font-size: 15px !important;
font-weight: 400 !important;
}

Although I can’t seem to affect the line height of the title.

Thanks,
Gord

Hello Gord,
unfortunately, if I can’t take a look at the web page, it’s very difficult for me to give a real help. Every theme or CSS file has its own way to declare the cascading rules. If you could put your site in a temporary location on the web, I could help you effectively. Without looking at the web page, I can only give advices saying “Try this” or “This should work”, etc., like a blind.

Although I can’t seem to affect the line height of the title.

Usually a line like this does the job:

p.pis-title {
line-height: 1.6em;
}

Modify 1.6em according to your needs.

The thumbnail is in the wrong spot and is appearing beside the next post title down in the list. I’m not sure how to fix.

This is a real example where I should look at the appearance. Try this:

li.pis-li {
overflow: hidden;
}

Also, how can I separate each item in the list so they titles sit nicely beside each thumbnail?

My previous advice should do the work.

A nice feature would be to specify the width and height of the thumbnail in the settings rather than by CSS.

There is a very useful plugin available for free here. With it you can define all the image sizes you need. When you set up an image size for your sidebar, you will find it in the thumbnail menu of Posts in Sidebar.

Also, if no featured image is set for the post it would be nice if the first image in the post could be used.

This option is in my list of features to be added. ??

Lastly, is there a list of all the CSS classes available to use when styling this plugin?

Not currently. Anyway, with the browser inspector you can find the classes you need in a particular contest.

Let me know, please.

Hello Aldolat,

Thanks for the quick response.

Your suggestion for line-height worked. Thanks.

Thanks for the suggestion of the Simple Image Sizes plugin. I will check it out. For now I have sized the thumbnail with CSS.

The position of the Thumbnail didn’t work with your suggestion. I will try to get my site online soon and let you know. I understand it will be easier for you to troubleshoot things by actually seeing the website.

I’ll look forward to the added feature of using the first image in the post if no featured image is set. I have a blog with over 800 posts I’m updating and this would be a very welcome feature apart from the list of amazing features you already have.

The list of CSS classes would be handy, but I can use the browser inspector for now.

Thanks and I will be in touch soon once I have my site online.

Gord

Thanks and I will be in touch soon once I have my site online.

Good!

Hello Aldolat,

The site is now online in staging here,

https://staging.bandofcats.com

‘Posts in Sidebar’ is in the Sidebar lower down on the right with the Title ‘Summer Products’. Ideally I would like to style your plugin the same as the items higher in the sidebar under ‘Cat Halloween’. This is another plugin but not as feature rich as yours.

I managed to get the thumbnails to align to the titles with a setting in the plugin but I would like to raise the title so it can line-up with the top of the thumbnail beside it.

Also is there an option to truncate the titles to a certain number of characters? This would be helpful to avoid longer titles from wrapping under the thumbnail. Unless there is another way to stop the wrapping from occurring.

Also the items stagger on smaller screens when the browser width is decreased and the sidebar is in a single column that is the width of the browser. I’d like to prevent that if possible.

‘Posts in Sidebar’ is also in the footer repeated in 3 columns. It looks great but also has the same issues as the sidebar.

I appreciate any help. This is a great plugin and it would be nice to get it looking good on my site.

Thanks,
Gord

Hello,
these CSS rules should do all the work:

.et_pb_widget ul li.pis-li {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px;
    padding-bottom: 10px;
    overflow: hidden;
}

.pis-thumbnail {
    float: left;
    padding-bottom: 0;
}

.pis-title {
    margin-left: 87px;
    margin-bottom: 0 !important;
}

#main-footer .pis-title {
    margin-left: 59px;
}

#main-footer li.pis-li {
    border-bottom: 0;
}

Since I hate to use the !important declaration, you can remove it if you remove the 25 pixel bottom margin you added for titles. ??

Please, let me know.

Hello Aldolat,

Thanks for the CSS styles. Everything looks great. I also styled the widget title and intro with this CSS.

.posts-in-sidebar h4.widgettitle {
font-size: 22px;
color: #fff;
background: #e9740d;
padding: 10px;
margin-bottom: 8px;
}

.posts-in-sidebar p.pis-intro {
color: #5b5b5b;
font-style: italic;
}

This works but please let me know if there is a better way to target these items.

One other issue.

I entered 20 IDs to get the posts exactly. The post appear but in a different order from what I entered. Is it possible to have the posts appear in the same order of the IDs I entered?

Thanks again for all the help.

Gord

BTW, I couldn’t fix the widget in the footer as I’m having trouble getting it to display properly.

Once I fix that I’ll style the footer.

Thanks,
Gord

This works but please let me know if there is a better way to target these items.

It’s good. Only be aware that these styles will match every widget title and intro, if you use multiple instances of Posts in Sidebar. To target only a precise widget, you can use the ID, for example #my-css-id .my-class { ... }.

Is it possible to have the posts appear in the same order of the IDs I entered?

Sure. Use “Preserve ID order” in Getting posts panel:

Let me know, please.

Perfect, thanks!

Perfect!
I changed the status of the thread to “Resolved”. Feel free to reopen it.

Congratulations for the plugin. On my site there is too much space between thumbnail and title, and between title and excpert. Can you help me? https://www.jmania.it

Hi @numero78

Congratulations for the plugin.

You’re welcome and thanks!

On my site there is too much space between thumbnail and title, and between title and excpert. Can you help me?

Add these rules:

#pis_posts_in_sidebar-3 .pis-thumbnail,
#pis_posts_in_sidebar-3 .pis-title {
    margin-bottom: 12px;
}

#pis_posts_in_sidebar-3 .pis-title,
#pis_posts_in_sidebar-3 .pis-excerpt {
    padding: 0 12px !important;
}

The first rule controls the space below the image and title (as you requested), while the second rule controls the left and right space of text (an extra tip!).

Let me know, please.

Great!!! Thank you very much

Sorry… I see that it works in the home page, but not in the single posts… As you can see here: https://jmania.it/calciomercato-juventus-emre-can-mascherano/

Thank you