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

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

http://mwadah.com/images/imgcache/2011/08/1.gif

اليوم درسنا يا اخوان عن تأطير بيانات العضو والطريقة سهله جداً
مثال
http://up.tsmim.com/uploads/images/tsmim-6b16fb78c8.jpg
المتطلبات :
1- فوتوشوب http://mwadah.com/images/imgcache/2011/08/1.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
والآن في قالب البوست بت لاجيسي 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 بعد تعديل مسارات الصور + الارتفاع
انتهى الدرس
ولا تنسونا بالدعاء الصالح لي ولوالدي
اخوكم المصمم بوصالح
المصدر
منتديات تصميم التعليمية

https://mwadah.com/images/imgcache/2013/12/4.gif

https://mwadah.com/images/imgcache/2016/01/4.gif

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

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

مشكور ربي يسلم اناملك

درس رائع وفقك الله اخي الفاضل وحياك الله