أهلًا و سهلًا بكـ يشرفنا تسجيلك و مشاركتك معنا .
#1
|
|||
|
|||
[ درس ] تأطير بيانات العصو بالصور بالـ 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 بعد تعديل مسارات الصور + الارتفاع انتهى الدرس ولا تنسونا بالدعاء الصالح لي ولوالدي اخوكم المصمم بوصالح المصدر منتديات تصميم التعليمية
__________________
|
|
|