xF2.x Tuts Cách thêm icon vào trước thông tin tiền tệ của Add-ons DragonByte Credits

thuyet951
  • Lượt xem 85
  • Bình luận: 0
Trong bài viết này mình sẽ hướng dẫn anh em cách thêm icon vào trước thông tin tiền tệ của Add-ons DragonByte Credits ở phần hiển thị thông tin thành viên khi trong chủ đề.
Nếu anh em đang sử dụng một giao diện mà người phát triển họ có thêm các icon vào khung thông tin thành viên ở phần chủ đề, thì khi cài Add-ons DragonByte Credits, phần hiển thị của thông tin tiền tệ sẽ không có icon như các thông tin ở trên, điều này làm cho giao diện chúng ta thiếu đồng bộ.
Vậy để thêm icon vào trước thông tin tiền tệ của Add-ons DragonByte Credits anh em có thể làm theo các cách dưới đây.

Cách 1: thêm icon vào trước chỉ dùng CSS
Đây là cách đơn giản nhất, anh em chỉ cần mở template extra.less và thêm đoạn code dưới đây vào.
Less:
.message-userExtras {
    dl {
        &:last-child {
            &:before {
                .m-faBase();
                .m-faContent(@fa-var-money);
                margin-right: 5px;
                float: left;
            }
        }
    }
}
Cách 2: thêm icon bằng cách chỉnh sửa template của Add-ons DragonByte Credits
Ở cách này, chúng ta sẽ cần chỉnh sửa lại một chút template của Add-ons DragonByte Credits, template chứ phần hiển thị cho thông tin tiền tệ ở postbit của Add-ons DragonByte Credits là dbtech_credits_postbit, anh em mở template dbtech_credits_postbit và chỉnh sửa như sau.
Ở template dbtech_credits_postbit, anh em tìm dòng:
HTML:
<dl class="pairs pairs--justified">
Sau đó thêm vào bên dưới code icon, ở đây mình sử dụng Font Awesome và sử dụng icon Money, nên mình thêm vào dưới code sau:
HTML:
<i class="far fa-money-bill"></i>
Tiếp theo cần thêm một chút CSS cho nó hiển thị hợp lý, các bạn có thể thêm css vào template extra.less
Less:
.message-userExtras {
    .pairs {
        .fa-money-bill {
            float: left;
            margin-right: 5px;
            padding: 3px 0;
        }
    }
}
Okey đây là 2 cách giúp bạn có thể thêm icon vào thông tin tiền tệ ở postbit khi sử dụng Add-ons DragonByte Credits, nên lưu ý rằng, mỗi giao diện có cách tùy biến khác nhau, nên ở đây mình chỉ hướng dẫn cách thêm và chổ để anh em có thể tự thêm, nếu anh em biết chút về CSS có thể tùy biến thêm để giúp nó trở nên đồng bộ với giao diện đang sử dụng hơn.
Nếu như anh em nào không rành CSS, có thể bình luận phía dưới mình sẽ giúp anh em tùy biến CSS lại cho phù hợp với giao diện anh em đang sử dụng.
 
Vấn thân vào đam mê, không bao giờ từ bỏ...
─ Đam mê bằng đánh đổi
Top Bottom