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,830
Được Like
12,697

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,830
Được Like
12,697
@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

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom