There are styles added in the PiS widget itself and in the WP Custom CSS plugin. It would be better to use only a place for them.
Anyway, add these styles in WP Custom CSS:
#pis_posts_in_sidebar-3 li {
margin-bottom: 10px;
overflow: hidden;
}
#pis_posts_in_sidebar-3 .pis-thumbnail {
margin-bottom: 0;
height: auto;
}
Then, in WP Custom CSS change this rules:
from:
#pis_posts_in_sidebar-3 > ul > li:nth-child(1) > p.pis-title {
padding-top: 10px;
padding-bottom: 0px;
}
into:
#pis_posts_in_sidebar-3 > ul > li:nth-child(1) > p.pis-title {
padding-top: 0px;
padding-bottom: 0px;
}
and from:
#pis_posts_in_sidebar-3 > ul > li > p.pis-title {
padding-top: 20px;
padding-bottom: 10px;
margin-bottom: 0px;
}
into:
#pis_posts_in_sidebar-3 > ul > li > p.pis-title {
padding-top: 0px;
padding-bottom: 10px;
margin-bottom: 0px;
}
Also change this:
from:
img.pis-thumbnail-img.alignleft.wp-post-image {
margin-bottom: 0;
position: relative;
width: 150px;
height: 100px;
}
into:
img.pis-thumbnail-img.alignleft.wp-post-image {
margin-bottom: 0;
position: relative;
width: 150px;
height: auto;
}
In this way the titles will be perfectly aligned at top of the images.
Thread Starter
morfe1
(@morfe1)
Yes, I was trying to align them with the centerof the image but it seems to be no way to do that without parent div containers for each element. It works on the home page, where I’m pulling the exact 4 posts. But on the single posts it’s pulling different posts and I can’t apply same padding to all titles due to the differences in the length.
Thanks for the overflow though, didn’t know about it.
-
This reply was modified 9 years, 3 months ago by
morfe1.
You have at least two active widgets of the plugin. So, please, follow these steps:
1) Make a backup of your current CSS styles (just in case…). Take note that you have multiple places where you have entered styles for Posts in Sidebar, so search for them.
2) Remove every CSS style for Posts in Sidebar, for example:
#pis_posts_in_sidebar-2 .pis-title { font-size: 18px !important; }
and multiple others. You have styles either in the widget admin and in WP Custom CSS plugin.
3) Paste this styles in a Posts in Sidebar widget or in your current theme’s styles.css file or in WP Custom CSS plugin:
#pis_posts_in_sidebar-2 ul.pis-ul,
#pis_posts_in_sidebar-3 ul.pis-ul {
margin-top: 1em;
margin-left: 1em;
line-height: 1.2;
list-style: none;
}
#pis_posts_in_sidebar-2 li,
#pis_posts_in_sidebar-3 li {
margin-bottom: 10px;
overflow: hidden;
width: 315px;
height: 105px;
position: relative;
}
#pis_posts_in_sidebar-2 .pis-thumbnail,
#pis_posts_in_sidebar-3 .pis-thumbnail {
margin-bottom: 0;
height: auto;
height: 105px;
overflow: hidden;
width: 150px;
position: absolute;
}
#pis_posts_in_sidebar-2 p img.pis-thumbnail-img.alignleft.wp-post-image,
#pis_posts_in_sidebar-3 p img.pis-thumbnail-img.alignleft.wp-post-image {
margin-bottom: 0;
margin-top: 0px;
max-width: 100%;
height: auto;
display: block;
}
#pis_posts_in_sidebar-2 > ul > li > p.pis-title,
#pis_posts_in_sidebar-3 > ul > li > p.pis-title {
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
position: absolute;
width: 157px;
height: 105px;
display: table;
left: 157px;
}
#pis_posts_in_sidebar-2 a.pis-title-link,
#pis_posts_in_sidebar-3 a.pis-title-link {
display: table-cell;
vertical-align: middle;
}
These styles, among other aspects, will center the text and the image.
Let me know, please.
Thread Starter
morfe1
(@morfe1)
That’s awesome, thank you very much! Worked like a charm.
