حل مشكلة التخطيط فى قوالب بلوجر

حل مشكلة التخطيط فى قوالب بلوجر

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

فى الصوره التاليه تجد مثال للتخطيط فى احد قوالب بلوجر

حل مشكلة التخطيط فى قوالب بلوجر

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

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

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

ملحوظه اكواد الـ Css هى الاكواد المسئوله عن ترتيب وتنسيق والوان استايل قالب بلوجر

السؤال اين اجد اكواد الـ Css ؟
الاجابة اذا دخلت لوحة ادارة المدونه واخترت قالب ثم تحرير Html وبحثت عن <b:skin><![CDATA[ فستجد  اكواد الـ Css بعده

ناتى لحل المشكله

هام جدا الاكواد التى سنتحدث عنها يتم وضعها بعد هذا الكود فى القالب <b:skin><![CDATA[

الكود المسئول عن شكل التخطيط فى قوالب بلوجر هو body#layout

فمثلا لضبط شكل و عرض التخطيط الكلى نكتب هذا الكود

body#layout {
    background-color: #F1F1F1;
    font-size: small;
    margin: 0px;
    text-align: center;
    width: 900px;
    padding: 15px 0px 0px;
}

مثال للكود المسئول عن منطقة الهيدر فى تخطيط القالب header-wrapper

منظقة  header-wrapper هى المنطقه التى يتواجد فيها الشعار والاعلان العلوى وايضا القوائم فى اغلب قوالب بلوجر

وكود التخطيط يكون على الشكل التالى body#layout #header-wrapper

مثال لضبط شكل وعرض  header-wrapper

body#layout #header-wrapper {
    display: inline-block;
    margin: 0px;
    width: 500px;
}

مثال للكود المسئول عن منطقة البودى فى تخطيط القالب body-wrapper

منظقة  body-wrapper هى المنطقه التى يتواجد فيها رسائل المدونه الاليكترونيه والسايدبار سواء كان يمين او يسار المشاركات فى اغلب قوالب بلوجر

وكود التخطيط يكون على الشكل التالى body#layout #body-wrapper

مثال لضبط شكل وعرض  body-wrapper

body#layout #body-wrapper {
    display: inline-block;
    margin: 0px;
    width: 800px;
}

مثال للكود المسئول عن منطقة الفوتر اسفل القالب  فى تخطيط القالب  footer-wrapper

منظقة footer-wrapper هى المنطقه السفليه للقالب فى اغلب قوالب بلوجر

وكود التخطيط يكون على الشكل التالى body#layout #footer-wrapper

مثال لضبط شكل وعرض  footer-wrapper

body#layout #footer-wrapper {
    display: inline-block;
    margin: 0px;
    width: 800px;
}

وهكذا كل ما عليك فعله هو معرفة المكان الذى تريد تعديله فى التخطيط وتضع الكود الخاص به بعد هذا الكود body#layout

مثال لكود كامل

body#layout #header-wrapper {width: 880px;margin: 0;}
body#layout #header {width: 600px;}
body#layout #content-wrapper {width: 860px!important;}
body#layout #main-wrapper {overflow: visible;width: 505px;}
body#layout #footer {width: 850px;margin: 0;}
body#layout .nav {width: 740px;margin-left: 5px;}

هام جدا

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

فى النهايه اتمنى انى استطعت ان اوضح هذه النقطه واتمنى ان ينال الموضوع اعجابكم

HashtagsTech

هاشتاج التقنيه قوالب واضافات بلوجر وجديد الاخبار التقنيه

Facebook

Twitter

Instagram

شارك هذا الموضوع