kiến thức CSS - Giao diện Next VOZ giống 99% Voz Forums (Made by me)

Có cách nào đổi giao diện hay màu sắc khác bằng các công cụ có sẵn cho dễ nhìn hơn đc ko các bác, em mò nát setting rồi mà ko thấy. Em ko muốn cài thêm hàng ngoài linh tinh và cũng ko nhất định làm giống giao diện VoZ cũ. Sao cho dễ nhìn là đc. Chứ hiện tại nhìn nhức con mắt (như hình) mà mình đã bỏ thói quen vào Voz thường xuyên từ năm 2008, khi Voz bắt buộc chuyển sang Next từ đầu dịch Corona đến giờ mình mới vào lại :( .

Capture1.PNG
 
Last edited:
Stylish cho các thím nào muốn dùng thử trước: https://userstyles.org/styles/181030/the-next-voz-classic (Cập nhật liên tục...)

Đã có version hoàn chỉnh giữ lại toàn bộ chức năng của Next VOZ - Cập nhật: 11:00 18/03/2020

Hú bác @Kacee có đi ngang qua thì help em update cái title với. Forum diable tính năng edit title rồi, được thì bác xóa dùm cái chữ cập nhật..... Thanks bác

2020f6bc584b-a470-4d09-888c-3945a59e826f.png


Xin chào cán bộ,

Lời nói đầu tiên em xin tự giới thiệu em là một lập trình viên đang sống và làm việc tại xứ sở thiên đường. Tham gia VOZ cũng từ những năm 2012 đến giờ cũng ngót nghét hơn 8 năm rồi, chủ yếu nằm vùng, hóng chuyện là chính, tự cảm thấy chưa đóng góp gì cho diễn đàn, và cũng nhiều lần có ý định lập 1 diễn đàn mới để cạnh tranh với VOZ nhưng không thành. Nay em xin góp một ít tài mọn để có cái gọi là đóng góp cho diễn đàn, với một hy vọng là cán bộ sẽ hết mình vì dân vì nước.

Mở màng lan man, bây giờ vào đề luôn là em dùng Chrome sau đó bật inspector lên để update layout thôi chứ em không cài Xenforo về để code.

Trong version này cán bộ chỉ cần add thêm CSS của em vào thẻ <style></style> bỏ trên thẻ </header> là có thể chạy được. CSS này chủ yếu dựa vào cấu trúc HTML ID của của các elements.

Cán bộ có thể chạy thử, nếu cán bộ quyết định sử dụng thì em sẽ cố gắng update để cho giống hoàn toàn với VOZ forums.

Đây là Github em để public, VOZ-er có thể contribute vào, tạo Pull request, em sẽ review và approve.

Github: https://github.com/dinhnhatbang/voz-css

CSS: https://github.com/dinhnhatbang/voz-css/blob/master/style.css

Tính năng:
- Giao diện như forums VOZ
- Thay đổi 1 số icon cho giống với Forums VOZ
- Tối ưu responsive.
- Giữ nguyên toàn bộ tính năng của giao diện mới
Thím cập nhật lại đi, nextvoz mới đổi tên miền.
Cách chỉnh tay, bấm vào dấu ... chọn Manage All Styles
1589849525658.png


Sau đó chọn edit
1589849581938.png


Sửa lại tên miền voz.vn
1589849631903.png
 
Thím thớt có lòng fix lại cái vụ này giùm ae với, nhìn khó chịu vãi ra
Chuyển về giao diện chính của voz thì nhìn đau mắt kinh
1594262265129.png
 
thím có thể update sao cho cái thanh công cụ này luôn đính phía trên ngay cả khi cuộn xuống dưới trang không, giống với giao diện mặc định :adore:

View attachment 66993

@truongthjnh
Edit rồi thêm đoạn này vào cuối như hình rồi nhấn Save
.p-navSticky--primary.is-sticky {position: fixed!important;top: 0;left: 0;width:100%!important;}

Screen Shot 2020-07-09 at 13.25.45.png
 
Last edited:
Stylish cho các thím nào muốn dùng thử trước: https://userstyles.org/styles/181030/the-next-voz-classic (Cập nhật liên tục...)

Đã có version hoàn chỉnh giữ lại toàn bộ chức năng của Next VOZ - Cập nhật: 11:00 18/03/2020

Hú bác @Kacee có đi ngang qua thì help em update cái title với. Forum diable tính năng edit title rồi, được thì bác xóa dùm cái chữ cập nhật..... Thanks bác

2020f6bc584b-a470-4d09-888c-3945a59e826f.png


Xin chào cán bộ,

Lời nói đầu tiên em xin tự giới thiệu em là một lập trình viên đang sống và làm việc tại xứ sở thiên đường. Tham gia VOZ cũng từ những năm 2012 đến giờ cũng ngót nghét hơn 8 năm rồi, chủ yếu nằm vùng, hóng chuyện là chính, tự cảm thấy chưa đóng góp gì cho diễn đàn, và cũng nhiều lần có ý định lập 1 diễn đàn mới để cạnh tranh với VOZ nhưng không thành. Nay em xin góp một ít tài mọn để có cái gọi là đóng góp cho diễn đàn, với một hy vọng là cán bộ sẽ hết mình vì dân vì nước.

Mở màng lan man, bây giờ vào đề luôn là em dùng Chrome sau đó bật inspector lên để update layout thôi chứ em không cài Xenforo về để code.

Trong version này cán bộ chỉ cần add thêm CSS của em vào thẻ <style></style> bỏ trên thẻ </header> là có thể chạy được. CSS này chủ yếu dựa vào cấu trúc HTML ID của của các elements.

Cán bộ có thể chạy thử, nếu cán bộ quyết định sử dụng thì em sẽ cố gắng update để cho giống hoàn toàn với VOZ forums.

Đây là Github em để public, VOZ-er có thể contribute vào, tạo Pull request, em sẽ review và approve.

Github: https://github.com/dinhnhatbang/voz-css

CSS: https://github.com/dinhnhatbang/voz-css/blob/master/style.css

Tính năng:
- Giao diện như forums VOZ
- Thay đổi 1 số icon cho giống với Forums VOZ
- Tối ưu responsive.
- Giữ nguyên toàn bộ tính năng của giao diện mới
sang thớt mình cứu mình phát fen ơi
VkD3FU0.png
VkD3FU0.png
VkD3FU0.png
 
css của tôi đơn giản thế này thôi :D

Code:
body {
    font-family: Roboto, san-serif;
    font-size: 16px;
    line-height: 1.5;
}

.message-userContent {
    font-family: Roboto, san-serif;
    font-size: 18px;
}

.p-body, .p-nav-inner, .p-sectionLinks-inner, .p-header-inner {
    max-width: 960px !important;
    margin-left: auto;
    margin-right: auto;
}

.p-body-sidebar, .p-footer {
    display: none;
}
 
Back
Top