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

[ تم الحل ] تغير لون المسميات الرئيسية في ستايل شقاوي الجديد

مساء الخير بو محمد سوالي كيف استطيع تغير لون المسميات الرئيسية بالاستايل الجديد؟

الحالة
مغلق و غير مفتوح للمزيد من الردود.

Binkaddas

عضو فعال
إنضم
8 أغسطس 2023
المشاركات
304
مستوى التفاعل
70
النقاط
28
مساء الخير بو محمد

سوالي كيف استطيع تغير لون المسميات الرئيسية بالاستايل الجديد؟

1735143562654.png
 
مساء النور والسرور هلا وغلا ب

بالنسبة لهالازرار تستطيع تغييرها الوانها عن طريق هالكود :


CSS:
.p-nav-list .p-navEl {
    color: hsl(0,0%,100%);
    text-decoration: none;
    background: hsla(0,0%,0%,.45);
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

طبعا هذي الاعدادات الرئيسي للكلاس عدل عليها حسب ذوقك يا ابومحمد
 
وين يابو محمد انا مبتداء عندك الله يرحم والديك

اذا ماتشرحلي بالضبط وين اروح و وين الصق الكود ما راح اوصل

انا نسخته الي extra.less بس ماتغير شي

ايضا هذا ( الاعدادات الرئيسي للكلاس ) وين مكانة؟
 
:ROFLMAO: :ROFLMAO: :ROFLMAO: :ROFLMAO:

انت الخير والبركة يا ابو محمد تامر امر طال عمرك

اول شيء الكود اللي حطيته لك فوق هو نفس الكود يعني لو حطيته اكيد ما بيتغير شيء

وهذا الكود كل سطر وامامه الشرح يا ابو محمد طبعا ًأ انا في سطرين في الكود حذفتها ﻻنها مالها اهمية

CSS:
.p-nav-list .p-navEl {
    color: hsl(0,0%,100%) !important; // لون النص
    background: hsla(0,0%,0%,.45) !important; // لون الخلفية
}


يعني كل اللي عليك تغير الالوان بس يا ابو محمد يعني

لون النص بدل hsl(0,0%,100%) ضيف اللون اللي تبيه

لون الخلفية بدل hsla(0,0%,0%,.45) ضيف اللون اللي تبيه

وبس كذا ان شاء الله يتغير اللون معك
 
جزاك الله خير بو محمد نعم تغير ولكن ايضا سوال وسامحني

بعد التعديل الالوان كلها تغيرات كما بالصورة
1735209165707.png

هل استطيع تغير الالوان لكل خانة لون كما بالصورة التاليه
1735209253957.png


لان كنت افكر اعمل كل خانة لون ولكن اذا محتاج برمجه انسي الموضوع مايحتاج اتعب نفسك
 
ايه عادي يا ابو محمد اذا حبيت تضيف لون لكل زر فما عليك اﻻ استخدام data-nav-id ﻻن لكل زر في النافبار له id ومثلا زر الرئيسية بيكون ال id تبعه

HTML:
data-nav-id="home"

ولتغيير الازرار استخدم الكود التالي:

CSS:
a[data-nav-id="home"] {
    color: #ff9ab7 !important;
}
a[data-nav-id="forums"] {
    color: #fdca47 !important;
}
a[data-nav-id="whatsNew"] {
    color: #60daff !important;
}
a[data-nav-id="xfrm"] {
    color: #5fff8b !important;
}
a[data-nav-id="members"] {
    color: #ff66dc !important;
}


واذا كان عندك قوائم زيادة فطريقة معرفة ال id تبعه بكل سهولة اضغط كلك يمين على الزر اللي تريد معرفة ال id تبعه واختر inspect وراح تفتح لك ادوات المطور وراح تلقى التحديد على الزر اللي عملت له inspect شوف الصورة اللي تحت انا عملت inspect لزر مالجديد شوف اﻻن المربع المحدد باللون اﻻخضر راح تلاحظ data-nav-id القيمة الخاصة به whatsnew بكذا انت عرفت ال id الخاص بالزر

1735211691598.png

اتمنى اني قدرت اوضح لك الطريقة واذا فيه شيء اشكل عليك تحت امرك يا ابو محمد
 
واضح جداً بو محمد وبارك الله فيك اجربه واعطيك خبر
 
التعديل الأخير بواسطة المشرف:
في هذا اليوم المبارك ، اسئل الله ان يسعدك ويحفظك ويرزقك رزقاً كثير وخير كثير

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

والعفو طال عمرك ما سوينا شيء واسمح لي باغلاق الموضوع بما انه تم الحل.

احترامي وتقديري
اخوك
شقاوي
 
الحالة
مغلق و غير مفتوح للمزيد من الردود.
عودة
أعلى