Parwaiz Khan

Signor Latino,
Thank you so very much for looking into it and showing me the way to insert multi-word categories. With the slug of the categories in WP defined form (as you informed me), PIS is pulling the posts perfectly.

Thanks again for all the help and support that you provide to the user of this well-designed plugin.

Hi Aaron,

Following your hint, I found a workaround it. Not the 100% of the cell area, but I made almost 98% of the cell area ‘clickable’. I am marking it as ‘resolved’.

Thank you for your help.

Hi Aaron,

Thanks a lot for your suggestion about using Custom HTML widget. That was what I was also considering to test next. Inserting the code into the HTML Editor solved the problem of ‘style stripping’. Even though the cell is not clickable, the entire tex block is.

I am marking it ‘resolved’.

Thank you for a great support.

Addendum to the above:
I could anchor the “Enter Here” text by inserting the ….. towards the ent of the ‘div’. But, still I cannot find a way to make the entire cell clickable!

Hi Elina Rodica,

That will be really great! I am marking it as resolved.

Thank you

Hi,

The footer content rendition problem was related to a text-widget. With a different text-widget, it is showing OK.

Thank you.

Hi Alexgo,

1). CSS for the image row: where it should go? I applied the following in the row’s (containing the image) ‘Attributes –> CSS Styles’ :

{background-color: #606860;}
img {opacity: 0.5;filter: alpha(opacity=50);}

It didn’t work.

2). The problem that I noted with the Hero image was that it doesn’t allow for the parallax effect! Is there a way to give parallax effect in Hero image?

3). I tried SiteOrigin’s “Consultant” template – couldn’t find a way to delete the existing image, When I added my own image, it was not showing up. How to replace the template image?

4). Didn’t note the slider working in the template either – is there a way to replace the image – insert my own images, and make them have ‘slide’ – How?

Thanks a bundle for all your help. It is the SiteOrigin’s fantastic support that has been instrumental in me dropping the Elementor and tryout the SiteOrigin

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

Hi Andrew,
Thank you so much for all the help that you have given me on this topic. It solved my styling problems.

Currently, I am using my testing website (https://nonmsm.com) to design my new website (https://tradearchives.com). There are a couple of points that needs your guidance!:

First, instead of using the ‘Hero widget’, I am using the ‘Image Widget’. The image I put through it (in the very first row) serves as the ‘Hero’ image on the landing page (https://nonmsm.com). But, when I apply a dark ‘Background Color'(in row Design), it doesn’t take effect. What may be the reason – and, how to give a darker background/shade to the image?

Second, what may be the benefit/application of using the ‘Hero Widget’ instead of the ‘regular’ ‘Image Widget’?

Thank you.

Thank you Cavalierlife. Do you know (off the top of your head) the class that target all the rows/pages? [For the SiteOrigin, it is always ‘panel-grid’].

[I understand that the ids will keep on changing (incrementing) for each instance.]

Thank you.

Thank you Andrew. Will the class “panel-grid” affect all the pages – since it is a class’, it should?

Say, if there are a total of 10 pages, will the “.panel-grid {…}” style every row in ALL the 10 pages?

Thank you.

Hi Andrew,

Further to my previous post, I noted that the following seems to be the relevant HTML output:

<div id=”pl-367″ class=”panel-layout” ><div id=”pg-367-0″ class=”panel-grid panel-no-style” ><div id=”pgc-367-0-0″ class=”panel-grid-cell” >
<!– Start Posts in Sidebar – widget-0-0-0 –>
<div id=”panel-367-0-0-0″ class=”so-panel widget widget_pis_posts_in_sidebar posts-in-sidebar panel-first-child panel-last-child” data-index=”0″ > <p class=”pis-intro”> </p><ul id=”ul_pis_posts_in_sidebar-36710002″ class=”pis-ul”>
<li class=”pis-li pis-post-189″>
……
……
……

It means that to target the entire page I should aim at id=”pl-367″ (instead of ” #panel-367-0-0-0 “)?

And, is there a way to target “ALL” the rows in all the pages in one swipe – rather than doing it one at a time?

How to target all the pages to have the same style by using one set of CSS in the theme’s CSS editor?

Thank you.

Thank you Andrew for being such a great help. I am still trying to mimic the style of the pages on one of my sites (https://lifevibrant.com). Here is what I will be doing:

In a single column, I will be inserting a widget (Posts in Sidebars – PIS) to pull a certain number of posts. Then, I will add a text editor widget to inserts some other stuff (media etc) Then I will add Posts widget again to pull more posts.

My CSS in the PIS widget’s own custom styles will create TWO columns, and style them.

I tested it on one row (first instance of PIS). It works OK.

I noted that the Page Builder generates a unique ID for each Row (like: “panel-367-0-0-0”) .

But, is there a way to target “ALL” the rows in a page – rather than doing it one row at a time?

The following is partial CSS that I have inserted in the PIS widget to do the trick:

#panel-367-0-0-0 li.pis-li {
width: 50%;
height: 325px;
float: left;
margin: -12px 8% 35px -25px;
}
#panel-367-0-0-0 li.pis-li:nth-child(even) {
margin-right: -20px;
}
#panel-367-0-0-0 a.pis-title-link {
color: #004600;
font-size:1em !important;
margin-bottom: -5px !important;
}
#panel-367-0-0-0 li.pis-li {
height: 285px;
background: #ffffff !important;
-webkit-box-shadow: 1px 1px 2px 1px rgba(214,214,214,1);
-moz-box-shadow: 1px 1px 2px 1px rgba(214,214,214,1);
box-shadow: 1px 1px 2px 1px rgba(214,214,214,1);
border-radius: 5px 5px 10px 10px;
-moz-border-radius: 5px 5px 10px 10px;
-webkit-border-radius: 5px 5px 10px 10px;
margin-bottom:35px;
padding-left: 10px;
overflow: hidden;
}

Thank you again for all your help.

[BTW, I am testing it on another site – not on lifevibrant.com yet]

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.

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.