Article Forum Symmetrical Grid Layout - Bài viết diễn đàn theo bố cục lưới đối xứng cho XenForo 2.2
Theo kiểu mặc định, diễn đàn bài viết ở chế độ xem trước có bố cục 1:2:2:4:4 về số lượng chủ đề (bài viết) được hiển thị trên mỗi hàng, như sau:
Điều này có thể được thay đổi bằng cách thêm một số CSS tùy chỉnh vào template
Để áp dụng nó cho nhiều node, hãy thêm các ID node bổ sung được phân tách bằng dấu phẩy như sau:
Ở đây bạn có thể thấy bố cục được áp dụng cho một node chứ không phải node khác.
Tất nhiên, kiểu dáng có thể được điều chỉnh để phù hợp với nhu cầu cụ thể của bạn.
Chúc các bạn thành công.
Theo kiểu mặc định, diễn đàn bài viết ở chế độ xem trước có bố cục 1:2:2:4:4 về số lượng chủ đề (bài viết) được hiển thị trên mỗi hàng, như sau:
extra.less.Equal Grid - Floating Footer
Việc thêm code này sẽ tạo ra một bố cục lưới thống nhất với footer ở vị trí mặc định, nổi bên dưới nội dung trong mỗi bài viết:
Less:
.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;
&:nth-of-type(n)
{
grid-area: unset;
& .articlePreview
{
&-main
{
flex-direction: column;
}
&-image
{
width: 100%;
}
&-title
{
font-size: @xf-fontSizeLarger;
}
&-content .bbWrapper:after
{
background: none;
}
&-meta
{
border-top: solid 1px @xf-borderColor;
& .articlePreview-by
{
display: none;
}
}
}
}
}
Equal Grid - Fixed Footer
Sử dụng code này sẽ dẫn đến bố cục lưới bằng nhau với footer được cố định ở cuối mỗi bài viết:
Less:
@media (min-width: @xf-responsiveMedium)
{
@__ctaArticleFooter: 40px;
.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;
&:nth-of-type(n)
{
grid-area: unset;
& .articlePreview
{
&-main
{
flex-direction: column;
min-height: 100%;
padding-bottom: @__ctaArticleFooter;
}
&-image
{
width: 100%;
}
&-title
{
font-size: @xf-fontSizeLarger;
}
&-content
{
margin-bottom: -@__ctaArticleFooter;
}
&-footer
{
position: relative;
bottom: @__ctaArticleFooter;
}
&-meta
{
border-top: solid 1px @xf-borderColor;
& .articlePreview-by
{
display: none;
}
}
}
}
}
}
.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
background: none;
}
Các node cụ thể
Để chỉ áp dụng bố cục cho một node cụ thể, hãy bọc code như vậy, thay thế code 2 bằng ID node:
Less:
[data-container-key="node-2"]
{
...
}Để áp dụng nó cho nhiều node, hãy thêm các ID node bổ sung được phân tách bằng dấu phẩy như sau:
Less:
[data-container-key="node-2"],
[data-container-key="node-4"],
[data-container-key="node-8"]
{
...
}Ở đây bạn có thể thấy bố cục được áp dụng cho một node chứ không phải node khác.
Chúc các bạn thành công.
Nguồn: xenforo.com
