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

hacobi1102

Thượng Đế
Tham gia
10/03/2016
Bài viết
355
Được Like
164
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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,822
Được Like
11,109

hacobi1102

Thượng Đế
Tham gia
10/03/2016
Bài viết
355
Được Like
164
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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,822
Được Like
11,109
@hacobi1102 thêm ảnh demo cho sống động bạn ơi, hehe
 

casavalahar

Thượng Đế
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


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom