Làm đẹp cho giao diện của các forum con Xenforo

[nttruong]

Bài viết này hướng dẫn các bạn cách làm đẹp cho giao diện của các forum con ở page forum_view của Xenforo.
Demo:

Cách làm:

Thêm đoạn code sau vào template EXTRA.CSS:

/* SUBFORUM COLUMNS */

.nodeList .node.level_2.node_15, .nodeList .node.level_2.node_18,
.nodeList .node.level_2.node_19, .nodeList .node.level_2.node_20,
.nodeList .node.level_2.node_21, .nodeList .node.level_2.node_22,
.nodeList .node.level_2.node_23, .nodeList .node.level_2.node_24 {
border: 1px solid #a5cae4;
border-radius: 3px;
display: inline-block;
margin: 5px 0;
width: 24%;
background-color: #e7f4fd;
}

.nodeList .node.level_2.node_15 .nodeLastPost, .nodeList .node.level_2.node_18 .nodeLastPost,
.nodeList .node.level_2.node_19 .nodeLastPost, .nodeList .node.level_2.node_20 .nodeLastPost,
.nodeList .node.level_2.node_21 .nodeLastPost, .nodeList .node.level_2.node_22 .nodeLastPost,
.nodeList .node.level_2.node_23 .nodeLastPost, .nodeList .node.level_2.node_24 .nodeLastPost { display:none; width: 0;}

.nodeList .node.level_2.node_15 .nodeText, .nodeList .node.level_2.node_18 .nodeText,
.nodeList .node.level_2.node_19 .nodeText, .nodeList .node.level_2.node_20 .nodeText,
.nodeList .node.level_2.node_21 .nodeText, .nodeList .node.level_2.node_22 .nodeText,
.nodeList .node.level_2.node_23 .nodeText, .nodeList .node.level_2.node_24 .nodeText
{ margin: 5px 0px 5px 10px; }

.nodeList .node.level_2.node_15 .nodeIcon, .nodeList .node.level_2.node_18 .nodeIcon,
.nodeList .node.level_2.node_19 .nodeIcon, .nodeList .node.level_2.node_20 .nodeIcon,
.nodeList .node.level_2.node_21 .nodeIcon, .nodeList .node.level_2.node_22 .nodeIcon,
.nodeList .node.level_2.node_23 .nodeIcon, .nodeList .node.level_2.node_24 .nodeIcon {display: none;}

.nodeList .node.level_2.node_15 .tinyIcon, .nodeList .node.level_2.node_18 .tinyIcon,
.nodeList .node.level_2.node_19 .tinyIcon, .nodeList .node.level_2.node_20 .tinyIcon,
.nodeList .node.level_2.node_21 .tinyIcon, .nodeList .node.level_2.node_22 .tinyIcon,
.nodeList .node.level_2.node_23 .tinyIcon, .nodeList .node.level_2.node_24 .tinyIcon {display: none;}

/* SUBFORUM COLUMNS */

Thay thế node_id tương ứng với các id của forum con site bạn là ok!

Chúc các bạn thành công!

 

[THB]

nếu muốn chia làm 2 cột hoặc 3 cột thì sao?

 

[dev.xf]

nếu muốn chia làm 2 cột hoặc 3 cột thì sao?

thay width 24 % thành 32% cho 3 cột và 49% cho 2 cột