[ درس ] تأطير بيانات الصور بالـ 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 بعد تعديل مسارات الصور + الارتفاع
انتهى الدرس
ولا تنسونا بالدعاء الصالح لي ولوالدي
اخوكم المصمم بوصالح
المصدر
منتديات تصميم التعليمية
مواقع النشر (المفضلة)