حالة الموضوع:
مغلق
  1. بوصالح

    بوصالح Developer

    الأنتساب:
    ‏2 أكتوبر 2011
    المشاركات:
    27
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الوظيفة:
    موظف في سابك
    الإقامة:
    بــ KSA >>> بالجبيل


    [​IMG]


    اليوم درسنا يا اخوان عن تأطير بيانات العضو والطريقة سهله جداً

    مثال

    [​IMG]

    المتطلبات :
    1- فوتوشوب [​IMG]
    2- Microsoft Expression Web او فرونت بيج لتوزيع الصور بالــ css

    بسم الله نبدء الدرس :

    نفتح عمل جديد ببرنامج الفوتوشوب ومهم جداً الابعاد
    العرض = 212 بيكسل
    الارتفاع = على حسب تصميمك وانت حر في ذلك

    [​IMG]

    ناتي الى طريقة التقطيع وتنقسم الى 3 صور وهي :

    1- الصورة العلوية
    2- صورة تمدد الوسطى
    3- الصورة السفلى

    [​IMG]

    والآن في قالب البوست بت لاجيسي 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-right5px



    .
    postinfo_top /* الصورة العلوية */ 
        
    background-positionright
        
    background-image:url('edo/images/postinfo_top.gif'); /* الصورة العلوية مسار*/ 
        
    background-repeatno-repeat
        
    height69px
        
    width212px

    .
    postinfo_bg
        
    background-colortransparent
        
    background-image:url('edo/images/postinfo_bg.gif');/* مسار صورة التمدد */ 
        
    background-repeatrepeat-y
        
    width212px

    .
    postinfo_do
        
    background-positionbottom
        
    background-image:url('edo/images/postinfo_do.gif');/* الصورة السفلى*/ 
        
    height99px
        
    background-repeatno-repeat
        
    width212px
    }  

    وبعد التعديل من لوحة التحكم نذهب الى الإستايلات والقوالب -> التحكم بالإستايلات -> رئيسي css

    وفي اخر مربع

    تعاريف CSS الإضافية/Additional CSS Definitions
    نلصق كود الــ css بعد تعديل مسارات الصور + الارتفاع

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

    Mr.Alsa3ek Guest

    [B][B][B][B][B][B][B][B][B]بطل وربي .....[/B][/B][/B][/B][/B][/B][/B][/B][/B]
     
  3. منير

    منير Guest

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

    مشكور اخي *:"​
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة