shqawe
ربي أشرح لي صدري
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم طريقة التعديل على اي منطقة من مناطق اﻻستايل والتي احيانا ً نجد بعض اﻻستفسارات عنها في قسم الاستفسارات والطلبات
لذا احببت ان اوضح لكم الطريقة التي استخدمها عن محاولة التعديل على مكان في اﻻستايل
ملاحظة: يتوجب ان يكون لديك المعرفة في لغة html ولغة css ولو معرفة بسيطة فهي كافية لتستطيع التعديل على اﻻكواد
لنبدأ على بركة الله:
لنفترض اوﻻ ً اننا نريد التعديل على منطقة بلوك اﻻقسام في الرئيسية مثل الموجود في الصورة التالية:
ولنفرض اننا نريد التعديل على منطقة المواضيع والمشاركات بحيث تكون خلفيتها غير عن باقي البلوك كما هو متواجد هنا في المعهد
لذا اول ما سوف نقوم به هو استخدام المتصفح لتحدبد المنطقة المراد التعديل عليها وهنا سوف اتحدث عن ميزة المطورين وهي موجودة في جميع المتصفحات وﻻظهارها بامكانك الضغط على F12 في متصفح فايرفوكس وكروم وفي اوبرا ctrl+shift+C وهذه هي المتصفحات التي استخدمها واتوقع ان باقي المتصفحات تستخدم نفس اﻻزرار المهم بعد الضغط على هذه اﻻزرار سوف تخرج لنا قائمة في الجهه اليسرى بهذا الشكل الموجود بالصورة والمحدد باللون اﻻحمر
اﻻن كما تلاحظون في الركن اﻻيسر العلوي للقائمة يوجد زر وهو مربع وبداخله سهم هذا المربع عند الضغط عليه يعطيك الصلاحية في ان تقوم بتحديد اي عنصر في الصفحة لذا لو ضغطنا عليه ومن ثم قمنا بتمريره فوق منطقة المواضيع والمشاركات سوف يظهر لنا كود هذه المنطقة كما هو موضح في الصورة التالية:
اﻻن كما تلاحظون قمت بتحديد ثلاث مناطق في الصورة السابقة
في هذه الحالة سوف نقوم بالضغط بزر الفأرة اﻻيمن على المنطقة رقم 1 والمحددة في الصورة السابقة ونختار Edit As HTML مثل الصورة التالية:
بعدها سوف يكون بامكانك التعديل على الكود في نفس المنطقة وكل ما عليك هو نسخ الكود المحدد بالون الازرق بحيث يكون ناتج تحديدك هو هذا الكود:
اﻻن نتوجه الى لوحة التحكم ومن ثم الى قائمة المظهر او اﻻستايلات حسب ترجمة اللغة لديك ونختار البحث في القوالب لتظهر لنا هذه الصفحة
واتوقع ان الخيارات تشرح نفسها ولكن احب التأكيد على كم نقطة
اﻻولى الستايل : هنا اختر اﻻستايل الذي تود التعديل عليه.
الثانية نوقع القالب: تأكد ان الخيار هو عام.
الثالثة: ضع الكود الذي نسخناه سابقا ً في منطقة القالب يحتوي على كما هو موجود في الصورة.
اﻻن بعد اتباع الخطوات السابقة نقوم بالضغط على بحث وسوف تظهر لنا القوالب التي تحتوي على هذا العنصر كما في الصورة التالية:
وعند فتح اي قالب سوف تلاحطون الكود الذي نسخناه موجود في هذا القالب بالطريقة التالية:
ملاحظة: لتسهيل عملية البحث اضغط على مربع القالب ثم من الكيبورد اضغط على ctrl+f ثم ضغ الكود التي تريد البحث عنه ويفضل اختصار الكود بمعنى ضع كلاس او اي دي العنصر الذي تود البحث عنه.
واﻻن تستطيع التعديل على الكود فيمكنك نقل المشاركات فوق المواضيع او جعلهم عموديا ً حسب رغبتك وحسب تمكنك كما ذكرت سابقا ً في لغة html
اما لو اردت فقط التعديل على لون المنطقة هذه فيمكنك اخذ الكلاس الخاص بالمنطقة والذي كما ترونه موجود في كودنا السابق وهو
وبهذه الطريقة اخواني يمكننا التعديل على اي منطقة من مناطق اﻻستايل حسب رغبتنا وبكل سهولة واتمنى ان اكون وفقت في الشرح وان كان هناك اي معلومة صعب فهمها او لم اشرحها بالشكل المطلوب فانا على اتم اﻻستعداد للتوضيح اكثر
في النهاية كما اقول دائما ً ان اصبت فهذا من فضل الله علي وان اخطأت فجل من ﻻيخطأ
وتقبلوا احترامي وتقديري
اخوكم
شقاوي
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم طريقة التعديل على اي منطقة من مناطق اﻻستايل والتي احيانا ً نجد بعض اﻻستفسارات عنها في قسم الاستفسارات والطلبات
لذا احببت ان اوضح لكم الطريقة التي استخدمها عن محاولة التعديل على مكان في اﻻستايل
ملاحظة: يتوجب ان يكون لديك المعرفة في لغة html ولغة css ولو معرفة بسيطة فهي كافية لتستطيع التعديل على اﻻكواد
لنبدأ على بركة الله:
لنفترض اوﻻ ً اننا نريد التعديل على منطقة بلوك اﻻقسام في الرئيسية مثل الموجود في الصورة التالية:
ولنفرض اننا نريد التعديل على منطقة المواضيع والمشاركات بحيث تكون خلفيتها غير عن باقي البلوك كما هو متواجد هنا في المعهد
لذا اول ما سوف نقوم به هو استخدام المتصفح لتحدبد المنطقة المراد التعديل عليها وهنا سوف اتحدث عن ميزة المطورين وهي موجودة في جميع المتصفحات وﻻظهارها بامكانك الضغط على F12 في متصفح فايرفوكس وكروم وفي اوبرا ctrl+shift+C وهذه هي المتصفحات التي استخدمها واتوقع ان باقي المتصفحات تستخدم نفس اﻻزرار المهم بعد الضغط على هذه اﻻزرار سوف تخرج لنا قائمة في الجهه اليسرى بهذا الشكل الموجود بالصورة والمحدد باللون اﻻحمر
اﻻن كما تلاحظون في الركن اﻻيسر العلوي للقائمة يوجد زر وهو مربع وبداخله سهم هذا المربع عند الضغط عليه يعطيك الصلاحية في ان تقوم بتحديد اي عنصر في الصفحة لذا لو ضغطنا عليه ومن ثم قمنا بتمريره فوق منطقة المواضيع والمشاركات سوف يظهر لنا كود هذه المنطقة كما هو موضح في الصورة التالية:
اﻻن كما تلاحظون قمت بتحديد ثلاث مناطق في الصورة السابقة
- كود html الخاص بالمنطقة التي نريد تعديلها.
- المنطقة المراد تعديلها.
- كود css الخاص بالمنطقة التي نريد تعديلها.
في هذه الحالة سوف نقوم بالضغط بزر الفأرة اﻻيمن على المنطقة رقم 1 والمحددة في الصورة السابقة ونختار Edit As HTML مثل الصورة التالية:
بعدها سوف يكون بامكانك التعديل على الكود في نفس المنطقة وكل ما عليك هو نسخ الكود المحدد بالون الازرق بحيث يكون ناتج تحديدك هو هذا الكود:
HTML:
<div class="node-stats">
اﻻن نتوجه الى لوحة التحكم ومن ثم الى قائمة المظهر او اﻻستايلات حسب ترجمة اللغة لديك ونختار البحث في القوالب لتظهر لنا هذه الصفحة
واتوقع ان الخيارات تشرح نفسها ولكن احب التأكيد على كم نقطة
اﻻولى الستايل : هنا اختر اﻻستايل الذي تود التعديل عليه.
الثانية نوقع القالب: تأكد ان الخيار هو عام.
الثالثة: ضع الكود الذي نسخناه سابقا ً في منطقة القالب يحتوي على كما هو موجود في الصورة.
اﻻن بعد اتباع الخطوات السابقة نقوم بالضغط على بحث وسوف تظهر لنا القوالب التي تحتوي على هذا العنصر كما في الصورة التالية:
وعند فتح اي قالب سوف تلاحطون الكود الذي نسخناه موجود في هذا القالب بالطريقة التالية:
ملاحظة: لتسهيل عملية البحث اضغط على مربع القالب ثم من الكيبورد اضغط على ctrl+f ثم ضغ الكود التي تريد البحث عنه ويفضل اختصار الكود بمعنى ضع كلاس او اي دي العنصر الذي تود البحث عنه.
HTML:
<div class="node-stats">
<dl class="pairs pairs--rows">
<dt>{{ phrase('threads') }}</dt>
<dd>{$extras.discussion_count|number_short(1)}</dd>
</dl>
<dl class="pairs pairs--rows">
<dt>{{ phrase('messages') }}</dt>
<dd>{$extras.message_count|number_short(1)}</dd>
</dl>
</div>
واﻻن تستطيع التعديل على الكود فيمكنك نقل المشاركات فوق المواضيع او جعلهم عموديا ً حسب رغبتك وحسب تمكنك كما ذكرت سابقا ً في لغة html
اما لو اردت فقط التعديل على لون المنطقة هذه فيمكنك اخذ الكلاس الخاص بالمنطقة والذي كما ترونه موجود في كودنا السابق وهو
node-stats
فكل ما علينا هو نسخ هذا الكلاس ووضعه في قالب extra.less
ومن ثم التعديل عليه حسب رغبتنا من حيث الالوان والخطوط والحدود ... الخ.وبهذه الطريقة اخواني يمكننا التعديل على اي منطقة من مناطق اﻻستايل حسب رغبتنا وبكل سهولة واتمنى ان اكون وفقت في الشرح وان كان هناك اي معلومة صعب فهمها او لم اشرحها بالشكل المطلوب فانا على اتم اﻻستعداد للتوضيح اكثر
في النهاية كما اقول دائما ً ان اصبت فهذا من فضل الله علي وان اخطأت فجل من ﻻيخطأ
وتقبلوا احترامي وتقديري
اخوكم
شقاوي