• أعضاء وزوار معهد زين العربية، نود أن نعلمكم أن المعهد سيشهد في الفترة القادمة الكثير من التغيرات سواءا على المستوى الاداري او مستوى الاقسام، لذا نرجو منكم التعاون، وأي ملاحظات او استفسارات يرجى التواصل معنا عبر قسم الشكاوي و الإقتراحات و الطلبات ونشكركم على حسن تفهمكم وتعاونكم ،مع خالص الشكر والتقدير والاحترام من إدارة زين العربية.

[ حصريا ] طريقة التعديل على اي منطقة من مناطق اﻻستايل

shqawe

ربي أشرح لي صدري
27 يونيو 2019
3,164
23
2,071
113
K.S.A
بسم الله الرحمن الرحيم

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

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

اقدم لكم اليوم طريقة التعديل على اي منطقة من مناطق اﻻستايل والتي احيانا ً نجد بعض اﻻستفسارات عنها في قسم الاستفسارات والطلبات

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

ملاحظة: يتوجب ان يكون لديك المعرفة في لغة html ولغة css ولو معرفة بسيطة فهي كافية لتستطيع التعديل على اﻻكواد

لنبدأ على بركة الله:


لنفترض اوﻻ ً اننا نريد التعديل على منطقة بلوك اﻻقسام في الرئيسية مثل الموجود في الصورة التالية:


l-1.jpeg

ولنفرض اننا نريد التعديل على منطقة المواضيع والمشاركات بحيث تكون خلفيتها غير عن باقي البلوك كما هو متواجد هنا في المعهد

لذا اول ما سوف نقوم به هو استخدام المتصفح لتحدبد المنطقة المراد التعديل عليها وهنا سوف اتحدث عن ميزة المطورين وهي موجودة في جميع المتصفحات وﻻظهارها بامكانك الضغط على F12 في متصفح فايرفوكس وكروم وفي اوبرا ctrl+shift+C وهذه هي المتصفحات التي استخدمها واتوقع ان باقي المتصفحات تستخدم نفس اﻻزرار المهم بعد الضغط على هذه اﻻزرار سوف تخرج لنا قائمة في الجهه اليسرى بهذا الشكل الموجود بالصورة والمحدد باللون اﻻحمر


l-2.jpeg


اﻻن كما تلاحظون في الركن اﻻيسر العلوي للقائمة يوجد زر وهو مربع وبداخله سهم هذا المربع عند الضغط عليه يعطيك الصلاحية في ان تقوم بتحديد اي عنصر في الصفحة لذا لو ضغطنا عليه ومن ثم قمنا بتمريره فوق منطقة المواضيع والمشاركات سوف يظهر لنا كود هذه المنطقة كما هو موضح في الصورة التالية:

l-3.jpeg

اﻻن كما تلاحظون قمت بتحديد ثلاث مناطق في الصورة السابقة

  1. كود html الخاص بالمنطقة التي نريد تعديلها.
  2. المنطقة المراد تعديلها.
  3. كود css الخاص بالمنطقة التي نريد تعديلها.
اﻻن للتعديل على المنطقة بحيث اننا نريد تغير شكلها بمعنى لو اردنا ان نضع المشاركات قبل المواضيع او نجعل المواضيع والمشاركات بشكل عمودي بدلا ً من افقي فسوف نحتاج الى التعديل على كود html

في هذه الحالة سوف نقوم بالضغط بزر الفأرة اﻻيمن على المنطقة رقم 1 والمحددة في الصورة السابقة ونختار Edit As HTML مثل الصورة التالية:


l-4.jpeg


بعدها سوف يكون بامكانك التعديل على الكود في نفس المنطقة وكل ما عليك هو نسخ الكود المحدد بالون الازرق بحيث يكون ناتج تحديدك هو هذا الكود:

HTML:
<div class="node-stats">

اﻻن نتوجه الى لوحة التحكم ومن ثم الى قائمة المظهر او اﻻستايلات حسب ترجمة اللغة لديك ونختار البحث في القوالب لتظهر لنا هذه الصفحة

l-5.jpeg

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

اﻻولى الستايل : هنا اختر اﻻستايل الذي تود التعديل عليه.
الثانية نوقع القالب: تأكد ان الخيار هو عام.
الثالثة: ضع الكود الذي نسخناه سابقا ً في منطقة القالب يحتوي على كما هو موجود في الصورة.

اﻻن بعد اتباع الخطوات السابقة نقوم بالضغط على بحث وسوف تظهر لنا القوالب التي تحتوي على هذا العنصر كما في الصورة التالية:

l-6.jpeg

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

ملاحظة: لتسهيل عملية البحث اضغط على مربع القالب ثم من الكيبورد اضغط على 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 ومن ثم التعديل عليه حسب رغبتنا من حيث الالوان والخطوط والحدود ... الخ.

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

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

وتقبلوا احترامي وتقديري
اخوكم
شقاوي
 
طرح رائع جدا وواضح جدا جدا أخي الحبيب شقاوي
جزاك الله كل خير وبوركت مجهوداتك
الطريقة فعلا بسيطة ومن يحتاج عمل أي شيء يكفي كتابته في جوجل باللغة الإنجليزية لتطلع له مئات النتائج
والتجربة هي الفيصل بعد ذلك
 
طرح رائع جدا وواضح جدا جدا أخي الحبيب شقاوي
جزاك الله كل خير وبوركت مجهوداتك
الطريقة فعلا بسيطة ومن يحتاج عمل أي شيء يكفي كتابته في جوجل باللغة الإنجليزية لتطلع له مئات النتائج
والتجربة هي الفيصل بعد ذلك

اللهم امين اخوي احمد ولك بالمثل ان شاء الله

والحمد لله ان الشرح واضح وبالنسبة للبحث بالغة اﻻنجليزية فاملنا ان نثري المحتوى العربي بما يفتقر به وان شاء الله نحاول نواكب الاجانب بمحتواهم ان شاء الله
 
السلام عليكم
كيف يمكنني اضافة ملف ستايل الى <link rel="stylesheet" href=

وجدت واحدة في helper_js_global لكن انا ابحث عن الاخى sci.JPG
 

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

المواضيع
1,444
المشاركات
16,588
الأعضاء
1,021
آخر عضو مسجل
wallas
أعلى