وضع مسطرة فى الاطار الجانبى

هذا الموضوع سوف يساعدك فى تنظيم الاطر الجانبية للمدونة وتنسيق الشكل العام

سيتم تعاملنا اليوم مع كود (وسم) جديد اسمه overflow

الوسم ده له اكثر من قيمة او (تحديد) بمعنى اخر

امثلة
لما يكون الكود محدد بتلك القيمة

overflow:visible

هايخلى اللينكات فى الاطار الجانبى تبان بالمنظر ده




وطبعا ملاحظين ان شكله مش اد كده والسطور داخله ف بعضيها


ــــــــــــــــــــــــــــــــــ

واما يكون محدد بالقيمة دى

overflow:hidden

هايدينا المنظر ده





ولاحظ ان مفيش مسطره مهما كان طول القطعة هايظهرها بطولها الطبيعى


ــــــــــــــــــــــــــــــــــ


واما يكون محدد كالتالى

overflow:scroll

هايدينا المنظر ده




شايف الاطار اللى عاليمين ؟ : فيه مسطرة طوليه لان القطعة طولها اكبر من المساحة المحدد لكل قطعة فى الاطار الجانبى
وفيه كمان مسطرة افقية لكن ( مسطرة غير مفعلة ) بس لازم تظهر حتى لو كان عرض القطعة اقل من المحدد ليها
اما الاطار اللى عالشمال : فيه مسطرتين لكنهما غير مفعلتين وده لان طول وعرض القطعة اقل من المحدد
باختصار : لاااااااازم يكون فيه مسطرة سواء مفعلة او غير مفعلة
ــــــــــــــــــــــــــــــــــ


ده بقا اهم مثال
overflow:auto

هايدينا المنظر ده




لاحظ ان ظهور المسطرة سيكون اوتوماتيكيا بمعنى ان لو حجم القطعة لم يتجاوز الحجم المحدد ليها ( وده محدد فى كود القالب ) لن تظهر مسطرة مفعلة كانت او غير مفعلة كما بالقطعة الاعلى فى الصورة , وده الفرق بين الـ (اوتو ) وبين الـ (سكرول) ... تمام ؟

ــــــــــــــــــــــــــــــــــ
( ملحوظة مهمة جدااااااا : الصور اللى فوق دى مسرو ... قصدى مقتبسه من موقع اجنبى )
ــــــــــــــــــــــــــــــــــ

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

فى صندوق الاكواد وده المسار بتاعه كالمعتاد

dashboard > layout > template > editHTML
فى النصف الاعلى من الصندوق ( او بمعنى اصح فى منطقة جسم الصندوق لمن له خبرة بلغة اتش تى ام ال ) هاتلاقى قطعة كود بالشكل ده

/* Sidebar Content */
#newsidebar .widget{
height:250px;
width:200px;
overflow:auto;
}

ملاحظات

• newsidebar .widget اسم لتعريفك بداية الاكواد الخاصة بالاطار الجانبى , ممكن يكون متغير انما لازم يكون فيه كلمة sidebar
• width:200px; ده العرض المحدد لكل قطعة ويمكنك تغييره
  height:250px; ده الطول المحدد لكل قطعة ويمكنك ايضا تغييره
  overflow:auto; ده الكود اللى هايعملنا المسطرة فى حالة اذا تعدت القطعة الطول او العرض المحدد زى ماقولنا ..الصقه فى المكان المناسب اذا مكنش موجود او غيره الى ( اوتو ) فى حالة اذا كان محدد بقيمة تانية
  طبعا ممكن تلاقى اختلاف فى الارقام حسب القالب بتاعك وممكن اختلاف بسيط فى شكل الكود لاختلاف القوالب
  لكن المظهر العام واحد

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='اسم القطعة الاولى' locked='false' title='General' type='LinkList'/>
<b:widget id='اسم القطعة الثانية' locked='false' title='' type='HTML'/>
<b:widget id='اسم القطعة الثالثة' locked='false' title='Label' type='Label'/>
</b:section>
</div>

لاحظ الاتى
فى المثال ده يوجد بالاطار الجانبى ثلاث قطع (widgets)
لكل منها عنوان (id) , غالبا الاآ دى هايكون اسمه html او linklist او text , حسب الاداة اللى موجوده فى القطعه , وممكن تكون مرقمة لوكان يوجد منها اكثرمن اداه فى نفس المدونة , يعنى فى حالة لو انت عامل اكثرمن link list هاتلاقى linklist1 و linklist2 وهكذا .
واسم كل قطعة انا كاتبه بالعربى للتمييز فقط لكى تتعرف عليه , هايكون بعد كلمة id

لاحظ ان هذا الجزء هو جزء الاطار الجانبى وتأكد من وجود كلمة sidebar
وتذكر دائما انك تاخد نسخة احتياطية من التمبلت بتاعك كما شرحنا سابقا download full template
وتحفظها على الهارد تحسبا لاى ظروف
دور بقا على اسم القطعة بتاعتك اللى انت عايز تعملها مسطرة
بعد ماتعرفه اطلع فى الجزء العلوى (جزء الجسم او البودى بتاع القالب ) لصندوق الاكواد
والصق قطعة الكود هذه فى المكان المناسب

المكان المناسب بالنصف الاعلى من الصندوق شرط انه يكون بعد اى علامة { مقوسه تجاه اليسار

لاحظ انها مقوسه تجاه اليسااااار

/* Sidebar Content */
#ضع هنا اسم القطعة{
height:200px;
overflow:auto;
}

غير الاحرف العربية ( ضع هنا اسم القطعة ) فى الكود باسم القطعة التى تريدها

اما عن مكان لصق الكود فيمكنك لصقه ضمن اكواد الاطار الجانبى
هاتلاقى كلمة sidebar مكررة كتير فى الجزء العلوى
بعد نهاية الاكواد الصق انت الكود

وتعرف ان الاكواد انتهت اذا رايت علامة شكلها { مقوسه تجاه اليسار
ومتنساش انك تدوس preview
وليس save
حتى تعرض لك التغيرات بدون حفظ .. ولو عجبتك التغيرات وكان شغلك تمام احفظ
جرب وهاتلاقى الموضوع لذيذ بجد

اكتب ايميلك هنا