Side By Side Nodes - Tạo các node bên cạnh

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Side By Side Nodes - Tạo các node bên cạnh

Đầu tiên, quyết định xem bạn muốn các node category của bạn bên cạnh hay các node forum/page/link của bạn bên cạnh. Ngoài ra, khi bạn có một số lượng các node ký hiệu là n lớn hơn 1 và lẻ, làm thế nào để bạn muốn điều đó được khắc phục? Bạn muốn nó được đầy đủ chiều rộng? Tôi tin rằng hướng dẫn này sẽ giúp bạn làm cả hai.

Tất cả thay đổi có thể được thực hiện trong template EXTRA.css.

Phương pháp 1: Node Category bên cạnh
Bước 1: Vị trí các node category width ở mức 50%
Mã:
.nodeList .node.category {
        float: left;
        width: 50%;
    }

Điều này làm là có được tất cả các categories của bạn bên cạnh. Nhưng bạn sẽ nhận thấy rằng nếu bạn có loại độ cao khác nhau (không thể tránh khỏi trong hầu hết các trường hợp), bạn sẽ phải xóa chúng. Bạn cũng sẽ nhận thấy rằng không có khoảng cách giữa các categories, vì vậy chúng ta hãy thêm 10px ở giữa sau đó. Bằng cách thêm 5px bên phải lẻ và 5px bên trái của ngay cả khi bạn có được một rãnh 10px giữa chúng.
Mã:
.nodeList .node.category {
        float: left;
        width: 50%;
        box-sizing: border-box;
    }

    .nodeList .node.category:nth-child(odd) {
        clear: left;
        padding-right: 5px;
    }

    .nodeList .node.category:nth-child(even) {
        padding-left: 5px;
    }

Bằng cách xóa các child lẻ còn lại, các thiết lập tiếp theo của 2 sẽ bị xóa một cách an toàn vào dòng tiếp theo. Tôi cũng cần thiết để thêm box-sizing: border-box để đảm bảo padding của tôi đã không được thêm vào width 50% của tôi. Nếu bạn không sử dụng border-box, có những phương pháp khác thực hiện điều này.

method1_step1.jpg

Bước 2: Xóa nodeList

Bạn sẽ nhận thấy rằng các thẻ wrapping nodeList được hiển thị buồn cười, như thể không có gì là bên trong của nó. Đó là bởi vì khi bạn đã bao giờ nổi một cái gì đó, để có được các border, padding, background, vv để wrap với các item nổi bạn cần một clear hoặc một clearfix. May mắn thay, XenForo có một người trợ giúp tốt cho việc này.
Mã:
{xen:helper clearfix, '.nodeList'}

method1_step2.jpg

Bước 3: Loại bỏ các bài viết mới nhất

Bây giờ, với phương pháp này, nó không phải là khôn ngoan để bao gồm các bài viết mới nhất cho độ phân giải nhỏ hơn, tất cả mọi thứ chùm với nhau. Giải pháp đơn giản là ẩn bài viết mới nhất và những sản phẩm khác trong cách. Tùy chọn, bạn có thể wrap trong một thẻ media nên những thứ chỉ ẩn khi họ bắt đầu bunch. Tôi sẽ loại bỏ hoàn toàn mine.

Kể từ .nodeText (nơi tiêu đề node và số liệu thống kê được) có một lề bên phải, chúng ta cần phải điều chỉnh đó là tốt.
Mã:
.nodeList .node.category .node .nodeText {margin-right: 10px;}
    .nodeList .node.category .node .nodeLastPost, .nodeList .node.category .node .nodeControls {display: none;}

method1_step3.jpg

Bước 4: Khắc phục cho cách xem responsive

Bạn sẽ nhận thấy trên một trong hai thiết bị di động của bạn hoặc bằng cách điều chỉnh độ rộng của màn hình của bạn, rằng phía bởi các node bên không tất nhiên làm việc tốt theo mặc định. Vì vậy, lời khuyên của tôi là bạn wrap tất cả mọi thứ chúng tôi chỉ làm bên trong của một truy vấn media mà chủ yếu loại bỏ mã mà khi thiết bị của bạn là một chiều rộng nhất định (nhỏ). Và với điều này, đây là tất cả các mã tôi đã cho phương pháp này:
Mã:
/* METHOD 1: SIDE BY SIDE CATEGORIES */

@media (min-width: @maxResponsiveMediumWidth) {

    {xen:helper clearfix, '.nodeList'}

    .nodeList .node.category {
        float: left;
        width: 50%;
        box-sizing: border-box;
    }

    .nodeList .node.category:nth-child(odd) {
        clear: left;
        padding-right: 5px;
    }

    .nodeList .node.category:nth-child(even) {
        padding-left: 5px;
    }

    .nodeList .node.category .node .nodeText {margin-right: 10px;}
    .nodeList .node.category .node .nodeLastPost, .nodeList .node.category .node .nodeControls {display: none;}

}

method1_step4.jpg

Bạn có thể muốn thử những điều khác, như điều chỉnh chiều cao categoryStrip và như vậy để cho thấy một cái nhìn thống nhất hơn.

Cách 2: Node non-category bên cạnh

Từ những gì tôi đã nhìn thấy, điều này có lẽ là phương pháp ưa thích của mọi người. Nó sau cùng tiêu chuẩn như categories, nhưng tôi sẽ đi qua nó một lần nữa nhưng các mã thay đổi một chút.

Bước 1: Cân chỉnh các node bên cạnh nhau
Mã:
.nodeList .node.level_2 {float: left; width: 50%;}

Hãy ghi nhớ, sử dụng .level_2 có nghĩa là điều này sẽ không hoạt động trên sub-forum, nhưng đó có thể là cố ý cho bạn. Nếu bạn làm muốn nó hiển thị trên sub-forum, bạn sẽ phải thêm code sau nữa:
Mã:
.nodeList .node.forum, .nodeList .node.link, .nodeList .node.page {float: left; width: 50%;}

Do cách biểu tượng được thiết lập, bạn có thể hoặc có thể không phải rõ ràng con số lẻ như chúng tôi đã làm trước đây.
Mã:
.nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }

Bước 2: Xóa nodeList

Cùng với trước đây, tùy thuộc vào style hoặc thiết lập của bạn, tốt nhất là để xóa các nodeList nên yếu tố nổi hiện lên độc đáo.
Mã:
{xen:helper clearfix, '.nodeList'}

Nếu vì một số lý do bạn chỉ muốn nodeList mà kết thúc tốt đẹp các node cấp thứ hai, sử dụng '.nodeList .nostList', vì bạn sẽ muốn nodeList bên trong .nodeList bao bọc toàn bộ danh sách các node. Bây giờ đó là mouthful.

method2_step2.jpg

Bước 3: Loại bỏ các bài viết mới nhất
Mã:
    .nodeList .node.level_2 .nodeLastPost {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }

    .nodeList .node.level_2 .nodeText {margin-right: 26px;}
    .nodeList .node.level_2 .nodeControls {right: 8px;}

Bước 4: Khắc phục cách xem responsive
Mã:
/* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */

@media (min-width: @maxResponsiveMediumWidth) {

    {xen:helper clearfix, '.nodeList'}

    .nodeList .node.level_2 {float: left; width: 50%;}

    .nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }

    .nodeList .node.level_2 .nodeLastPost {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }

    .nodeList .node.level_2 .nodeText {margin-right: 26px;}
    .nodeList .node.level_2 .nodeControls {right: 8px;}

}

method2_step3.jpg

Bây giờ, nếu bạn muốn làm cho các odd child fluid width cuối cùng, bất kể phương pháp, bạn sẽ phải nói cho rõ ràng nó.
Mã:
    .nodeList .node.level_2:last-child:nth-child(odd) {width: 100%;}
    .nodeList .node.level_2:last-child:nth-child(odd) .nodeText {
        margin-right: 270px;
    }

lastoddnode.jpg

Chúng tôi cũng có thể làm cho cái nhìn node lẻ cuối cùng giống như một node XenForo bình thường bằng cách thêm 2 phần cuối cùng của mã nhìn thấy ở đây.
Mã:
    .nodeList .node.level_2:last-child:nth-child(odd) .nodeLastPost {
        width: 210px;
        margin-top: 10px;
        position: absolute;
        padding-right: 10px;
        }
   
    .nodeList .node.level_2:last-child:nth-child(odd) .nodeControls {right: 242px;}

Bạn có thể trở nên khá sáng tạo với nó, như tôi đã làm cho UI.X.

uix.jpg

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


Nguồn: xenforo.com​
 
Back
Top