بسم الله الرحمن الرحيم

اقدم لكم طريقة جديدة لعرض القاب الاعضاء في منتديات الـ VBulletin
خلفية مع صورة بجانب اللقب
باستخدام اكواد الـ css
مثال على الكود




طريقة التركيب :
اولا حبيت انوه انه الكود يشتغل فقط على الاستايلات اللي تضع فيها الـ css
يعني كل استايل بدك يشتغل فيه بدك تفوت يدويا تركب الاكواد
اولا :
ندخل لوحة التحكم - التحكم بالاستايلات - ورقة css - والصندوق اللي بالاعلى css اضافي ضع به الاكواد التالية

.rr {
    background: #de0c0c;
    color: #FFF;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.rr:before {
    background: url(images/rr/ad.png) no-repeat 50% 50% rgba(0,0,0,0.2);
    background-size: 15px !important;
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 23px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 23px;
}

.rr1 {
    background: #3d52f5;
    color: #FFF;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.rr1:before {
    background: url(images/rr/sm.png) no-repeat 50% 50% rgba(0,0,0,0.2);
    background-size: 15px !important;
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 23px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 23px;
}
.rr2 {
    background: #179c1a;
    color: #FFF;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.rr2:before {
    background: url(images/rr/tm.png) no-repeat 50% 50% rgba(0,0,0,0.2);
    background-size: 15px !important;
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 23px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 23px;
}
.rr3 {
    background: #9c1785;
    color: #FFF;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.rr3:before {
    background: url(images/rr/tm.png) no-repeat 50% 50% rgba(0,0,0,0.2);
    background-size: 15px !important;
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 23px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 23px;
}
.rr4 {
    background: #000000;
    color: #FFF;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.rr4:before {
    background: url(images/rr/nm.png) no-repeat 50% 50% rgba(0,0,0,0.2);
    background-size: 15px !important;
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 23px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 23px;
}
.rr5 {
    background: #4d2902;
    color: #FFF;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.rr5:before {
    background: url(images/rr/m.png) no-repeat 50% 50% rgba(0,0,0,0.2);
    background-size: 15px !important;
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 23px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 23px;
}
.rr6 {
    background: #024d4a;
    color: #FFF;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.rr6:before {
    background: url(images/rr/gm.png) no-repeat 50% 50% rgba(0,0,0,0.2);
    background-size: 15px !important;
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 23px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 23px;
}
.rr7 {
    background: #3d3d3d;
    color: #FFF;
    border-radius: 10px;
    padding: 5px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.rr7:before {
    background: url(images/rr/im.png) no-repeat 50% 50% rgba(0,0,0,0.2);
    background-size: 15px !important;
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 23px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 23px;
}

ثانيا :
وبعد تركيبه كل ما عليك فقط التوجه الى مكان الالقاب او الالقاب الاضافية في ملفات الاعضاء او لقب العضو بكل مجموعة واضافة الكود التالي

<span class="rr2">مشرف متخصص</span>

طبعا موجود بالكود 7 اشكال يمكن زيادة عبر نسخ الكود بالمسمى
rr و rr:before
وتغيير الوسم وتغييره ايضا بكود اللقب عشان يتجاوب مع الـ css
وموجود بالكود 7 الوان يمكنك تغييرها عن طريق تغيير الوسم rr واضافة الارقام الموجودة بالكود عليه من 2-7
ويمكنك تغيير الايقونة بجانب اللقب من خلال روابط الصور الموجودة بالكود


هيك بكون أتممت الشرح كامل
يرجى ذكر المصدر عند النقل
لمشاهدة الروابط يلزمك التسجيل

بالتوفيق للجميع
والسلام ختام