[ حصريا ] - طريقة استخدام متغيرات اعدادات اﻻستايل في قوالب css - معهد زين العربية
  • قريبا افتتاح استضافة XenArabia العربية المشتركة و الداعمة لسكربت XenForo
تجارتنا منصة تجارية تساهم في تطور التجارة العالمية والاقتصاد
موقع حلبية الموقع الاول في العالم العربي لللمعلومات الصحيحة
موقع كيف افضل موقع للرد على جميع اسئلتك موقع كيف بوابتك للمستقبل

[ حصريا ] طريقة استخدام متغيرات اعدادات اﻻستايل في قوالب css

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,631
مستوى التفاعل
2,330
النقاط
113
الإقامة
K.S.A
  • التقييمات: 1
  • #1
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة وأتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،


اقدم لكم اليوم اخوتي اﻻعزاء طريقة استخدام متغيرات اعداد اﻻستايل داخل قوالب CSS والتي للاسف ارى ان الكثير يغفل عنها وﻻ اعلم هل هو بقصد ام من دون قصد لذا احببت ان اشارككم هذه الطريقة لمن اراد ان يستخدمها في المستقبل عند تصميم اي استايل او حتى عند التعديل على اﻻستايلات

بداية ما اقصده بمتغيرات اعداد اﻻستايل هي اسامي الحقول البرمجية التي تظهر دائما ً تحت اسماء الحقول مثل ماهو محدد باللون اﻻحمر في الصورة التالية:


1.jpg


ملاحظة: لتستطيع مشاهدة اسامي الحقول البرمجية تحتاج الى تفعيل الوضع البرمجي.


اﻻن لنأخذ مثال:

دعونا نفترض اننا نريد استخدام خيار اللون 1 في احد قوالبنا ولنفرض ايضا اننا تريد ان يكون هذا اللون هو خلفية ﻻي منطقة من مناطق اﻻستايل

فكل ما علينا هو نسخ اسم الحقل البرمجي وفي مثالنا هذا هو paletteColor1 ووضعه بعد متغير الزين فورو الخاص باﻻستايلات وهو @xf متبوعا ً بعلامة الشرطة - بالطريقة التالية في احد خيارات css:


CSS:
.somediv{
    background: @xf-paletteColor1;
}

اﻻن لو ذهبنا الى المنطقة المراد تعديلها عليها سوف نجد ان خلفية هذه المنطقة تم تغييرها الى نفس الون 1 الذي قمنا بوضع قيمته كخلفية لهذه المنطقة وقس على ذلك باقي اعدادات اﻻستايل

طبعاً متأكد انه قد يتبادر في ذهن البعض انه ما الحاجه ﻻستخدام الحقول البرمجية ما دام باستطاعتي استخدام اكواد اﻻلوان بشكل مباشر سواء hex او rgb ... الخ

واﻻجابة لدي هي لعدة اسباب منها :

اﻻول انه عند استخدام الحقول البرمجية فانه باستطاعتك اﻻستفادة من عجلة اﻻلوان واختيار اللون حسب حاجتك واقصد بعجلة اﻻلوان كما بالصورة التالية:


2.jpg

والسبب الثاني: هو انه من السهل التعديل على اللون من خلال اعدادات اﻻستايل بدلاً من البحث عن اللون المراد تغييره داخل الكثير من اﻻسطر خصوصاً لو كان قالب extra.less غاص بالكثير من الاكواد او لو كان الشخص الذي يتعامل مع الموقع ليس لديه الخبرة الكافية في لغة css والتي قد ينجم عن نسيان جزء من الكود في القوالب الى ظهور اخطاء في اﻻستايل

اضافة الى ذلك فبإمكانك انشاء خيارات جديدة حسب حاجتك او لو كان اﻻستايل له خيارات خاصة تظهر في اﻻستايل وتريد ان يكون للمستخدم الحرية في اختيار الالوان فبهذا لن تلزم المستخدم على اللون الذي تم تحديده في قالب extra.less بل سوف تترك له الحرية ﻻختيار اللون الذي يريد حسب ذوقه

وسوف افرد درس منفرد بخصوص هذا الموضوع في اﻻيام المقبلة ان شاء الله ان امد الله لنا ولكم بالعمر والصحة


في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فجل من ﻻيخطأ

وتقبلوا احترامي وتقديري
اخوكم
شقاوي
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
2,476
مستوى التفاعل
1,907
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
درس رائع جدا
بارك الله فيك أخي شقاوي
تحياتي لك يا غالي
 

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,206
مستوى التفاعل
3,266
النقاط
113
العمر
38
الإقامة
المغرب
الموقع الالكتروني
ما شاء الله عليك أخي تركي درس جميل و مفيد لمصممي الستايلات و بالفعل الطريقة جميلة خصوصا عندما يكون للستايل المصمم خيارات مما يسهل على المستخدم تغير الالوان بحرية تامة ودون اللخبطة في أكواد الالوان.
تسلم و احلى تقييم🥳
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,631
مستوى التفاعل
2,330
النقاط
113
الإقامة
K.S.A
درس رائع جدا
بارك الله فيك أخي شقاوي
تحياتي لك يا غالي

الله يبارك بعمرك اخوي احمد

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

تسلم اخوي أبو غيث وفعلا الطريقة هذي مرتبة وسهلة خصوصا ً لمن ليس لديه خبرة في css
 

Wolf Knight

عضو معروف
[ عُملاء زين العَربية ]
إنضم
28 يناير 2019
المشاركات
470
مستوى التفاعل
278
النقاط
63
شرح مميز كالعادة ومفيد اخي شقاوي
شكرا جزيلا لك
 

Fallag

:: الأعضاء ::
[ عُملاء زين العَربية ]
إنضم
20 مارس 2019
المشاركات
250
مستوى التفاعل
74
النقاط
28
الموقع الالكتروني
الله يبارك فيك أخي شاقوي
درس مميز
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,631
مستوى التفاعل
2,330
النقاط
113
الإقامة
K.S.A

Alrajabane

【★★★★】
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
770
مستوى التفاعل
600
النقاط
93
الإقامة
السعودية
الموقع الالكتروني
شرح وافي يالغالي
لاهنت (y)
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
2,631
مستوى التفاعل
2,330
النقاط
113
الإقامة
K.S.A
عشت يا ابو صالح والله ﻻ يهينك نورت الموضوع
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

لا يوجد أعضاء متصلون الآن.

إحصائيات المنتدى

المواضيع
1,675
المشاركات
18,008
الأعضاء
654
آخر عضو مسجل
فراس حاتم
أعلى