الأربعاء، 12 أغسطس، 2009

ضبط خصائص الصناديق container في قالوب بلوجر (5)

في هذا الدرس سنتعرف أساسا على الأكواد التي تتحكم في خصائص الأقسام أو الصناديق containers، وسنقتصر على صندوقين على سبيل المثال لا الحصر وهما:
الصندوق الرئيسي أو الجزء الرئيسي :Main .
وصندوق المواضيع Post .
ومعلوم أن الصندوق الأخير يقع داخل الصندوق الأول.
بمجرد التعرف على الأكواد التي تتحكم في خصائص هذين الصندوقين، سيسهل عليك حتما فهم أكواد باقي الصناديق لأن هذه الأكواد تتكرر في كل صندوق تقريبا:
وهذه أكودا الصندوقين :

#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #111111;
font: $textFont;
}


.post {
margin: 0px 20px 10px 0px;
padding: 10px 20px 10px 2px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}


ومن خلال الأكواد أعلاه سنتعرف في هذا الدرس على ما يلي :
*********الهوامش الخارجية أو الحاشية : Margin.
*********الهوامش الداخلية أو الحشو : Padding.
*********العرض الأدنى : Min-width.
*********العرض الأقصى: Max-width.
*********الخلفية : background.
*********اللون : Color.
*********محاذاة النص : Text-align.
********المسافة بين السطور: Line-heihgt.

فكلمة #main هي العنوان الذي تندرج تحته كل الأكواد التي يتكون منها الصندوق الرئيسي Main وهذه الأكواد يجب أن تكون محصورة بين لامتين { } ، وفيما يلي شرح لمدلولات الأكواد أعلاه وسنبدأ باكواد Main .

الهوامش الخارجية أو الحاشية : Margin:

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

margin: 0px 0px 0px 0px;

الأول يشير إلى الهامش العلوي ،
والثاني يشير إلى الهامش الأيمن ،
والثالث يشير إلى الهامش االسفلي،
والرابع يشير إلى الهامش الأيسر لذلك تكتب في الكود هكذا :

مع العلم أن هذه الطريقة إنما هي صيغة مختصرة لصيغة أوضح وتكتب في الأصل هكذا
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;

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

الهوامش الداخلية أو الحشو :padding :

وهو يحدد المسافة في الصندوق بين محتوياته من العناصر وبين الإطار، فهو يحدد موضع العنصر داخل الصندوق الذي يوجد فيه .
العرض الأدنى : Min-width، والعرض الأقصى : Max-width: ومعنى width هو العرض، وهو يحدد عرض العنصر وتوجد أمامه قيمته بالبيكسل.

الخلفية : Background:

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

اللون : Color:

ويحدد لون العنصر، تحدد الألوان بواسطة اكواد، إذ لكل لون كوده الخاص به بحسب نظام الألوان المستعمل .

الخط : font:

ويحدد نوع الخط الذي تريد أن تظهر به نصوص المدونة .

محاذاة النص : Text-align:

ويضبط محاذاة النص فبالنسبة للغة العربية يجب أن تكون قيمته right : ولهذه الخاصية دور كبير في تعريب قوالب بلوجر، وسنشرح ذلك لاحقا .

Line-height:

ويحدد المسافة بين سطرين .

ويجب أن تعلم أننا اقتصرنا على قسمين أو صندوقين في هذه الحلقة وهما Main و post، على سبيل المثال لا الحصر لأن هذه الأكواد تتكرر تقريبا قي باقي الأقسام والصناديق كلها .
وإلى حد الآن ما زلنا في الأساسيات ، وأهم ما تعلمناه في هذا الدرس هو خاصيتي Margin و padding.

10 التعليقات:

فوضى عارمة 13 أغسطس، 2009 5:58 م  

عزيزي هناك لدي خلل في مدونتي في بردلة التدوينات الى بريدالات القراء

اشتركت في بريدال مدونتي , وفعلت الرابط و كتب لي في الشاشة المنبثقة انه مفعل , الا انه من داخل الفيد برنر يقول لي انه غير مفعل ,وهكذا باقي المشتركين يظهرون على انهم غير مفعلين

ايضا احتاج مساعدة تقنية بوضع صناديق خلفيات للكتابة


الرجاء بردلتي على eqraa11@gmail.com

مشكور

عمر 13 أغسطس، 2009 6:43 م  

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

فوضى عارمة 13 أغسطس، 2009 10:21 م  

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

عمر 14 أغسطس، 2009 12:20 ص  

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

عمر 14 أغسطس، 2009 12:25 ص  

او اشترك بعنوان بريد آخر وجرب لعل الامر ينجح

بـو جـاسـم 14 أغسطس، 2009 12:55 ص  

الحمدلله تم فهم الدرس ..

يعطيك ألف صحة لا هنت ,,

في انتظار الدرس القادم

بارك الله فيك

عمر 14 أغسطس، 2009 11:40 ص  

شكرا على المتابعة باقي الدروس ستأتي تباعا

غير معرف 5 يناير، 2010 8:57 ص  

اذا وضعت قالب جديد قمت بتحمليه تختفي صناديق التحكم بلون العنوان ووضعية وخطه ، فكيف يمكنني التحكم بها بعد ؟

عمر 5 يناير، 2010 11:19 ص  

هذا الأمر يتعلق بطبيعة أكواد القالب ، وبتوفر قسم variable name في أكواد القالب .

alaa.sh 17 يوليو، 2010 8:07 م  

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

إرسال تعليق

أحدث الموضوعات

أحدث التعليقات

عن المدونة

المرشد الأمين إلى عالم التدوين
مدونة تهتم بالتدوين من الناحية التقنية- إنشاء المدونة، ضبط إعدادات المدونة، النشر ، القوالب و طرق تحميلها وتعديلها - ومن الناحية الموضوعية - كيفة الكتابة وتقنياتها، على بلوجر .

الزوار

  © Blogger template 'Ultimatum' by Ourblogtemplates.com 2008

Back to TOP