How to set a layout for the Sidebar different from the Page

I still have to figure out the percentage distribution if I want to make a 2px border around the “li.pis-li” box – any idea how to tweak it:
li.pis-li {
width: 48%;
float: left;
margin-right: 4%;
}

You can add the two pixel border and reduce the percentage of margin-right. For a pixel-level measures, change the percentage into pixels, for example: margin-right: 10px (or other values, I can’t check now).

I will also be pulling the posts (of a different category) in the ‘right-sidebar’. Since have incorporated the 2-column CSS in my child-theme, which has a global effect, how can I make the PIS NOT to make 2-columns in the sidebar?

Every widget has an ID number that uniquely identifies it. So, if you want to give a particular style only to a widget and not to other parts that have the same classes, prepend the ID. For example:

#pis_posts_in_sidebar-27 li.pis-li {
width: 48%;
float: left;
margin-right: 4%;
}

These rules will be applied only to li.pis-li that is child of #pis_posts_in_sidebar-27. Other li.pis-li won’t be affected.

Also, is it possible to have smaller image thumbnails for the sidebars?

In the widget, choose a different image size for thumbnails. If you are not satisfied with the current image sizes, you can install a plugin that defines a new image size and then regenerate all the thumbnails so all the images will have the new size. An excellent example of this plugin is Simple Image Sizes.

Great! – going to try these changes and report back.

On the site page the widget ID is: “pis_posts_in_sidebar-4” – similarly, there will be a different ID for each event (sidebars or whatever). That solves the problem!

Border issue is not a big deal, just will have to play with the width allocation and the margin.

I believe, I can mark it as Resolved.

Thank you again for such a great support – and also for the “Simple Image Sizes”, it may become handy.

Parwaiz

Hello Aldolat,
Just posted a review of the Posts in Sidebar.

Please keep it up – we, the users of this great plugin at WordPress, need your help and support.

Thank you so very much.

Parwaiz
https://newsscouter.com

Every widget has an ID number that uniquely identifies it. So, if you want to give a particular style only to a widget and not to other parts that have the same classes, prepend the ID.

PIS widget ID I found by inspecting the elements – it is “4”. So, I changes the CSS as follow:

#pis_posts_in_sidebar-4 li.pis-li {
width: 48%;
height: 350px;
float: left;
margin-right: 4%;
border-bottom: 2px solid #FCFCFC;
}
#pis_posts_in_sidebar-4 li.pis-li:last-child {
margin-right: 0;
}

But, it seems the id is not not being recognized, the posts have gone back to 1-column.
Can you tell me what I am doing wrong – should I look for the ID some place else?

Again, the site is: https://lifevibrant.com

Thank you.

PIS widget ID I found by inspecting the elements – it is “4”. So, I changes the CSS as follow:

[…]

But, it seems the id is not not being recognized, the posts have gone back to 1-column.
Can you tell me what I am doing wrong – should I look for the ID some place else?

I just visited your site and the ID of the widget is not present. This happens when you create widgets without using the standard WordPress tool located in Appearance > WIdgets. The ID is assigned by this tool.

It seems that you are using a sort of page constructor or something like this, right? If you look inside the page code with the browser Inspector you’ll see that even this tools uses something of unique in order to target only some elements – for example, I see these classes otw-widget-1 or even otw-sidebar-1. It seems that, if you create other widgets with this plugin, this number should change.

Try using that classes and let me know. As you know, these are classes, so prepend . (a dot) before class names, and not # (an hashtag).

I deployed PIS through the Appearance > Widgets method – but, since I couldn’t use the PIS directly into the page (putting into the page [pissc cat=”staff,news,our-works”] will not give me the options/features of the PIS), I used the “Widgetize pages Light” plugin to create the sidebar in the page via “Appearance > Widgets” method. So, technically, PIS is within the otw-sidebar-1 (it is the name of the sidebar created by that widget).

The PIS ID is there – I found it by checking the elements in Safari – it is “pis_posts_in_sidebar-4”

But, when I check the address of the PIS (as it shows in the Browser address bar when I access the PIS in the “Appearance > Widgets” section), it shows as: ” pis_posts_in_sidebar-4&sidebar=otw-sidebar-1&key=0 ”

I am going to prepend the css line as ” #otw-sidebar-1 #pis_posts_in_sidebar-4 li.pis-li” -Then I will try, ” .otw-widget-1 #otw-sidebar-1 #pis_posts_in_sidebar-4 li.pis-li” – Then, ” .otw-widget-1 #pis_posts_in_sidebar-4 li.pis-li”

You should be able to check these changes now.

Thank you.

Well, just tried both ways. None of them is working. The code the I have put in my child theme is:
.otw-widget-1 #pis_posts_in_sidebar-4 li.pis-li {
width: 48%;
height: 350px;
float: left;
margin-right: 4%;
border-bottom: 3px solid #FCFCFC;
}

.otw-widget-1 #pis_posts_in_sidebar-4 li.pis-li:last-child {
margin-right: 0;
}

.entry li.pis-li {
list-style: none;
}

Before, I had the line as: “.otw-widget-1 #otw-sidebar-1 #pis_posts_in_sidebar-4 li.pis-li”

Any ideas?

There is no any ID with the name #pis_posts_in_sidebar-4, so we have to remove it.

The effective code is the following:

.otw-widget-1 li.pis-li {
    width: 48%;
    height: 350px;
    float: left;
    margin-right: 4%;
    border-bottom: 3px solid #FCFCFC;
}

.otw-widget-1 li.pis-li:last-child {
    margin-right: 0;
}

.otw-widget-1 .entry li.pis-li {
    list-style: none;
}

This rules will target the elements that are child of .otw-widget-1.

I changed the CSS – the two previous posts are now set in 2 columns – perfect. But, I just added 2 more posts, and I am noticing an unusual phenomenon.

All the 4 posts show OK within a certain viewport width – when I expand the width of the Viewport, the upper two posts get reset in a single column!

You can check this behavior at https://lifevibrant.com

What may be the cause of this?

Thank you.

Forgot to post – here is my entire CSS code for the PIS:

/* Posts in Sidebar Modifications */

.otw-widget-1 li.pis-li {
width: 47%;
height: 320px;
float: left;
margin-right: 5%;
margin-left:-12px;
border-bottom: 2px solid #F2F2F2;
}

.otw-widget-1 li.pis-li:last-child {
margin-right: 0;
}

.entry li.pis-li {
list-style: none;
}

/* – – -*/

.pis-thumbnail-img {
max-width: auto;
height: 130px;
margin-top: 10px;
margin-bottom: -20px;
}

a.pis-title-link {
color: #095108;
font-size:1.5em;
margin-top: -5px;
margin-bottom: -20px;
text-align: center;
}

p.pis-excerpt {
margin-top:-10px;
color: #333 !important;
}

/* End */

Further to report the viewport anomaly, the top two posts keep on breaking from 2 columns layout to single column layout, and back in reverse as we change the width of the viewport up and down. While, the bottom 2 posts (the ones posted earlier) remain steady all along in their 2 column layout.

What it could be – is it a bug that is causing this behavior?

Change this code:

.otw-widget-1 li.pis-li:last-child {
margin-right: 0;
}

into this:

.otw-widget-1 li.pis-li:nth-child(even) {
    margin-right: 0;
}

Instead of saying to remove the right-margin only to the last-child, we are telling the browser to remove it to every even child, in your case to the 2nd and the 4th.

What it could be – is it a bug that is causing this behavior?

Please note that all these alignment problems are not related to PiS, but to CSS and browser.

Going to change the code – but somehow, during my continuous tinkering with the css/margin, later posts are staying within the 2-column layout.

I am still in the development (tinkering) mode. As I embark upon adding more pages and posts, I will observe and modify the code as needed.

I understand the vagaries of the web design – the behavior (rendition) of html/css is rather unpredictable – especially for non-developers like myself.

Thank you again for taking the time, looking into it, and helping me out.

Parwaiz