These might work, add the following to the extra.less template:
CSS:.block.porta-masonry { display: flex !important; flex-wrap: wrap !important; height: auto !important; } .porta-masonry .porta-article-item { position: static!important; display: flex !important; }
Eh....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>
.porta-article-item {
max-height: 500px !important;
overflow: hidden !important;
}
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)"; }
}
}
}
_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).Eh....
If you do that you'll cut off the messages in your posts on the forum itself!
You really want:
Code:.porta-article-item { max-height: 500px !important; overflow: hidden !important; }
@_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)"; }
}
}
}
I was wondering if you were going to chime in...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 inextra.less
or the template modification system.
CSS:@_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 ofxf-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.
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...
We use essential cookies to make this site work, and optional cookies to enhance your experience.