طريقة انشاء بادئات جديده بعدد لانهائى

[ِِAraby5050]

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

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

الاخوه الكرام اعضاء المنتدى تحيه طيبه وبعد

◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘
اقدم لكم

طريقة انشاء بادئات جديده بعدد لانهائى

الطريقه كالتالى
↓↓↓↓

يتم وضع الكود التالى بالقالب extra.less

.l-abusomaia{
    display: inline-block;
    padding: 1px .35em;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusMedium;
    font-size: 80%;
    line-height: ((@xf-lineHeightDefault) * .9);
    text-decoration: none;
    font-size: 100%;
    background:#ff7675;
    &:hover{background:#fd79a8;
}
}

ولكى تطبق البادئه تضع الاسم التالى

(l-abusomaia)

فى مربع "اخرى باستخدام نمط css مخصص"

عند انشاء البادئات

كما بالشكل


ليكون الشكل النهائى كما بالصور التاليه


وهذا بعد المرور بالماوس على البادئه hover


◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘◘

واخيرا نتمنى لكم الافاده ... ونسألكم الدعاء​

 

[ِِAraby5050]

شرح كيفية تلوين خلفية المواضيع كما هو ظاهر بالصور اقدمه قريبا ان شاء الله ... ان لم يسبقنى اليه اخونا محمد @XenArabia .

 

[أبو غَيْث]

بارك الله فيك أخي على ما تقدمه من شروحات قيمة
أحسنت تابع ابداعاتك
بالعكس اخي كل من سبق لتقديم ما يفيد الاخرين يبدأ به و لا يوجد اي فرق بيننا فكلنا واحد نسعى لتقديم المساعدة ..

 

[ِِAraby5050]

بارك الله فيك أخي على ما تقدمه من شروحات قيمة
أحسنت تابع ابداعاتك
بالعكس اخي كل من سبق لتقديم ما يفيد الاخرين يبدأ به و لا يوجد اي فرق بيننا فكلنا واحد نسعى لتقديم المساعدة ..

بارك الله فيك اخى محمد

وان شاء الله نثرى هذا الصرح المميز بكل جديد ومفيد

 

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

ماشاء الله تبارك الله

شرح جدا واضح ومفهوم

جزاك الله خير اخي @ِِAraby5050

دمت بود

 

[MesterPerfect]

جزاكم الله خيرا وبورك فيكم
فعلا شرح جميل ورائع

 

[ِِAraby5050]

ماشاء الله تبارك الله

شرح جدا واضح ومفهوم

جزاك الله خير اخي @ِِAraby5050

دمت بود

بارك الله فيك اخى ابوعبدالله

اسعدنى مرورك اخى

 

[ِِAraby5050]

جزاكم الله خيرا وبورك فيكم
فعلا شرح جميل ورائع

وفيكم بارك الله اخى

اسعدنى مرورك

 

[barshawi]

.l-abusomaia{ display: inline-block; padding: 1px .35em; border: 1px solid transparent; border-radius: @xf-borderRadiusMedium; font-size: 80%; line-height: ((@xf-lineHeightDefault) * .9); text-decoration: none; font-size: 100%; background:#ff7675; &:hover{background:#fd79a8; } }

شكرا لك على هذا الشرح المفيد والوافي.
سؤالي هو:
هل يمكن وضع عدة ألوان للخلفية في الكود؟ وكيف يتم ذلك؟ مع أجمل تحية.

 

[أبو غَيْث]

شكرا لك على هذا الشرح المفيد والوافي.
سؤالي هو:
هل يمكن وضع عدة ألوان للخلفية في الكود؟ وكيف يتم ذلك؟ مع أجمل تحية.

نعم اخي يمكنك ذلك فقط تحتاج لتكرار الكود مع تغير اسم الكلاس و تغير لون الخلفية من خلال كود css

.l-abusomaia{ /*** تغير اسم الكلاس الخاص بالبادئة***/
    display: inline-block;
    padding: 1px .35em;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusMedium;
    font-size: 80%;
    line-height: ((@xf-lineHeightDefault) * .9);
    text-decoration: none;
    font-size: 100%;
    background:#ff7675; /*** لتغير لون الخلفية ***/
    &:hover{background:#fd79a8; /*** لتغير لون خلفية عند تمرير الماوس ***/
}
}

 

[barshawi]

نعم اخي يمكنك ذلك فقط تحتاج لتكرار الكود مع تغير اسم الكلاس و تغير لون الخلفية من خلال كود css

شكرا لك أخي، ووفقك الله دوما، مع تحيتي القلبية.

 

[barshawi]

سؤال آخر بنفس الموضوع وهو:
كيف نجعل خط البادئات أبيضا؟
تحيتي لكم.

 

[أبو غَيْث]

قم باضافة هذا الكود و غير رمز اللون الى الذي تريده

color: #008CBA;

 

[barshawi]

قم باضافة هذا الكود و غير رمز اللون الى الذي تريده

تسلم أخي ومشكور، وقد أصبح الخط أبيضا، ولكن التغيير لا يحدث عند تمرير الماوس على البادئة، علما بأنني وضعت الكود في البداية، كالتالي:

.a-barshawi{
    color: #F7F7F7;
    display: inline-block;
    padding: 1px .35em;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusMedium;
    font-size: 80%;
    line-height: ((@xf-lineHeightDefault) * .9);
    text-decoration: none;
    font-size: 100%;
    background:#FA7D09;
    &:hover{background:#FF4301;
}
}

 

[barshawi]

تسلم أخي ومشكور، وقد أصبح الخط أبيضا، ولكن التغيير لا يحدث عند تمرير الماوس على البادئة، علما بأنني وضعت الكود في البداية، كالتالي:

تم الحل، مع تحيتي.