الموضوع: [ درس ] تأطير بيانات العضو بالـ css من اخوكم بوصالح

[ درس ] تأطير بيانات الصور بالـ css من اخوكم بوصالح

اليوم درسنا يا اخوان عن تأطير بيانات العضو والطريقة سهله جداً
مثال

المتطلبات :
1- فوتوشوب
2- Microsoft Expression Web او فرونت بيج لتوزيع الصور بالــ css
بسم الله نبدء الدرس :
نفتح عمل جديد ببرنامج الفوتوشوب ومهم جداً الابعاد
العرض = 212 بيكسل
الارتفاع = على حسب تصميمك وانت حر في ذلك

ناتي الى طريقة التقطيع وتنقسم الى 3 صور وهي :
1- الصورة العلوية
2- صورة تمدد الوسطى
3- الصورة السفلى

والآن في قالب البوست بت لاجيسي postbit_legacy نبحث عن هذا الكود

كود PHP:

<div id="postmenu_$post[postid]"> 


ونلصق فوقه مباشرة

كود PHP:

<!--بداية العلوي--> 
<div class="postinfo">
<div class="postinfo_top"></div>
<div class="postinfo_bg">
<!--نهاية العلوي--> 


ثم نبحث ايضاً عن هذا الكود في نفس القالب

كود PHP:

 </td>
 <if condition="$show['moderated']"> 


ونلصق فوقه مباشرة

كود PHP:

</div>
<!--بداية السفلي--> 
<div class="postinfo_do"></div>
</div></div>
<!--نهاية السفلي--> 


والان نأتي الى كود الـ css وعليك بتعديل الارتقاع فقط + مسار الصور

كود PHP:

.postinfo {
 padding-right: 5px;
}

.postinfo_top { /* الصورة العلوية */
 background-position: right;
 background-image:url('edo/images/postinfo_top.gif'); /* الصورة العلوية مسار*/
 background-repeat: no-repeat;
 height: 69px;
 width: 212px;
}
.postinfo_bg{
 background-color: transparent;
 background-image:url('edo/images/postinfo_bg.gif');/* مسار صورة التمدد */
 background-repeat: repeat-y;
 width: 212px;
}
.postinfo_do{
 background-position: bottom;
 background-image:url('edo/images/postinfo_do.gif');/* الصورة السفلى*/
 height: 99px;
 background-repeat: no-repeat;
 width: 212px;
} 


وبعد التعديل من لوحة التحكم نذهب الى الإستايلات والقوالب -> التحكم بالإستايلات -> رئيسي css
وفي اخر مربع
تعاريف CSS الإضافية/Additional CSS Definitions
نلصق كود الــ css بعد تعديل مسارات الصور + الارتفاع
انتهى الدرس
ولا تنسونا بالدعاء الصالح لي ولوالدي
اخوكم المصمم بوصالح
المصدر
منتديات تصميم التعليمية

اشكركم جزيل الشكر يا اخوان

مشكووووور
تحياتى لك