Jump to content

Archived

This topic is now archived and is closed to further replies.

janpeeters

The Loop placement irregularity and a suggestion

Recommended Posts

janpeeters

Hi, I'm experimenting with building a blockish website form various sections with a vertical Loops section on the right. I'm trying to create a boxed site. In the proces I've noticed something I found weird. I just report it.

My site settings and lay-out of the page are like this. Site content width is set at 80%.

5650b42e5e61c_ScreenShot2015-11-21at18.45650b4b8d0a17_ScreenShot2015-11-21at19.1

That gives this result:

Screen_Shot_2015-11-21_at_19.05.25.thumb

i want to get rid of the gutters so I added the following custom CSS. 

.pl-col-sm, .pl-col-sm-1, .pl-col-sm-2, .pl-col-sm-3, .pl-col-sm-4, .pl-col-sm-5, .pl-col-sm-6, .pl-col-sm-7, .pl-col-sm-8, .pl-col-sm-9, .pl-col-sm-10, .pl-col-sm-11, .pl-col-sm-12, .pl-col-sm-offset-1, .pl-col-sm-offset-2, .pl-col-sm-offset-3, .pl-col-sm-offset-4, .pl-col-sm-offset-5, .pl-col-sm-offset-6, .pl-col-sm-offset-7, .pl-col-sm-offset-8, .pl-col-sm-offset-9, .pl-col-sm-offset-10, .pl-col-sm-offset-11, .pl-col-sm-offset-12 {
    box-sizing: border-box;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

That leads to this: https://janpeeters.nl/jms/pl5-test-1 screenshot below.

5650b53d73e68_ScreenShot2015-11-21at18.4

I would like the Loops section to join the rest within the read content so I introduced another container in which I put the whole lot: https://janpeeters.nl/jms/pl5-test-2/ 

Screen_Shot_2015-11-21_at_19.25.11.thumb

Weirdly enough all other blocks on the page except the first text box get stuck at the bottom of the Loops section. 

5650b7b1eb473_ScreenShot2015-11-21at19.2

I thought that they would fill up the space on the left of the Loop section just below the first text box but they didn't so I tried to achieve that by putting the four items in their own container.

5650b824c3496_ScreenShot2015-11-21at19.2

I add some more code to get to the result below and here https://janpeeters.nl/jms/pl5-test-3/ but it still didn't line up besides the Loop.

.pl-row {
    margin-right: 0em !important;
    margin-left: 0em !important;
}

5650ba54af411_ScreenShot2015-11-21at19.3

So my main questions/remarks are:

  • Does the Loops section need some tweaking to allow for items beside it if it is vertical?
  • Could it be an idea to introduce a gutterless 12-column grid mode that can be activated in 'settings' under 'lay-out / nav' to allow for adjacent and very tight section placement?
  • very small thing... There might be a tiny rounding problem with the grid. The red text box and the Loops on this page https://janpeeters.nl/jms/pl5-test-1/ seems to be too much to the left. 

This post is not ment as an 'help me achieve this' question. @Andrew was very clear about hoping to avoid that, it's ment as testing feedback ;-)

Thanks,

Jan

Share this post


Link to post
Share on other sites
chrisayers

Try putting all that inside the post loop by using the loops and all sections shortcodes within the loop with <span> tags for the grid.

I am thinking like this  

<div class="row">

<div class="span4">[pl_section section="rad-profiles" id="radprofile1"]</div>

<div class="span8">[pl_section section="loops" id="newsloop"]</div>

</div>

Share this post


Link to post
Share on other sites
micstepl
18 hours ago, janpeeters said:

Hi, I'm experimenting with building a blockish website form various sections with a vertical Loops section on the right. I'm trying to create a boxed site. In the proces I've noticed something I found weird. I just report it.

My site settings and lay-out of the page are like this. Site content width is set at 80%.

5650b42e5e61c_ScreenShot2015-11-21at18.45650b4b8d0a17_ScreenShot2015-11-21at19.1

That gives this result:

Screen_Shot_2015-11-21_at_19.05.25.thumb

i want to get rid of the gutters so I added the following custom CSS. 

.pl-col-sm, .pl-col-sm-1, .pl-col-sm-2, .pl-col-sm-3, .pl-col-sm-4, .pl-col-sm-5, .pl-col-sm-6, .pl-col-sm-7, .pl-col-sm-8, .pl-col-sm-9, .pl-col-sm-10, .pl-col-sm-11, .pl-col-sm-12, .pl-col-sm-offset-1, .pl-col-sm-offset-2, .pl-col-sm-offset-3, .pl-col-sm-offset-4, .pl-col-sm-offset-5, .pl-col-sm-offset-6, .pl-col-sm-offset-7, .pl-col-sm-offset-8, .pl-col-sm-offset-9, .pl-col-sm-offset-10, .pl-col-sm-offset-11, .pl-col-sm-offset-12 {
    box-sizing: border-box;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

That leads to this: https://janpeeters.nl/jms/pl5-test-1 screenshot below.

5650b53d73e68_ScreenShot2015-11-21at18.4

I would like the Loops section to join the rest within the read content so I introduced another container in which I put the whole lot: https://janpeeters.nl/jms/pl5-test-2/ 

Screen_Shot_2015-11-21_at_19.25.11.thumb

Weirdly enough all other blocks on the page except the first text box get stuck at the bottom of the Loops section. 

5650b7b1eb473_ScreenShot2015-11-21at19.2

I thought that they would fill up the space on the left of the Loop section just below the first text box but they didn't so I tried to achieve that by putting the four items in their own container.

5650b824c3496_ScreenShot2015-11-21at19.2

I add some more code to get to the result below and here https://janpeeters.nl/jms/pl5-test-3/ but it still didn't line up besides the Loop.

.pl-row {
    margin-right: 0em !important;
    margin-left: 0em !important;
}

5650ba54af411_ScreenShot2015-11-21at19.3

So my main questions/remarks are:

  • Does the Loops section need some tweaking to allow for items beside it if it is vertical?
  • Could it be an idea to introduce a gutterless 12-column grid mode that can be activated in 'settings' under 'lay-out / nav' to allow for adjacent and very tight section placement?
  • very small thing... There might be a tiny rounding problem with the grid. The red text box and the Loops on this page https://janpeeters.nl/jms/pl5-test-1/ seems to be too much to the left. 

This post is not ment as an 'help me achieve this' question. @Andrew was very clear about hoping to avoid that, it's ment as testing feedback ;-)

Thanks,

Jan

Jan
I fully agree! INCONSISTANCY on the topics ....

  • Read-Width
  • Full-Width
  • NAV-BAR width (when mobile). Of cause ...
    • the NavBar has to follow READ-WIDTH, one content is set to READ-WIDTH
    • otherwise, if content is set to CONTENT-WIDTH ... in mobile .... NAVBAR aus follow CONTENT-WIDTH

regards
,Michael

 

(ps.: Feature request:
Make NavBars choose-able, to break in mobile "above" OR "below" "CONTENT")

 

Share this post


Link to post
Share on other sites
janpeeters
21 hours ago, chrisayers said:

Try putting all that inside the post loop by using the loops and all sections shortcodes within the loop with <span> tags for the grid.

I am thinking like this  

<div class="row">

<div class="span4">[pl_section section="rad-profiles" id="radprofile1"]</div>

<div class="span8">[pl_section section="loops" id="newsloop"]</div>

</div>

Hi Chris, thanks for your suggestion I will try that out. Still hope that this will be doable in the front end otherwise the building proces will be a bit of a mixed bag of post loop shortcodes and front end.

Share this post


Link to post
Share on other sites
chrisayers
3 hours ago, janpeeters said:

Hi Chris, thanks for your suggestion I will try that out. Still hope that this will be doable in the front end otherwise the building proces will be a bit of a mixed bag of post loop shortcodes and front end.

Cool that exact code does not work. I was just using that as a quick example. Doing everything in the post loop rather than front end is what I feel to be the strongest feature of PL5. This is what ensures that no matter what theme a client changes to all the PL content stays put. With past versions we built all the eye candy around the edges of the post loop to the point we did not even need the post loop. Now reverse the polarity of your thinking. If all the PL content is in the loop. It is much safer for moving and upgrades for future. 

 

Share this post


Link to post
Share on other sites
janpeeters

Thanks for that explanation @chrisayers That's another way to look at it and I agree that it's safer. I wonder why Andrew and Simon have not chosen to create a visual builder to design the post-loop instead of having to work with shortcodes. 

Share this post


Link to post
Share on other sites
chrisayers
5 hours ago, janpeeters said:

Thanks for that explanation @chrisayers That's another way to look at it and I agree that it's safer. I wonder why Andrew and Simon have not chosen to create a visual builder to design the post-loop instead of having to work with shortcodes. 

I agree. Being able to make those changes in the framework editor while still in admin page editor would be amazing for future releases. I am just happy to go ahead and get this puppy out live for this week.

Share this post


Link to post
Share on other sites
Andrew

Reasoning for using shortcodes is so you guys have more granular control and ability to add your own HTML.

Developing a robust solution using a visual builder is a seriously intense proposition.

In this case we opted to give you more flexibility instead of a only slightly easier interface.

Share this post


Link to post
Share on other sites
janpeeters

@Andrew I understand your last repsonse. And @chrisayers suggestion is a nice workaround. But have you been able to look into why my sections don't stack up nicely besides The Loops? I would expect thatthis is a float issue in the CSS but I'm not a CSS pro. Hope this can also be fixed on the front end. Thanks.

Share this post


Link to post
Share on other sites

×