هذا الدرس بيكون شرح عملي (مرئي) للدرس السابق #1 طور مدونتك
وأيضاً سوف أضع لكم الخصائص المهمة أو التعديلات التي نحتاجها بشكل دائم
لأن في كل الدرسين تكلمت عن خاصية واحدة وهي تغيير لون النص وما تطرقت للخصائص الأساسية الباقية.

لمشاهدة الشرح المرئي استخدم هذا الرابط:
http://screenr.com/1eC

قبل ذكر خصائص التعديل أُذكر بأن هذه الخصائص جميعها توضع بين القوسين بهذا الشكل:
#bla #bla .bla {
هــنــا
}

خصائص CSS الأساسية:

تغيير لون النص
color:كود اللون;
مثال:color: #000000;

تغيير شكل خط النص
font-family: مسمى الخط/أسماء عدة خطوط من حيث الأفضلية;
مثال: font-family: Tahoma,Arial,Serif;
في هذا المثال الخط الأساسي هو tahoma لكن لو ماوجده في جهاز المستخدم راح يحوله للخط التالي وهو arial وهكذا بالتسلسل.

تغيير مقاس النص
font-size:الحجم بالبيكسل;
مثال: font-size: 14px;

تغيير توجه النص
direction: توجه النص من اليمين إلى اليسار أو العكس;
مثال: direction: rtl;
*rtl= right to left  *ltr= left to right
إذا أردت ظهور النص العربي بشكل جيد استخدم المثال بحيث يقرا النص من اليمين إلى اليسار.

محاذاة النص
text-align: جهة المحاذاة;
مثال: text-align: right;
right(محاذاة لليمين) - left(محاذاة لليسار) - center(توسيط)

تغيير لون خلفية جزئية معينة في الصفحة
background-color: كود اللون;
مثال: background-color: #2C4762;

مثال شامل - أبيه يغير نوع الخط ولونه وحجمه ويكون محاذي للوسط:
#bla #bla .bla {
font-family: tahoma;
color: #666666;
font-size: 12px;
text-align: center;
}

نكتفي بهذه الخمس خصائص في هذا الدرس والقادم أجمل إن شاء الله

[ 1- تحديد الجزئيات المراد تعديلها ]

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


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

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

في هذا المثال سوف أقوم بتحديد “مسمى المدونة”:


وعندالضغط (ضغطه واحده) على الجزئية ظهر لي مسماها مباشرة في نافذة الأداة بهذا الشكل

[ 2- إجراء التعديلات على الجزئية المحددة ]

بعد معرفة مسمى الجزئية المراد تعديلها ننتقل لوضع التعديلات عن طريق(CSS):
في مثالنا السابق أردنا تعديل شكل “مسمى المدونة” وظهر لنا أن مسماها الكودي “#title”
للتحديد بدقة أكثر عد للصورة مرة أخرى وأنظر للمسميات التي خلف “#title” وتحمل div في أولها
ثم ضعها قبل المسمى بهذا الشكل المتسلسل:
#wapper #title
الأن نأخذ هذا السطر وندخله في كود CSS بحيث نضعه داخل {قوسين} هكذا:
#wapper #title {
“هنا تضاف التعديلات المرادة بواسطة لغة css”
}

الأن أصبح الكود جاهز لإضافة التعديلات، وسأقوم مثلاً بتغيير لون الخط بهذا الشكل:
#wapper #title {
color: #666666;
}

[ 3- تركيب الكود على المدونة ]

الأن الكود المعدل كلياً جاهز وباقي عليك إضافته في المدونة لذلك توجه إلى الأختيار

ثم من القائمة العلوية أضغط على “Advanced” ستظهر لك نافذة فيها مستطيل مكتوب في أعلاه:
“Add custom CSS” في هذا المستطيل ضع كود التعديل ثم تضغط على زر “Save” الموجود في الشريط العلوي أقصى اليمين.
وإذا أردت إضافة المزيد من التعديلات على جزئيات أخرى أدرجها تحت التعديل السابق أو فوقه بهذا الشكل مثلاً:
#wapper #title {
color: #666666;
}
#wrapper #content .post {
font-size: 16px;
}

[ 4- خاتمة ]

أكواد التعديلات كثيرة جداً وهي تسمى لغة css سأتطرق لما نحتاجه كأمثله في الدروس القادمة
لكن عليك مراجعة هذه الصفحة إذا أردت التجربة بنفسك وموضح فيها طريقة استخدام كل كود مع الأمثله أيضاً
http://www.w3schools.com/css/default.asp

أكرر عليك بالتجربة لا تكتفي بالقراءة وسترى أنك تستمتع
بل سوف تحب مدونتك أكثر عندما تشعر أنك وضعت ذوقك ولمساتك عليها بنفسك ^_^
ولا تقلق أعلم أني قد ذكرت أشياء في هذه التدوينة ومررت عليها سريعاً لكني سوف أخصص لكل منها تدوينة لوحدها بإذن الله

ساهموا في نشرها إذا رأيتم أنها مفيدة
دعواتكم بالتوفيق

بسم الله الرحمن الرحيم

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


متطلبات لابد من توفرها لديك إذا أردت المتابعة:
متصفح Firefox
http://www.mozilla.com/en-US/firefox/all.html
(مهم) تركيب إضافة Firebug على المتصفح
https://addons.mozilla.org/en-US/firefox/addon/1843
(اختياري) إضافة لإستخراج أكواد الألوان من الصفحة بشكل سريع
https://addons.mozilla.org/ar/firefox/addon/271

زي ما ذكرت هذي التدوينة هي بداية سلسلة “طور مدونتك”
راح أحاول قد ما أقدر أوصل الفكرة بشكل مبسط إن شاء الله.