شركة انكور التطويرية
(نسخة قابلة للطباعة من الموضوع)
https://iinkor.com/t164
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

القاب الاعضاء بشكل جديد ومميز حصريا على انكور
Admin 21-01-2020 04:29 مساء
بسم الله الرحمن الرحيم

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

2551253683
ieo10
1314
ieo10
طريقة التركيب :
اولا حبيت انوه انه الكود يشتغل فقط على الاستايلات اللي تضع فيها الـ 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 
ويمكنك تغيير الايقونة بجانب اللقب من خلال روابط الصور الموجودة بالكود

ieo10

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

بالتوفيق للجميع
والسلام ختام
شركة انكور التطويرية

Powered by PBBoard ©Version 3.0.3