جرب..ولن تندم

الاثنين، 14 يوليو 2014

دروس تعريب قوالب بلوجر (3)

وصلنا للدرس الثالث من دروس تعريب قوالب بلوجر. وبعد تعريبنا للجزء العلوي ثم القوائم، سنرى اليوم طريقة تعريب المربع الأيمن من القالب مع تحويله لجهة اليسار.


الخطوة الأولى تبدأ بفتح أداة تغيير القالب، من واجهة المدونة تختارون قالب ثم تحرير HTML. ومن لوحة المفاتيح تنقرون على Ctrl+F للبحث عن الكود التالي: .tabs-widget
سيظهر كود بهذا الشكل:
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#F5CD6D;background:url(http://1.bp.blogspot.com/--k3vSkeUe-k/UU5be03uncI/AAAAAAAACC0/jR0wxHrM8cc/s000/tabs-bg.png) left top repeat-x;padding:6px 16px;display:block;text-decoration:none;font:bold 12px/12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(http://1.bp.blogspot.com/--k3vSkeUe-k/UU5be03uncI/AAAAAAAACC0/jR0wxHrM8cc/s000/tabs-bg.png) left -126px repeat-x;color:#5A2A12;text-decoration:none}
.tabs-widget-content{}
وكل ما ستقومون بتغييره هو float:left ب float:right. ليتم تحويل المربعات الثلاث لليمين:


لترجمة الكلمات للعربية قوموا بالبحث عن Popular، استمروا بالنقر على Enter حتى تجدوا كود بهذا الشكل:
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>
ويكفي تغيير كلمات Popular, Tags, Blog Archives  بالكلمات التي ترغبون بها:


سنمر الآن لمحتوى أدوات المربع الأيمن لتعريبها، وللقيام بذلك سنبحث عن: .sidebar ليظهر كود بهذا الشكل:
.sidebar{margin:0 0 10px 0;font-size:13px;color:#E4BFAD; text-align: right;}
.sidebar a{text-decoration:none;color:#E4BFAD;}
.sidebar a:hover{text-decoration:none;color:#FDDD92;}
.sidebar h2, h3.widgettitle{background:url(http://2.bp.blogspot.com/-a5WflQMDEGw/UU5bbh0vLTI/AAAAAAAACBo/yljOlIochIg/s000/widgettitle-bg.png) left top repeat-x;margin:0 0 10px 0;padding:10px;color:#FFD059;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;font-weight:normal;text-decoration:none;text-transform:uppercase;}
.sidebar ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}
.sidebar ul li{padding:0 0 9px 12px;margin:0 0 8px 0;background:url(http://4.bp.blogspot.com/-sWFCKTzLk6M/UU5bbw93EdI/AAAAAAAACBw/FIkW3eoooJM/s000/widget-list.png) left 3px no-repeat;}
.sidebar .widget{margin:0 0 15px 0;padding:0;color:#E4BFAD;font-size:13px;}
ستقومون بإضافة text-align: right; في السطر الأول، ثم تغيير left  ب right . 
بعد حفظكم للتغييرات ستلاحظون أن عناوين ومحتوى الأدوات أصبح إلى اليمين:

هناك مشكلة صغيرة تتعلق بلائحة الفئات. حيث أن المربع الصغير يتداخل قليلا مع الروابط.

دعونا نحل هذا الإشكال:
في نفس الكود الخاص ب .sidebar الذي عملنا عليه للتو سنقوم بتغيير .sidebar url li بهذا الشكل مع تغيير padding:0 0 5px:
.sidebar ul li{padding:0 10px 5px 12px;margin:0 0 8px 0;background:url(http://4.bp.blogspot.com/-sWFCKTzLk6M/UU5bbw93EdI/AAAAAAAACBw/FIkW3eoooJM/s000/widget-list.png) right 3px no-repeat;}
ليصبح كل شيء في مكانه:

لم يتبقى الآن إلا تحويل  المربع الأيمن إلى اليسار. وللقيام بذلك قوموا بالبحث عن  rsidebar-wrapper ليظهر الكود التالي مع تعويض  float:left ب float:right  ثم float:right  ب float:left:
#main-wrapper{width:615px;float:left;margin:0px;padding:15px 0px 15px 0px;word-wrap:break-word;overflow:hidden;}
#rsidebar-wrapper{width:301px;float:right;margin:0px;padding:15px 0px 15px 11px;word-wrap:break-word;overflow:hidden;}

قوموا بحفظ التغييرات وستلاحظون أن المربع الأيمن تم تحويله إلى الجهة اليسرى:

انتهى درس اليوم من سلسلسة دروس تعريب قوالب بلوجر. في الدرس القادم سنقوم بتعريب الجزؤ الرئيسي من القالب حيص عناوين ونصوص المشاركات.

0 on: "دروس تعريب قوالب بلوجر (3)"