XF2 [8WR] XenPorta 2 (Portal) PRO [Paid] 2.2.0.7

[boban]

The problem is that the items (as you can see in this my previous post) in the page are not alligned each other, The screenshot you gently send me is in the Xenporta Slider section and seems to show other settings

These might work, add the following to the extra.less template:

.block.porta-masonry {

   

   display: flex !important;


    flex-wrap: wrap !important;


    height: auto !important;


}



.porta-masonry .porta-article-item {


    position: static!important;


    display: flex  !important;


    }

 

[PeterG]

I'm thinking about buying this to replace WordPress as my portal. Currently, WordPress is in the root and Xenforo is in /community. If I use this plug-in, can I get the xenporta portion to show at the root domain without moving the forums to the root?

 

[markoroots]

Many thanks to all of you have tried to give me an hands. Webbouk, ChrisTERIS and Boban. Really appreaciated, thanks.
In the end seems that the Boban solution is working perfect.
Thanks again

 

[webbouk]

These might work, add the following to the extra.less template:

.block.porta-masonry {

  

   display: flex !important;


    flex-wrap: wrap !important;


    height: auto !important;


}



.porta-masonry .porta-article-item {


    position: static!important;


    display: flex  !important;


    }

The problem I found with that is if you have two article previews side be side of differing lengths, you end up with a blank space...



Whereas my initial suggestion, and the one I use, allows for varying lengths, however fits the article previews into the space required, although not all in line as Markoroots required....

<xf:css>
.message-body {
max-height: 500px !important;
overflow: hidden !important;
}
</xf:css>


or fixed height...


<xf:css>
.message-body {
height: 500px !important;
overflow: hidden !important;
}
</xf:css>

 

[CivilWarTalk]

The problem I found with that is if you have two article previews side be side of differing lengths, you end up with a blank space...

View attachment 237114

Whereas my initial suggestion, and the one I use, allows for varying lengths, however fits the article previews into the space required, although not all in line as Markoroots required....

<xf:css>
.message-body {
max-height: 500px !important;
overflow: hidden !important;
}
</xf:css>


or fixed height...


<xf:css>
.message-body {
height: 500px !important;
overflow: hidden !important;
}
</xf:css>

Eh....

If you do that you'll cut off the messages in your posts on the forum itself!

You really want:

.porta-article-item {
max-height: 500px !important;
overflow: hidden !important;
}

 

[Jaxel]

You guys are doing it completely wrong.

Firstly, MASONRY is a library for stacking elements of differing sizes. If you are looking for things to be exact sizes, you should disable the Masonry Grid function in the XenPorta style properties. At that point, styling the grid is up to you, as XenPorta will no longer do it automatically.

This is the CSS I recommend using... and DO NOT put it in existing templates. You should NEVER edit existing templates when you want to modify your styles and skins. You should be doing your changes in extra.less or the template modification system.

@_xp2_body_height: 200px;
@_xp2_head_height: 41px;
@_xp2_columns: 3;

.block[data-masonry=""]
{
    margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
    
    .porta-article-item
    {
        display: inline-block;
        width: ~"calc(100% / @{_xp2_columns})";

        .porta-article-container
        {
            margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
        }

        .message-main
        {
            display: flow-root;
            .message-body { height: @_xp2_body_height; overflow: hidden; }
        }
        .block-header + .message-inner
        {
            .message-main .message-body { height: ~"calc(@{_xp2_body_height} - @{_xp2_head_height} + @xf-EWRporta_header_height)"; }
        }
    }
}

I put 3 easy to edit variables on top. _xp2_body_height defines how big you want the text area to be when you are using image headers. If you promote a post that does not have an image header, it will add the value of xf-EWRporta_header_height to this height, so that things stay equal. There is also a variable for _xp2_head_height. This will be different for all your skins and is simply an offset for the previously mentioned circumstance. It should be equal to the calculated height of text headers (not image headers).

And the third is the number of columns you want.

 

[webbouk]

Eh....

If you do that you'll cut off the messages in your posts on the forum itself!

You really want:

.porta-article-item {
max-height: 500px !important;
overflow: hidden !important;
}

This suggestion cuts off the 'Continue' button on long previews

I see that Jaxel posted at the same time so I suggest we go with his advice

 

[Jaxel]

 

[Jaxel]

Or, if you want to continue using the Masonry library, you can do the following:

@_xp2_body_height: 200px;
@_xp2_head_height: 41px;
@_xp2_columns: 3;

.porta-masonry
{
    margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
   
    .porta-article-item
    {
        .message-main
        {
            display: flow-root;
            .message-body { height: @_xp2_body_height; overflow: hidden; }
        }
        .block-header + .message-inner
        {
            .message-main .message-body { height: ~"calc(@{_xp2_body_height} - @{_xp2_head_height} + @xf-EWRporta_header_height)"; }
        }
    }
}

This is a lot simpler; and will actually look better than the code I posted above. But you'll be loading an entire unneeded JavaScript library to do it.

 

[Jaxel]

Either way, I will figure out a way to make it simpler in style properties.

 

[Mendalla]

Nice. Tried that code out in my dev (the first one @Jaxel posted) and kind of like it. Not sure about using it on my board yet. We don't usually have many things on the front page so Masonry largely works fine for us.

Question: I notice that when I go to a thread that is promoted to make a change to its promotion, it is still showing "Promote an article" instead of "Edit Promotion". Not a big deal for me. It still takes me to the screen to edit the promotion so I get to do what I want. Could be confusing for someone less familiar with XenPorta, though.

 

[Ottavius]

I must say, ever since I purchased XPorta back in may 2020, I haven't had any trouble. Lucky for me, I went ahead and upgraded to XForo 2.2 (8 days ago), and still have not had any trouble at all, only one add on (free) stopped working, that was it. I just downloaded XPorta latest version 2.2.0.3, I guess I must upgrade now, just to be on the safe side if significant troubles arise in future.

 

[CivilWarTalk]

You guys are doing it completely wrong.

Firstly, MASONRY is a library for stacking elements of differing sizes. If you are looking for things to be exact sizes, you should disable the Masonry Grid function in the XenPorta style properties. At that point, styling the grid is up to you, as XenPorta will no longer do it automatically.

This is the CSS I recommend using... and DO NOT put it in existing templates. You should NEVER edit existing templates when you want to modify your styles and skins. You should be doing your changes in extra.less or the template modification system.

@_xp2_body_height: 200px;
@_xp2_head_height: 41px;
@_xp2_columns: 3;

.block[data-masonry=""]
{
    margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
   
    .porta-article-item
    {
        display: inline-block;
        width: ~"calc(100% / @{_xp2_columns})";

        .porta-article-container
        {
            margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
        }

        .message-main
        {
            display: flow-root;
            .message-body { height: @_xp2_body_height; overflow: hidden; }
        }
        .block-header + .message-inner
        {
            .message-main .message-body { height: ~"calc(@{_xp2_body_height} - @{_xp2_head_height} + @xf-EWRporta_header_height)"; }
        }
    }
}

I put 3 easy to edit variables on top. _xp2_body_height defines how big you want the text area to be when you are using image headers. If you promote a post that does not have an image header, it will add the value of xf-EWRporta_header_height to this height, so that things stay equal. There is also a variable for _xp2_head_height. This will be different for all your skins and is simply an offset for the previously mentioned circumstance. It should be equal to the calculated height of text headers (not image headers).

And the third is the number of columns you want.

I was wondering if you were going to chime in...

That does look even better. Easy to adjust too. Thanks!

 

[Jaxel]

Jaxel updated XF2 [8WR] XenPorta 2 (Portal) PRO with a new update entry:

2.2.0.4 - CHANGELOG

This update redesigns some of the styles of the default portal page. Check your style properties.

• You can now define fixed width heights of your message bodies on the articles list.
  • If you use fixed widths, the addon will automatically disable the masonry library.​
  • If you use image headers, the message body height will be automatically adjusted.​
• You can now choose to display a simpler "continue" button for the articles list...

Read the rest of this update entry...

After you install 2.2.0.4... get rid of the customizations I posted above. They will interfere.

 

[DaiAku]

@Jaxel - with this latest patch just lost all our headers. Are we doing something wrong in terms of having to update settings? Settings seem correct.

News

Deadhaus Sonata - Spiritual Successor To Legacy of Kain

deadhaussonata.com

 

[DaiAku]

oh there is a template out of date

 

[DaiAku]

Don't know the code enough to merge this by hand - auto-merge fixed some of it up but not all. Still issues.

 

[Jaxel]

Looks like you figured it out.

It also looks like your Articles per page is set to 5... you should set it to 4 or 6 with your setup.

 

[DaiAku]

Almost yes, still have the template issue - looks like it needs a merge. - Thanks ill set to 6

 

[DaiAku]

Template out of date - not sure what to do with this