Thủ Thuật CSS bộ màu tiền tố đẹp cho xenforo

hacobi1102

MasterCorporal
Tham gia
10/03/2016
Bài viết
356
Được Like
166
Mình mới get bộ màu cho tiền tố của google, khá hợp mắt, nên gửi VNXF lưu trữ, sau này cần gì tìm lại cho dễ.
Đăng lên đây chia sẻ cho anh em luôn, ai copy nhớ ghi nguồn VNXF.vn ạ
Untitled.png


Thứ tự từ trái qua phải, từ trên xuống dưới nhé:
HTML:
.hacobi-label1{background-color: rgb(231, 231, 231); color: rgb(70, 70, 70);}
.hacobi-label2{background-color: rgb(182, 207, 245); color: rgb(13, 52, 114);}
.hacobi-label3{background-color: rgb(152, 215, 228); color: rgb(13, 59, 68)}
.hacobi-label4{background-color: rgb(227, 215, 255); color: rgb(61, 24, 142);}
.hacobi-label5{background-color: rgb(251, 211, 224); color: rgb(113, 26, 54);}
.hacobi-label6{background-color: rgb(242, 178, 168); color: rgb(138, 28, 10);}
.hacobi-label7{background-color: rgb(194, 194, 194); color: rgb(255, 255, 255);}
.hacobi-label8{background-color: rgb(73, 134, 231); color: rgb(255, 255, 255);}
.hacobi-label9{background-color: rgb(45, 162, 187); color: rgb(255, 255, 255);}
.hacobi-label10{background-color: rgb(185, 154, 255); color: rgb(255, 255, 255);}
.hacobi-label11{background-color: rgb(246, 145, 178); color: rgb(153, 74, 100);}
.hacobi-label12{background-color: rgb(251, 76, 47); color: rgb(255, 255, 255);}
.hacobi-label13{background-color: rgb(255, 200, 175); color: rgb(122, 46, 11);}
.hacobi-label14{background-color: rgb(255, 222, 181); color: rgb(122, 71, 6);}
.hacobi-label15{background-color: rgb(251, 233, 131); color: rgb(89, 76, 5);}
.hacobi-label16{background-color: rgb(253, 237, 193); color: rgb(104, 78, 7);}
.hacobi-label17{background-color: rgb(179, 239, 211); color: rgb(11, 79, 48);}
.hacobi-label18{background-color: rgb(162, 220, 193); color: rgb(4, 80, 46);}
.hacobi-label19{background-color: rgb(255, 117, 55); color: rgb(255, 255, 255);}
.hacobi-label20{background-color: rgb(255, 173, 70); color: rgb(255, 255, 255);}
.hacobi-label21{background-color: rgb(235, 219, 222); color: rgb(102, 46, 55);}
.hacobi-label22{background-color: rgb(204, 166, 172); color: rgb(255, 255, 255);}
.hacobi-label23{background-color: rgb(66, 214, 146); color: rgb(9, 66, 40);}
.hacobi-label24{background-color: rgb(22, 167, 101); color: rgb(255, 255, 255);}

Thêm border xám:
HTML:
.hacobi-label1{background-color: rgb(231, 231, 231); color: rgb(70, 70, 70);border-color: grey;}
.hacobi-label2{background-color: rgb(182, 207, 245); color: rgb(13, 52, 114);border-color: grey;}
.hacobi-label3{background-color: rgb(152, 215, 228); color: rgb(13, 59, 68)border-color: grey;}
.hacobi-label4{background-color: rgb(227, 215, 255); color: rgb(61, 24, 142);border-color: grey;}
.hacobi-label5{background-color: rgb(251, 211, 224); color: rgb(113, 26, 54);border-color: grey;}
.hacobi-label6{background-color: rgb(242, 178, 168); color: rgb(138, 28, 10);border-color: grey;}
.hacobi-label7{background-color: rgb(194, 194, 194); color: rgb(255, 255, 255);border-color: grey;}
.hacobi-label8{background-color: rgb(73, 134, 231); color: rgb(255, 255, 255);border-color: grey;}
.hacobi-label9{background-color: rgb(45, 162, 187); color: rgb(255, 255, 255);border-color: grey;}
.hacobi-label10{background-color: rgb(185, 154, 255); color: rgb(255, 255, 255);border-color: grey;}
.hacobi-label11{background-color: rgb(246, 145, 178); color: rgb(153, 74, 100);border-color: grey;}
.hacobi-label12{background-color: rgb(251, 76, 47); color: rgb(255, 255, 255);border-color: grey;}
.hacobi-label13{background-color: rgb(255, 200, 175); color: rgb(122, 46, 11);border-color: grey;}
.hacobi-label14{background-color: rgb(255, 222, 181); color: rgb(122, 71, 6);border-color: grey;}
.hacobi-label15{background-color: rgb(251, 233, 131); color: rgb(89, 76, 5);border-color: grey;}
.hacobi-label16{background-color: rgb(253, 237, 193); color: rgb(104, 78, 7);border-color: grey;}
.hacobi-label17{background-color: rgb(179, 239, 211); color: rgb(11, 79, 48);border-color: grey;}
.hacobi-label18{background-color: rgb(162, 220, 193); color: rgb(4, 80, 46);border-color: grey;}
.hacobi-label19{background-color: rgb(255, 117, 55); color: rgb(255, 255, 255);border-color: grey;}
.hacobi-label20{background-color: rgb(255, 173, 70); color: rgb(255, 255, 255);border-color: grey;}
.hacobi-label21{background-color: rgb(235, 219, 222); color: rgb(102, 46, 55);border-color: grey;}
.hacobi-label22{background-color: rgb(204, 166, 172); color: rgb(255, 255, 255);border-color: grey;}
.hacobi-label23{background-color: rgb(66, 214, 146); color: rgb(9, 66, 40);border-color: grey;}
.hacobi-label24{background-color: rgb(22, 167, 101); color: rgb(255, 255, 255);border-color: grey;}

P/s: File excell để chỉnh border =))
 

Đính kèm

  • CSS-prefix.zip
    6 KB · Lượt xem: 5

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680

hacobi1102

MasterCorporal
Tham gia
10/03/2016
Bài viết
356
Được Like
166
Thêm bộ nữa
HTML:
.prefix.prefixPrimary {border-color: rgb(239, 239, 239);}
.prefix.prefixRed { color: white; background-color: #e74c3c; border-color: #e74c3c; }
.prefix.prefixGreen { color: white; background-color: #27ae60; border-color: #27ae60; }
.prefix.prefixOlive { color: black; background-color: #16a085; border-color: #16a085; }
.prefix.prefixLightGreen { color: black; background-color: #2ecc71; border-color: #2ecc71; }
.prefix.prefixBlue { color: white; background-color: #2980b9; border-color: #2980b9; }
.prefix.prefixRoyalBlue { color: white; background-color: #2c3e50; border-color: #2c3e50;  }
.prefix.prefixSkyBlue { color: black; background-color: #3498db; border-color: #3498db; }
.prefix.prefixGray { color: black; background-color: #bdc3c7; border-color: #bdc3c7; }
.prefix.prefixSilver { color: black; background-color: #7f8c8d; border-color: #7f8c8d; }
.prefix.prefixYellow { color: black; background-color: #f1c40f; border-color: #f1c40f; }
.prefix.prefixOrange { color: black; background-color: #e67e22; border-color: #e67e22; }
 
  • Like
Reactions: PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
@hacobi1102 thêm ảnh demo cho sống động bạn ơi, hehe
 

casavalahar

Gefreiter
Tham gia
28/08/2017
Bài viết
74
Được Like
21
Thay chỗ nào các bác nhỉ, tiện thể mình cần 1 bạn chuyên code xenforo ở Sài Gòn, gặp trực tiết bàn project.
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom