القاب الاعضاء بشكل جديد ومميز حصريا على انكور

[Admin]

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



اقدم لكم طريقة جديدة لعرض القاب الاعضاء في منتديات الـ 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 

ويمكنك تغيير الايقونة بجانب اللقب من خلال روابط الصور الموجودة بالكود

هيك بكون أتممت الشرح كامل 

يرجى ذكر المصدر عند النقل

شركة انكور التطويرية | دعم - تطوير - اشهار - تصميم



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

والسلام ختام​

 

[وزيرة]

موضوع رائع ومميز

طرحت فابدعت دمت ودام عطائك

سلمت اناملك الذهبيه على ماخطته لنا

اعذب التحايا لك

لك خالص احترامي

 

[جريح الليل]

روعه

 

[السفير المجد]

شكرا جزيلا أخي

 

[Mohamed.Belal]

مشكور