- إنضم
- 23 يوليو 2023
- المشاركات
- 765
- الحلول
- 5
- مستوى التفاعل
- 418
- النقاط
- 63
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على اشرف خلق الله نبينا محمد وعلى آله وصحبة أجمعين.
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما..
اقدم لكم اليوم طريقة استخدام اعدادات اﻻستايل في اكواد css حيث انك تستطيع استخدام اي تنسيق من تنسيقات اعدادات اﻻستايل في اكواد css الخاصة
ولكي تتضح الصورة لنفرض انك اردت اضافة ملاحظة للزوار اعلى الموقع ولكن اردت ان تستخدم تنسيق اﻻقسام بدلا من تنسيق الملاحظات فكل ما عليك هو انشاء كلاس css خاص بهذه الملاحظة
ولنفرض انك اسمتيه shqawe_notes
فكل ما عليك اﻻن هو وضع هذا الكلاس في قالب extra.less بهذه الطريقة.
لينتج عن هذين السطرين الذي اضفناهم للكلاس هذا الكود:
فلنلاحظ التالي:
اولا ً ﻻحظو عدد التنسيقات التي حصلنا عليها فقط من سطرين قمنا باضافتها للكلاس.
ثانيا ً ان التنسيقات التي قمنا باضافتها تكون متناسقة تماما مع اﻻستايل الخاص بك اضافة الى اي استايل تريد فبمجرد نسخ الكود السابق ووضعه في قالب extra.less ﻻي استايل فسوف تأخذ تنسيق اﻻستايل الذي تمت اضافته اليه.
اﻻن متأكد تماما ً ان الجميع سوق يسأل من اين نأتي بهذه المتغيرات واقصد بالمتغيرات هنا هذين المتغيرين في الكلاس السابق:
فهناك طريقتين وكلا الطريقتين تتم عن طريق لوحة التحكم في اعدادات اﻻستايل:
الطريقة اﻻولى:
نختار اي اعداد من اعدادات اﻻستايل والذي نريد تطبيقه على اي كلاس نريد وليكن مثل اعداد مناطق المحتوى بعد الدخول على صفحة تنسيقات مناطق المحتوى نقوم بالضغط بزر الماوس الايمن على اي اعداد نريد ونختار من قائمة الماوس اﻻيمن Inspect كما بالصورة التالية:
وتلاحظون في الصورة السابقة انني ضغطت على حجم الخط اﻻن سوف تفتح لك ادوات المطور حسب المتصفح الذي تستخدمه وسوف يكون التحديد على الاعداد الذي اخترته وفي حالتنا اﻻعداد هو حجم الخط
اﻻن ﻻحظو في الصورة السابقة وباﻻخص المحدد باللون اﻻخضر وهو هذا الكود
هذا هو اسم الحقل وهو مقسم الى ثلاث اقسام
رقم 2 يرمز الى مجموعة اﻻعداد كامل اي حجم الخط ولون الخط وعرض الخط ولون الخلفية وصورة الخلفية والحدود والتباعد ... الخ.
اما الرقم 3 فيرمز فقط الى حجم الخط
اﻻن اذا اردنا استخدام مجموعة اﻻعداد كاملة فسوف تكون الطريقة كالتالي:
نضع نقطة ثم xf ثم - ثم مجموعة اﻻعداد ثم القوسين () متبوعة اخيرا ً بالفاصلة المنقوطة ليكون الناتيج في اﻻخر بهذا الشكل:
اما اذا اردت استخدام اعداد واحد كما في مثالنا وهو حجم الخط فسوف تكون الطريقة كالتالي:
نقوم بوضع علامة @ ثم xf ثم - ثم اسم اﻻعداد ثم الفاصلة المنقوطة
مع ملاحظة اذا كان اسم الاعداد يحتوي اكثر من كلمة كما هو في مثالنا font-size فلابد من كتابة اﻻعداد بحالة الجمل او ما يسمى camel case ليكون اسم اﻻعداد بهذه الطريقة
fontSize لحجم الخط
textColor للون الخط
fontWeight لعرض الخط
ليكون الناتج في اﻻخر بهذا الشكل:
اما الطريقة الثانية :
وهي اﻻسهل وهذه تكون بتفعيل وضع التطوير عن طريق ملف config.php باضافة هذا الكود في الملف
وبعد اضافة هذا الكود سوف تظهر جميع المتغيرات الخاصة بالمجموعاات كالتي ذكرتها سابقا كما هو موجود في الصورة التالية:
وبهذه الطريقة تستطيع استخدام اعدادت اﻻستايل مع اي كود خاص بك باﻻضافة الى انها سوف تكون متوافقة تماما مع استايلك
في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فمن نفسي والشيطان وجل من لايسهو
واتمنى ان اكون قد استطعت الى توضيح الفكرة للجميع
تقبلوا احترامي وتقديري
اخوكم
شقاوي
الحمد لله والصلاة والسلام على اشرف خلق الله نبينا محمد وعلى آله وصحبة أجمعين.
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما..
اقدم لكم اليوم طريقة استخدام اعدادات اﻻستايل في اكواد css حيث انك تستطيع استخدام اي تنسيق من تنسيقات اعدادات اﻻستايل في اكواد css الخاصة
ولكي تتضح الصورة لنفرض انك اردت اضافة ملاحظة للزوار اعلى الموقع ولكن اردت ان تستخدم تنسيق اﻻقسام بدلا من تنسيق الملاحظات فكل ما عليك هو انشاء كلاس css خاص بهذه الملاحظة
ولنفرض انك اسمتيه shqawe_notes
فكل ما عليك اﻻن هو وضع هذا الكلاس في قالب extra.less بهذه الطريقة.
CSS:
.shqawe_notes{
.xf-contentBase();
.xf-blockBorder();
}لينتج عن هذين السطرين الذي اضفناهم للكلاس هذا الكود:
CSS:
.shqawe_notes {
color: hsla(var(--xf-textColor));
background: hsla(var(--xf-contentBg));
border-width: 1px;
border-style: solid;
border-top-color: hsla(var(--xf-borderColorLight));
border-left-color: hsla(var(--xf-borderColor));
border-bottom-color: hsla(var(--xf-borderColorHeavy));
border-right-color: hsla(var(--xf-borderColor));
}فلنلاحظ التالي:
اولا ً ﻻحظو عدد التنسيقات التي حصلنا عليها فقط من سطرين قمنا باضافتها للكلاس.
ثانيا ً ان التنسيقات التي قمنا باضافتها تكون متناسقة تماما مع اﻻستايل الخاص بك اضافة الى اي استايل تريد فبمجرد نسخ الكود السابق ووضعه في قالب extra.less ﻻي استايل فسوف تأخذ تنسيق اﻻستايل الذي تمت اضافته اليه.
اﻻن متأكد تماما ً ان الجميع سوق يسأل من اين نأتي بهذه المتغيرات واقصد بالمتغيرات هنا هذين المتغيرين في الكلاس السابق:
CSS:
.xf-contentBase();
.xf-blockBorder();فهناك طريقتين وكلا الطريقتين تتم عن طريق لوحة التحكم في اعدادات اﻻستايل:
الطريقة اﻻولى:
نختار اي اعداد من اعدادات اﻻستايل والذي نريد تطبيقه على اي كلاس نريد وليكن مثل اعداد مناطق المحتوى بعد الدخول على صفحة تنسيقات مناطق المحتوى نقوم بالضغط بزر الماوس الايمن على اي اعداد نريد ونختار من قائمة الماوس اﻻيمن Inspect كما بالصورة التالية:
وتلاحظون في الصورة السابقة انني ضغطت على حجم الخط اﻻن سوف تفتح لك ادوات المطور حسب المتصفح الذي تستخدمه وسوف يكون التحديد على الاعداد الذي اخترته وفي حالتنا اﻻعداد هو حجم الخط
اﻻن ﻻحظو في الصورة السابقة وباﻻخص المحدد باللون اﻻخضر وهو هذا الكود
HTML:
name="properties[contentBase][font-size]"هذا هو اسم الحقل وهو مقسم الى ثلاث اقسام
- properties
- contentBase
- font-size
رقم 2 يرمز الى مجموعة اﻻعداد كامل اي حجم الخط ولون الخط وعرض الخط ولون الخلفية وصورة الخلفية والحدود والتباعد ... الخ.
اما الرقم 3 فيرمز فقط الى حجم الخط
اﻻن اذا اردنا استخدام مجموعة اﻻعداد كاملة فسوف تكون الطريقة كالتالي:
نضع نقطة ثم xf ثم - ثم مجموعة اﻻعداد ثم القوسين () متبوعة اخيرا ً بالفاصلة المنقوطة ليكون الناتيج في اﻻخر بهذا الشكل:
كود:
.xf-contentBase();اما اذا اردت استخدام اعداد واحد كما في مثالنا وهو حجم الخط فسوف تكون الطريقة كالتالي:
نقوم بوضع علامة @ ثم xf ثم - ثم اسم اﻻعداد ثم الفاصلة المنقوطة
مع ملاحظة اذا كان اسم الاعداد يحتوي اكثر من كلمة كما هو في مثالنا font-size فلابد من كتابة اﻻعداد بحالة الجمل او ما يسمى camel case ليكون اسم اﻻعداد بهذه الطريقة
fontSize لحجم الخط
textColor للون الخط
fontWeight لعرض الخط
ليكون الناتج في اﻻخر بهذا الشكل:
كود:
@xf-fontSizeاما الطريقة الثانية :
وهي اﻻسهل وهذه تكون بتفعيل وضع التطوير عن طريق ملف config.php باضافة هذا الكود في الملف
PHP:
$config['development']['enabled'] = true;وبعد اضافة هذا الكود سوف تظهر جميع المتغيرات الخاصة بالمجموعاات كالتي ذكرتها سابقا كما هو موجود في الصورة التالية:
وبهذه الطريقة تستطيع استخدام اعدادت اﻻستايل مع اي كود خاص بك باﻻضافة الى انها سوف تكون متوافقة تماما مع استايلك
في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فمن نفسي والشيطان وجل من لايسهو
واتمنى ان اكون قد استطعت الى توضيح الفكرة للجميع
تقبلوا احترامي وتقديري
اخوكم
شقاوي
