Có gì mới?

Welcome to Tạp Chí CNTT & Truyền Thông

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Article Forum Symmetrical Grid Layout

nguyenac

Administrator
Staff member
Tham gia
18/11/08
Bài viết
22,990
Điểm tương tác
6
Điểm
38
Website
tapchiict.com


This can be changed by adding some custom CSS to the extra.less template.

Equal Grid - Floating Footer​

Adding this code will produce a uniform grid layout with the footer at the default location, floating below the content in each article:
CSS:
.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​

Using this code will result in an equal grid layout with the footer fixed to the bottom of each article:
CSS:
@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: [email protected]__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;
}



Specific Nodes​

To only apply the layout to a specific node, wrap the code like so, replacing the 2 with the node ID:
CSS:
[data-container-key="node-2"]
{
...
}
To apply it to multiple nodes, add additional node IDs comma separated like this:
CSS:
[data-container-key="node-2"],
[data-container-key="node-4"],
[data-container-key="node-8"]
{
...
}
Here you can see the layout is applied to one node but not the other.


The styling can of course be adjusted to suit your particular needs.
If you found this tutorial useful, donations of positive emojis are gladly received.
 

Facebook Comment

Similar threads

This simple template edit adds two links, one below each user's info while viewing a post, and one in your forum's footer. You can technically place the link anywhere you want, but these placements seem the most useful.First, go to your XF admin-> appearance -> templates and open up "header"...
Trả lời
0
Xem
269
Hey everyone, I hear a lot of talk lately about side by side nodes, so here is a resource to get you in the right direction. If you goal is to have an alternate style to your node list or save some space, this is a great way to set your forums up and XenForo is neat enough to allow this to be...
Trả lời
0
Xem
730
vbulletin.org Quote Box 4.2.0Online Demo : vbulletin.web.trUpload this image to your image/misc folder:Open the additional.css template of the theme that you use and add this code to the top/* vbulletin.web.tr - vbulletin.org Alıntı Kutusu...
Trả lời
0
Xem
737
http://www.vbulletin.org/forum/showthread.php?t=280518 vB Version: 4.1.11STOP: Before we go any further, I want to make it clear that you need to have a basic understanding of what you're doing. You need to have a basic understanding of CSS in order to make this perfect. I have tried my...
Trả lời
0
Xem
479
  • Dán lên cao
vB Version: 4.x.xI create a little modification for my site and want to share it with you.With this modification you can make a sharebar-slider for your forum.Please look screenshots for more details or visit Abload.net :: Startseite for a live demo.1. Open template "additional.css" 2...
Trả lời
0
Xem
483

Latest resources

Bên trên Bottom