Daha sonra bu kodları kullanıcı grubuna ( Diğer, özel CSS sınıf adı kullanarak ) alana
ekleyin,
ilk grup
için xfdestek_00, ikinci grup için xfdestek_01 vb. Ekleyin.
ekleyin,
ilk grup
için xfdestek_00, ikinci grup için xfdestek_01 vb. Ekleyin.
CSS:
/* common banner codes */
[class*='xfdestek_'] {font-family:'Exo';border-left: 3px solid rgba(0, 0, 0, 0.2);margin-top: 3px;text-align: center;height: 20px;line-height: 15px;position: relative;max-width: 180px;padding: 2px 20px 2px 15px;user-select: none;color: #FFFFFF;font-size: 11px;font-weight: normal;}
[class*='xfdestek_'] strong:before {font-family: "FontAwesome";background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;position: absolute;top: 0;bottom: 0;left: 0;padding: 2px 4px 0px 4px;min-width: 15px;font-size: 100%;text-align: center;}
[class*='xfdestek_'] strong {margin-left: 15px;}
/* custom banner codes for user group */
.xfdestek_00 {background: #8e0909;border-color: #8e0909;box-shadow: 0 0 15px #8e0909, inset 0 0 20px white;}.xfdestek_00 strong:before {content: "\f27e";}
.xfdestek_01 {background: #1C86EE;border-color: #1C86EE;box-shadow: 0 0 15px #1C86EE, inset 0 0 20px white;}.xfdestek_01 strong:before {content: "\f132";}
.xfdestek_02 {background: #176093;border-color: #176093;box-shadow: 0 0 15px #176093, inset 0 0 20px white;}.xfdestek_02 strong:before {content: "\f132";}
.xfdestek_03 {background: #14bd61;border-color: #14bd61;box-shadow: 0 0 15px #14bd61, inset 0 0 20px white;}.xfdestek_03 strong:before {content: "\f0e7";}
.xfdestek_04 {background: #17713c;border-color: #17713c;box-shadow: 0 0 15px #17713c, inset 0 0 20px white;}.xfdestek_04 strong:before {content: "\f0e7";}
.xfdestek_05 {background: #8F343A;border-color: #8F343A;box-shadow: 0 0 15px #8F343A, inset 0 0 20px white;}.xfdestek_05 strong:before {content: "\f044";}
.xfdestek_06 {background: #4ca79b;border-color: #4ca79b;box-shadow: 0 0 15px #4ca79b, inset 0 0 20px white;}.xfdestek_06 strong:before {content: "\f0d6";}
.xfdestek_07 {background: #8E44AD;border-color: #8E44AD;box-shadow: 0 0 15px #8E44AD, inset 0 0 20px white;}.xfdestek_07 strong:before {content: "\f2b5";}
.xfdestek_08 {background: #FFBE1C;border-color: #FFBE1C;box-shadow: 0 0 15px #FFBE1C, inset 0 0 20px white;}.xfdestek_08 strong:before {content: "\f234";}
.xfdestek_09 {background: #CF4D35;border-color: #CF4D35;box-shadow: 0 0 15px #CF4D35, inset 0 0 20px white;}.xfdestek_09 strong:before {content: "\f007";}
.xfdestek_10 {background: #000000;border-color: #000000;box-shadow: 0 0 15px #000000, inset 0 0 20px white;}.xfdestek_10 strong:before {content: "\f235";}
.xfdestek_11 {background: #202020;border-color: #202020;box-shadow: 0 0 15px #202020, inset 0 0 20px white;}.xfdestek_11 strong:before {content: "\f06e";}