تصميم رتب الاعضاء بشكل مميز

[Alrajabane]

​

طريقة التركيب :
ضع في قالب extra.less

.xengentrBanner {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: .5em 1em;
    }
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

بعد ذلك فتح مجموعة المستخدمين التي تريد إضافتها من إعدادات مجموعات المستخدمين.

​

ضع مايلي في خانة نمط CSS مخصص احد الاكواد :

​

For Admin:
xengentrBanner admin
For Moderator:
xengentrBanner moder
For Normal Members
xengentrBanner user

الحفظ والخروج ..،،

المصدر​

 

[MesterPerfect]

جميل جدا جزاك الله خيرا

 

[Alrajabane]

والله يجزاك بالمثل .
شكرا لتواجدك ..

 

[أبو غَيْث]

بارك الله فيك أخي .. كود جميل يضفي جمالية على رتب الأعضاء

 

[أبو عبدالله]

شرح ممتاز شكرا لك

جاري التجربة

 

[ِِAraby5050]

جزاك الله خيرا

 

[مازن العماني]

تمت التجربه اشكرك على الشرح

واجهتني مشكله وقمت بحذف الكود وعاد الامر طبيعي

المشكلة عند عرض الموضوع يتحرك وكانه يرقص

 

[Abu Ayesh]

يعطيك العافية ياغالي

مبدع

لاكن عند مشكلة هي كيف بدي اضيف التصميم هاد ، لطاقم الادارة ؟

بانتظارك

تحياتي

 

[AbuMaryam]

شكرآ للشرح اخي الكريم

 

[Tawahihost]

جميل جدا جاري التجربه

 

[muedx.com]

جزأك الله خيراً ياأخي الكريم