Chào anh em!.
Trước tiên vẫn là chúc anh em sức khoẻ dồi giàu, để cùng nhau thức đêm trao dồi kiến thức XenForo
.
Lâu rồi chưa đóng góp được gì cho anh em, nay nhận lúc mới làm gần xong cáo giao diện có cái này có vẻ nhiều anh em thích nên xin phép được chia sẽ trên VNXF. Rất mong anh em ủng hộ.
Trước khi bắt đầu mình có đôi lời muốn chia sẽ cùng anh em (không lạc đề đâu liên quan lắm đấy).
Mình bắt đầu tiếp cận và xây dựng diễn đàn vốn đã từ lâu, lần đâu tiên mình xây dựng 1 cái diễn đàn là trên nền tảng miễn phí là "forumvi" chắc nhiều người còn nhớ, vì "forumvi" chỉ cho phép chỉnh sửa template không cho cài bất kỳ thứ gì thêm, nên đến ngày nay thói quen đó vẫn còn ăn sâu trong phong cách thiết kế của mình, tận dụng hết mội khả năng mà mã nguồn gốc đã có rồi triển khai, hạn chế tối đa add-ons và chỉnh sửa template gốc của mã nguồn, vì vậy trong bài hướng dẫn lần này mình sẽ không cần động gì đến template gốc của XenForo, mà chỉ dùng vài đoạn scripts đơn giản kết hợp với css rất đơn giản mà không động phạm gì đến nguyên bản của XenForo.
Một vài lưu ý:
- Đoạn scripts sau đây được áp dụng cho cả XenPorta 2, Widget Framework và cả sidebar_new_posts của XenForo.
- Nếu bạn cài từ 2 Widget Threads trở lên thì cần phải chỉnh sửa lại đoạn scripts (comment phia dưới mình sẽ chỉnh lại cho bạn).
Demo Online: http://heygame.net
Demo ảnh:
Bây giờ chúng ta bắt đầu.
Bước 1: Anh, Em mở template PAGE_CONTAINER và thêm đoạn scripts phía dưới vào dưới hoặc trên thẻ <body>
Bước 2: Mở template EXTRA.CSS thêm vào đoạn css dưới đây:
Bước 3: Có thể bỏ qua nếu bạn không dùng Widget Framework.
Ở phần tuỳ chọn của Widget các bạn tuỳ chỉnh Layout là Sidebar (avatar, title and on extra line).
Trước tiên vẫn là chúc anh em sức khoẻ dồi giàu, để cùng nhau thức đêm trao dồi kiến thức XenForo
.Lâu rồi chưa đóng góp được gì cho anh em, nay nhận lúc mới làm gần xong cáo giao diện có cái này có vẻ nhiều anh em thích nên xin phép được chia sẽ trên VNXF. Rất mong anh em ủng hộ.
Trước khi bắt đầu mình có đôi lời muốn chia sẽ cùng anh em (không lạc đề đâu liên quan lắm đấy).
Mình bắt đầu tiếp cận và xây dựng diễn đàn vốn đã từ lâu, lần đâu tiên mình xây dựng 1 cái diễn đàn là trên nền tảng miễn phí là "forumvi" chắc nhiều người còn nhớ, vì "forumvi" chỉ cho phép chỉnh sửa template không cho cài bất kỳ thứ gì thêm, nên đến ngày nay thói quen đó vẫn còn ăn sâu trong phong cách thiết kế của mình, tận dụng hết mội khả năng mà mã nguồn gốc đã có rồi triển khai, hạn chế tối đa add-ons và chỉnh sửa template gốc của mã nguồn, vì vậy trong bài hướng dẫn lần này mình sẽ không cần động gì đến template gốc của XenForo, mà chỉ dùng vài đoạn scripts đơn giản kết hợp với css rất đơn giản mà không động phạm gì đến nguyên bản của XenForo.
Một vài lưu ý:
- Đoạn scripts sau đây được áp dụng cho cả XenPorta 2, Widget Framework và cả sidebar_new_posts của XenForo.
- Nếu bạn cài từ 2 Widget Threads trở lên thì cần phải chỉnh sửa lại đoạn scripts (comment phia dưới mình sẽ chỉnh lại cho bạn).
Demo Online: http://heygame.net
Demo ảnh:
Bây giờ chúng ta bắt đầu.
Bước 1: Anh, Em mở template PAGE_CONTAINER và thêm đoạn scripts phía dưới vào dưới hoặc trên thẻ <body>
HTML:
<script type="text/javascript">
$('.sidebar .threadList ul li, .sidebar .widget_Threads ul li, .sidebar .WidgetFramework_WidgetRenderer_Threads ul li').each(function(i){
$(this).addClass("tforever_" + (i+1));
});
</script>Bước 2: Mở template EXTRA.CSS thêm vào đoạn css dưới đây:
Mã:
.tforever_1 a.avatar,
.tforever_2 a.avatar,
.tforever_3 a.avatar,
.tforever_4 a.avatar,
.tforever_5 a.avatar,
.tforever_6 a.avatar,
.tforever_7 a.avatar,
.tforever_8 a.avatar,
.tforever_9 a.avatar,
.tforever_10 a.avatar {
font-size: 18px;
line-height: 40px;
margin: 0 9px !important;
}
.tforever_1 a.avatar:before,
.tforever_2 a.avatar:before,
.tforever_3 a.avatar:before,
.tforever_4 a.avatar:before,
.tforever_5 a.avatar:before,
.tforever_6 a.avatar:before,
.tforever_7 a.avatar:before,
.tforever_8 a.avatar:before,
.tforever_9 a.avatar:before,
.tforever_10 a.avatar:before {
content: "1";
}
.tforever_1 img,
.tforever_2 img,
.tforever_3 img,
.tforever_4 img,
.tforever_5 img,
.tforever_6 img,
.tforever_7 img,
.tforever_8 img,
.tforever_9 img,
.tforever_10 img {
display: none;
}
.tforever_1 a.avatar {
color: #9c27b0 !important;
}
.tforever_1 a.avatar:before {
content: "1";
}
.tforever_2 a.avatar {
color: #009688 !important;
}
.tforever_2 a.avatar:before {
content: "2";
}
.tforever_3 a.avatar {
color: #e91e63 !important;
}
.tforever_3 a.avatar:before {
content: "3";
}
.tforever_4 a.avatar:before {
content: "4";
}
.tforever_5 a.avatar:before {
content: "5";
}
.tforever_6 a.avatar:before {
content: "6";
}
.tforever_7 a.avatar:before {
content: "7";
}
.tforever_8 a.avatar:before {
content: "8";
}
.tforever_9 a.avatar:before {
content: "9";
}
.tforever_10 a.avatar:before {
content: "10";
}Bước 3: Có thể bỏ qua nếu bạn không dùng Widget Framework.
Ở phần tuỳ chọn của Widget các bạn tuỳ chỉnh Layout là Sidebar (avatar, title and on extra line).
Bài viết liên quan
