Short Code — Exclusions & Multiple Breaks

Hello @parwaiz-khan,

Is it possible to pul a certain number of posts, then insert some text or image etc in the page (via text editor). them past PIC short code again to pul posts again – excluding the previously pulled posts?

You can use this sequence:

[pissc number=4 cat="markup" the_more="Read the full post →"]

Then insert your text or image, then another PIS shortcode:

[pissc number=4 cat="markup" the_more="Read the full post →" offset_number=4]

The option offset_number=4 means: skip the first 4 posts.

In this way you will get the first 4 posts, then the text/image, then the following 4 posts.

And, how to style those post groups separately — [the way we can do it by identifying the sidebars in the PIS widget, like “#pis_posts_in_sidebar-2” in custom styles] ?

Currently, the markup generated by the shortcode hasn’t a CSS ID selector, but I promise I’ll work on it.
Anyway, you can give different styles to the two shortcode-generated groups of text. For example, if you have this sequence:
– first shortcode
– image
– second shortcode
you can target the second shortcode with this CSS style:

figure + ul.pis-ul {
	background-color: #ff8000;
}

that means: target the ul element with class pis-ul that follows any figure element.

So, the second shortcode will have a colored background.

Let me know, please.

Hello Signor Latino,

Thank you again for a great support. With the shortcode CSS ID selector, it will really become a very powerful plugin.

Now, I am testing out the “Page Builder’ plugin to insert PIS widget on a test page. It seems to be doing a perfect job (the PIS widget, when inserted on the page this way has its own ‘edit’ tab – clicking on it takes to PIS’ ‘getting the posts’, ‘displaying the posts’, and custom CSS page. But, here all the items/fields show up as a long list rather than being organized the way you have set it up on PIS’ own widget (when inserted in the sidebars directly).

While putting the CSS there, the “ID selector is always the “#temp” for all the instances of the PIS widget – Is there a way to have a separate ID for each instance?

Also, will it also be the same id (#temp) on all the different pages?

Thank you for all your help.

Hello Signor Khan,

Now, I am testing out the “Page Builder’ plugin to insert PIS widget on a test page. It seems to be doing a perfect job (the PIS widget, when inserted on the page this way has its own ‘edit’ tab – clicking on it takes to PIS’ ‘getting the posts’, ‘displaying the posts’, and custom CSS page. But, here all the items/fields show up as a long list rather than being organized the way you have set it up on PIS’ own widget (when inserted in the sidebars directly).

I just fixed loading the CSS when using the plugin “Page Builder” by SiteOrigin. Now the colors and other stuff are correctly applied, excluding the Javascript, which controls the opening/closing of the panels. Now they appear always opened (this happens only when using the PiS widgets in Page Builder).

While putting the CSS there, the “ID selector is always the “#temp” for all the instances of the PIS widget – Is there a way to have a separate ID for each instance?

Also, will it also be the same id (#temp) on all the different pages?

This problem is strictly related to Page Builder, so it’s out of my control. Anyway, taking a look at the code generated by this plugin, I see that, when you add a widget to a page using Page Builder, every instance is identified by a unique ID applied to the div container. For example:

First instance:

<div id="panel-2102-0-0-0" class...

Second instance:

<div id="panel-2102-0-0-1" class...

As you can see, you can precisely target the content of these containers using their IDs.

Let me know, please.

Thanks a lot Signor Aldo.

But, where do you see these IDs at the Page Builder:

First instance:

<div id="panel-2102-0-0-0" class…

Second instance:

<div id="panel-2102-0-0-1" class…

The only visible id there was “#temp” – Is it something that is hidden, and applied automatically?

Thank you.

Those IDs are visible in the front-end page (not in the admin page) only using the HTML page inspector of the browser. For example, create a page and use the Page Builder to add two widgets of PiS. Save the page and go to the page as shown to the public.

Open the page inspector of the browser by pressing the F12 key. Using the arrow tool at the top of the page inspector, select the block that contains the widget. You should see something like this:

Right-click on the image and click on “Open image in new tab” (or something similar) to view a bigger version.

As you can see, in the right panel there is an highlighted row that says:

div id="panel-2102-0-0-0"...

And this is the second widget box, where the ID is incremented by 1:

• This reply was modified 5 years, 8 months ago by Aldo Latino. Reason: Fixed the second img tag
• This reply was modified 5 years, 8 months ago by Aldo Latino.

I don’t know how to thank you. You took so much time to guide me on this issue. With this help from you, I was able to locate those IDs generated by the Page Builder.

As for applying the CSS (in PIS’ Custom CSS), I believe I should be inputing the code like this (ID identifier)

#panel-2102-0-0-0 li.pis-li {
width: 50%;
height: 325px;
float: left;
margin: -12px 8% 35px -25px;
}

#panel-2102-0-0-0 li li.pis-li:nth-child(even) {
margin-right: -20px;
}

And, when inserting it in the theme’s “Additional CSS” , change it to the “class identifier) like this:

.panel-2102-0-0-0 li.pis-li {}

Is it right?

Also, is it possible to put all the needed CSS in the PIS’ “custom CSS” when targeting that specific instance only?

Thank you.

I don’t know how to thank you. You took so much time to guide me on this issue. With this help from you, I was able to locate those IDs generated by the Page Builder.

You’re very welcome!

As for applying the CSS (in PIS’ Custom CSS), I believe I should be inputing the code like this (ID identifier)

#panel-2102-0-0-0 li.pis-li {
width: 50%;
height: 325px;
float: left;
margin: -12px 8% 35px -25px;
}

#panel-2102-0-0-0 li li.pis-li:nth-child(even) {
margin-right: -20px;
}

Regarding the CSS, it seems OK. Try it and let me know.
Obviously, change the ID #panel-2102-0-0-0 with the correct string.

And, when inserting it in the theme’s “Additional CSS” , change it to the “class identifier) like this:

.panel-2102-0-0-0 li.pis-li {}

Is it right?

.panel-2102-0-0-0 should be #panel-2102-0-0-0 because it’s an ID selector, not a class selector.

Also, is it possible to put all the needed CSS in the PIS’ “custom CSS” when targeting that specific instance only?

If you’re using the Page Builder, I do not know if the CSS is correctly loaded. I designed the plugin to work with the standard WordPress widgets system. Anyway, try and if it shouldn’t work, add the CSS directly to the theme.

Hello Mr. Aldo Latino,

Just to let you know; the direct CSS input into the PIS’ custom CSS (through the PageBuilder) worked alright.

But finally, I ended up putting the PIS related style code in the theme’s editor. It all worked great – Thanks to your advice.

I thank you again for all the great help.

Wishing you all The Best.

Parwaiz

I wish the same for you, @parwaiz-khan! ??