اليوم درس مفصلنا يا اخوان عن تأطير بيانات العضو والطريقة سهله جداً
مثال
http://up.tsmim.com/uploads/images/tsmim-6b16fb78c8.jpg
المتطلبات :
1- فوتوشوب
http://files.softicons.com/download/.../Photoshop.png
2- Microsoft Expression Web او فرونت بيج لتوزيع الصور بالــ css
بسم الله نبدء الدرس مفصل :
نفتح عمل جديد ببرنامج الفوتوشوب ومهم جداً الابعاد
العرض = 212 بيكسل
الارتفاع =
على حسب تصميمك وانت حر في ذلك
http://up.tsmim.com/uploads/images/tsmim-89d020ae9e.jpg
ناتي الى طريقة التقطيع وتنقسم الى 3 صور وهي :
1- الصورة العلوية
2- صورة تمدد الوسطى
3- الصورة السفلى
http://up.tsmim.com/uploads/images/tsmim-a169b1b1ff.gif
والآن في قالب template البوست بت لاجيسي
postbit_legacy نبحث عن هذا الكود code
رمز PHP:
<div id="postmenu_$post[postid]">
ونلصق فوقه مباشرة
رمز PHP:
<div class="postinfo">
<div class="postinfo_top">div>
<div class="postinfo_bg">
ثم نبحث ايضاً عن هذا الكود code في نفس القالب template
رمز PHP:
td>
condition="$show['moderated']">
ونلصق فوقه مباشرة
رمز PHP:
div>
<div class="postinfo_do">div>
div>div>
والان نأتي الى كود code الـ 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;
}
وبعد التعديل من لوحة التحكم نذهب الى الإستايل styleات والقوالب -> التحكم بالإستايل styleات -> رئيسي css
وفي اخر مربع
تعاريف CSS الإضافية/Additional CSS Definitions
نلصق كود code الــ css بعد تعديل مسارات الصور + الارتفاع
انتهى الدرس مفصل
ولا تنسونا بالدعاء الصالح لي ولوالدي
اخوكم المصمم بوصالح
المصدر
منتديات تصميم التعليمية