كيفية تنسيق عناصر الصفحة في لوحة تحكم Blogger
والسبب أن هذه الأداه -عناصر الصفحة- تعتمد في التخطيط على خصائص css للقالب، فلو كان العرض الكلي يساوي 960 بكسل تكون هي الأخرى كذلك، أيضا الحال مع الخلفيات والقائمة الجانبية ونهاية الصفحة، ولا يغرك شكل المدونة المرتب عند عرضها ففي الغالب ستكون مثالاً في العشوائية وعدم الترتيب إن حاولت التحكم فيها من عناصر الصفحة!
ظهور مربع البحث مع وصلات الهيدر، عدم تناسق بين widget المختلفة
صورة الإشتراك في الخلاصات أعلى القائمة الجانبية مع ظهور مربع البحث ووصلات
ظهور أماكن للإعلان بالقائمة الجانبية
والحل بسيط، فإن كنت أحد مصممي قوالب blogger أو معرب، يمكنك التحكم في الأداة بسهولة أكثر و تخطيطها بشكل منظم، عن طريق تحديد خصائص css لكي تعمل عليها هي فقط دون التأثير على القالب نفسه أثناء العرض، وذلك بإضافة body#layout قبل أي مُحدد ضمن css، مثال لتخطيط القالب الإفتراضي:
إعطائك خصائص لتك المُحددات سوف يطبق بشكل طبيعي على القالب وأيضا على أداة عناصر الصفحة بلوحة التحكم، لكن إذا أردت التحكم في تخطيط عناصر الصفحة فقط عليك كتابتها بهذا الشكل:#outer-wrapper { } #main-wrapper { } #header-wrapper { } #sidebar-wrapper { } #footer { }
لو كان العرض الكلي للقالب 960px مثلاً، يمكنك تحديد عرض جديد يظهر في لوحة التحكم بكتابتها ضمن المحددات السابقة، أيضا لو أحتوى قالب على خلفية متكررة، أزلها بسهولة من لوحة التحكم حتى تستطيع التحكم في الترتيب بسهولة وهكذا...body#layout #outer-wrapper { } body#layout #main-wrapper { } body#layout #header-wrapper { } body#layout #sidebar-wrapper { } body#layout #footer { }
كيف تطبق ذلك داخل قالب blogger:
في القوالب يتم تطبيق خصائص css داخل وسم خاص يسمى <b:skin> وهو مايتم داخله التعديل وكتابة خصائص css الجديدة، لذا عند الإضافة سوف نبحث عن نهاية هذا الكود كي نضع أعلاه مباشرة خصائص تعديل عناصر الصفحة بحيث تكون هي آخر خصائص موجودة به، أبحث عن:من المهم قبل التعديل وفي القوالب الأجنبية خصوصاً التى يتم تعريبها أن نعرف جيداً طريقة التوزيع وما هي العناصر الرئيسية التى يُحدد منها عرض القالب أسفل الوسم <body> حتى نتمكن من استهدافها بطريقة صحيحة.]]
بعد أن عرفت العناصر الرئيسية، نأتي لتعديل العرض الزائد هو بجعله يساوي width:760 هذا مناسب وتقريباً هذا هو العرض الإفتراضي لأنه الذى يظهر بعناصر الصفحة في القوالب الإفتراضية بحيث يتم ضبطه على الأطار،
كما يجب أن تراعي أيضا تكرار العناصر التى تأخذ نفس العرض،
فمثلاً لو كان العنصر الرئيسي والذى يُحدد منه عرض القالب هو wrapper# وبعرض 960px، ثم هناك عنصر آخر داخله لرأس الصفحة header# بنفس العرض فلا يكفي أن تعدل العرض داخل wrapper فقط لأن هناك header بنفس العرض مما يعني انك لن تشاهد تأثير في عناصر الصفحة:
العناصر الداخلية أيضا يتم ضبطها، القائمة الجانبية وعمود المحتويات فاستهادف كل منهم يتم على حده، مثال:body#layout #wrapper, body#layout #wrapper #header {width:760px; margin:0; padding:0;}
تم توزيع الأعمدة بعرض مناسب على حسب العرض الكلي أو كما تريد حسب تخطيط القالب إن كان أكثر من عمودين -أعتبر تخطيط عناصر الصفحة هو تخطيط مصغر للقالب- لا تستخدم النسب المئوية % أو العرض بقيمة تلقائية auto جربت ذلك ولم يعمل على IE لا أعرف لماذا!!body#layout #main {width:500px; margin:0; padding:0;} body#layout #sidebar {width:260px; margin:0; padding:0;}
إن فشلت معك كل الطرق السابقة، جرّب أن تكون خصائص التعديل داخل وسم <style> منفصل عن الوسم الذى تستخدمه blogger ويوضع الوسم الجديد أسفلة مباشرة، مثال..
]] <style type="text/css"> ضع هنا خصائص css </style>
source
0 Response to "كيفية تنسيق عناصر الصفحة في لوحة تحكم Blogger"
Post a Comment