شرح عمل رتب نصية بشكل جديد على احلى منتدى

[Admin]

بسم الله الرحمن الرحيم
اليوم سنقوم بأنشاء او تصميم رتب نصيه لمنتديات احلى منتدى + وضع ايقونه او رمز بجانب الرتبه

بسم الله نبدأ

اولاً:

نقوم بانشاء رتبه جديدة من   لوحة الأدارة - الأعضاء & المجموعات - ادارة الرتب - أضف رتبة جديداًّ 

عنوان الرتبة: 

<strong class="rotba1">احلى ادارة</strong>

تعيين هذه الرتبة كرتبة خاصة: علي كيفك انت 

رابط صورة الرتبة: اتركها فارغه

ثم سجل 

ثانيا

نذهب الي ورقة الـ CSS و تنسيق الرتبه الذي قمنا بتسميتها بأسم rotba1 ونقوم بتنسيقها​

  
.rotba1 {
    background: #348bc2;
    border-radius: 10px;
    color: #FFF;
    display: block;
    margin: 0 auto;
    padding: 5px;
    text-align: center;
    width: 90%;
}

وهكذا نكون قد انتهينا باقي وضع صورة او رمز بجانب الرتبه

  
.rotba1:before {
    background: url(https://i.servimg.com/u/f11/16/73/90/65/115.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;
}

انتهى الشرح

المصدر : منتديات devs

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

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

 

[dzweb]

مبدع للامام واصل

 

[Mr.Google]

تكويد و رائع و مميز
شكرا لك و بارك الله فيك
لكم لي سؤال
هل يمكن تعويض رابط الصوره بأيقونه من FontAwesome

 

[Admin]

تكويد و رائع و مميز
شكرا لك و بارك الله فيك
لكم لي سؤال
هل يمكن تعويض رابط الصوره بأيقونه من FontAwesome

نعم ازل الـ background من الCss ومن ثم اضف class اخر للـ FontAwesome داخل كلاس الرتبة وواكتب اسم الرتبة بداخل كلاس الـ font-awesome

سأشرح الكود بموضوع منفصل مساءً او غدًا ان شاء الله

 

[Mr.Google]

نعم ازل الـ background من الCss ومن ثم اضف class اخر للـ FontAwesome داخل كلاس الرتبة وواكتب اسم الرتبة بداخل كلاس الـ font-awesome

سأشرح الكود بموضوع منفصل مساءً او غدًا ان شاء الله

شكرا لك
نعم قمت بحذف الـ background
و قمت بإضافه رمز كود الايقونه

content: "\f347";

و لكن الرمز ظهر مربع " غير معروف"
رغم وجود رابط FontAwesome في القالب و CSS و بقيه ايقونات FontAwesome تعمل بشكل جيد

 

[Admin]

و لكن الرمز ظهر مربع " غير معروف"
رغم وجود رابط FontAwesome في القالب و CSS و بقيه ايقونات FontAwesome تعمل بشكل جيد

يمكن مستخدم كود او كلاس لـ font-awesome نسخة غير الموجودة باستايلك
استخدم نفس النسخ والمسميات الموجودة عندك

 

[يشهب]

بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته​

جزاك الله خيراً على الشرح الواضح و المميز!
طريقة تنسيق الرتب النصية وإضافة الأيقونات خطوة بخطوة يساعد الكثير من مستخدمي منتديات "أحلى منتدى" على تخصيص منتدياتهم بشكل احترافي.

أحببت أنك وضعت الأكواد بشكل منظم و سهل الفهم، و اهتممت بالتفاصيل مثل التصميم باستخدام CSS لإضفاء لمسة جمالية على الرتبة. إضافة الأيقونة بجانب الرتبة أيضاً تضيف مظهراً جذاباً.

مبدع كالعادة.
تحياتي؛