[ درس ] تأطير بيانات العصو بالصور بالـ 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 بعد تعديل مسارات الصور + الارتفاع

انتهى الدرس
ولا تنسونا بالدعاء الصالح لي ولوالدي
اخوكم المصمم بوصالح

المصدر
منتديات تصميم التعليمية