1. Fox

    Fox Developer

    الأنتساب:
    ‏27 ديسمبر 2011
    المشاركات:
    81
    الإعجابات المتلقاة:
    3
    نقاط الجائزة:
    8
    الإقامة:
    ŖĬỹДďҢ
    بسم الله الرحمن الرحيم


    السلام عليكم ورحمة الله وبركاته


    كيف الحال اخواني؟
    ان شاء الله بخير


    !:"


    اليوم حبيت اقدم لكم شرح خاص ومميز لكم
    وجديد طبعا , حيث انني لم اجد شرح مشابه له بعد
    وان شاء الله اكون ما اخطئت
    المهم


    شرحنا اليوم هو
    كيفية تغيير مكان تسجيل الدخول + تصميم اطار خاص بها + عمل مكان مميز لاظهارها

    لكي يصبح الشكل هذا

    حيث سيكون هكذا هو شكلها الرائع باذن الله

    #:"

    هذا للزائر

    [​IMG]

    وهذا للعضو

    [​IMG]

    :{21}:

    تابعو معي وسترون

    كيف بالضبط

    لنبدا

    سنبدا كبداية , في تصميم الاطار الذي سنضع فيه تسجيل الدخول للعضو

    اولا نفتح الفوتوشوب

    [​IMG]


    وبعدها نفتح صفحة جديدة بحجم
    300*40

    [​IMG]

    وسيكون الشكل هكذا اذا

    [​IMG]

    الان في صفحة الليرات , نضغط على اللير مرتين

    [​IMG]

    لكي تظهر لنا هذه الصفحة

    [​IMG]

    ونضغط اوكي , وما عملناه هنا هو اننا جعلنا اللير قابل للتحكم والحذف
    لكي نقدر نحذفه , فشكله الان سيكون كالتالي

    [​IMG]

    الان نعمل لير جديد عن طريق الضغط على
    Shift + Ctrl + N

    [​IMG]

    وبعدها نحذف اللير السابق

    والان نختار اداة رسم مربع ذو اطراف دائرية

    [​IMG]

    ونرسم الان نصف مربع , اي هكذا

    [​IMG]

    الان في صفحة الليرات , سنعمل تاثيرات قليلة على هذا المربع ,
    لذا سنضغط كما في الصورة

    [​IMG]

    ونعمل التاثيرات كالتالي وبالنسبة للون , فكود اللون هو #C4C4C4

    [​IMG]

    والان نضغط على تاثير Gradient Overlay ونعمل كما بالصورة

    وبالنسبة لاكواد اللون , فهي #DFDFDF و #FFFFFF

    ونضغط اوكي

    [​IMG]

    والان اصبح لدينا اطار سنضع فيه تسجيل دخول العضو وها هو شكله

    [​IMG]


    والان سنقطعه عن طريق هذه الاداة

    [​IMG]

    ونقطع التصميم كالتالي

    [​IMG]

    والان نضغط على

    File >>> Save For Web

    وبعدها نضغط على Save

    ونحدد مسار التسجيل ونسجله

    والان نذهب الى مسار الصور الذي سجلناهم

    ونختار الصورة الثانية ونفتحها على الفوتوشوب

    [​IMG]

    وبعدها نضغط على Image >>> Canvas Size

    ونعمل كما بالصورة

    [​IMG]

    ونضغط اوكي , ونسجل الصورة

    وهكذا نكون انهينا 100% امر التصميم

    [​IMG]


    والان نبدا في برنامج الفرونت بيج , لكي نجهز الكود

    لذا سنفتح الفرونت بيج

    [​IMG]

    وندخل صفحة الاكواد , عن طريق الضغط على زر code

    [​IMG]

    ونحذف محتوى كل الصفحة التالية

    [​IMG]

    والان نعود الى صفحة التصميم عن طريق الضغط على زر design

    [​IMG]

    والان نضيف جدول مكون من 3 خانات

    [​IMG]

    ونضغط على الجدول بالزر الأيمن ونختار كما بالصورة

    [​IMG]

    ونعمل الاعدادات كالتالي , مع العلم ان المربع الاحمر الاخير ,
    يدل على الصورة الثانية والتي اعتبرناها نقطة التمدد

    [​IMG]

    وسيصبح الشكل هكذا

    [​IMG]

    والان لنضيف الصورتان الاخرتان هكذا

    [​IMG]

    ونختارهما ونضيفهم بالجدول

    [​IMG]

    الان عند اضافتهم , سيكون الشكل هكذا

    [​IMG]

    لذا كما بالصورة اعلاه , في مكان السهم , نضغط بالزر اليمين , ونختار الخيار التالي

    [​IMG]

    ونعمل الاعدادات كما بالصورة

    [​IMG]

    وبعدها سيكون الشكل هكذا

    [​IMG]

    وهكذا , نكون انهينا عمل الكود الخاص بالتصميم

    [​IMG]

    والان سنعمل الكود الخاص بتسجيل دخول الاعضاء

    لكي يظهر بشكل جميل ومميز


    [​IMG]


    لذا سندخل لوحة تحكم المنتدى

    ونبحث عن قالب

    Navbar

    وبعدها نبحث عن هذا الكود وننسخه ونضعه في الفرونت بيج
    وبعدها نحذفه من القالب , ونسجل القالب


    كود:
    <if condition="$show['member']">
    <table style="width: 100%" cellspacing="0" cellpadding="0">
            <tr>
    <td  dir="rtl" align="right" class="alt8">
              <if condition="$show['member']">
            <div class="smallfont">
            <strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
            <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
    
    
            <if condition="$show['notifications']">
                <div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
                <script type="text/javascript"> vBmenu.register("notifications"); </script>
            <else /><if condition="$show['pmstats']">
                <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
            </if></if>
    
    
            <if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
        </div>
        <else />
            <!-- login form -->
            <form action="login.php" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
            <script type="text/javascript" src="clientscript/vbulletin_md5.js"></script>
            <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
            <tr>
                <td class="smallfont" nowrap>
                        <img border="0" src="$stylevar[imgdir_misc]/username.gif" alt="$vbphrase[username]"$stylevar[imgdir_misc]/username.gif" alt="$vbphrase[username]" border="0" /> </td>
                <td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
                <td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar">
                <input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked />$vbphrase[remember_me]</label></td>
            </tr>
            <tr>
                <td class="smallfont" nowrap="nowrap">
                        <img border="0" src="$stylevar[imgdir_misc]/pass.gif" alt="$vbphrase[password]"$stylevar[imgdir_misc]/password.gif" alt="$vbphrase[password]" border="0" /> </td>
                <td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" tabindex="102" /></td>
                <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
                                        
            </tr>
            </table>
            <input type="hidden" name="s" value="$session[sessionhash]" />
            <input type="hidden" name="do" value="login" />        
            <input type="hidden" name="vb_login_md5password" />
            <input type="hidden" name="vb_login_md5password_utf" />
            </form>
            <!-- / login form -->
                    </if>    
          </td>

    وهذا هو شكله الحالي


    [​IMG]




    الان سنعمل تعديلات على الكود بحيث يكون مظهره اجمل اكثر



    وسنبدا بالتالي



    سنقوم بالبداية بحذف كلمة "اسم العضو" و "كلمة السر" واستبدالهم بصور

    بوضح هذا الكود


    كود:
    <if condition="$show['member']">
    <div class="smallfont"><strong>
    <phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]"> $vbphrase[welcome_x_link_y]</phrase></strong><br /> <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]"> $vbphrase[last_visited_x_at_y]</phrase> <if condition="$show['notifications']"> <div><span id="notifications"> <a href="usercp.php$session[sessionurl_q]"> $vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div> <script type="text/javascript"> vBmenu.register("notifications"); </script> <else /><if condition="$show['pmstats']"> <div> <phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]"> $vbphrase[private_messages_nav]</phrase></div> </if></if><if condition="$show['pmwarning']"> <div><strong> <phrase 1="$vbphrase[pmpercent_nav_compiled]"> $vbphrase[your_pm_box_is_x_full]</phrase></strong></div> </if></div> <else /> <!-- login form --> <form action="login.php" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])"> <script type="text/javascript" src="clientscript/vbulletin_md5.js"></script> <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0" id="table37"> <tr> <td class="smallfont" nowrap> <img border="0" src="images/user.gif" width="16" height="16"> </td> <td> <input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td> <td class="smallfont" nowrap="nowrap"> <label for="cb_cookieuser_navbar"> <input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked />$vbphrase[remember_me]</label></td> </tr> <tr> <td class="smallfont" nowrap="nowrap"> <img border="0" src="images/pass.gif" width="16" height="16"> </td> <td> <input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" tabindex="102" /></td> <td> <input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td> </tr> </table> <input type="hidden" name="s" value="$session[sessionhash]" /> <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> <!-- / login form -->
     
    </if>

    وهذا هو شكله الحالي



    [​IMG]




    والان سنطور الكود لكي يصبح بشكل أفقي وجميل



    عن طريق وضع هذا الكود بدل السابق


    كود:
    <if condition="$show['member']"> <div class="smallfont"> <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="0"> <tr> <td width="230"><strong> <phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]"> $vbphrase[welcome_x_link_y]</phrase></strong></td> <td><a href="usercp.php$session[sessionurl_q]"> <img border="0" src="images/usercp.gif" width="16" height="16" alt="لوحة تحكمي"></a></td> <td><a href="private.php"> <img border="0" src="images/msg.gif" width="16" height="16" alt="رسائلي الخاصة"></a></td> <td> <a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]"><img border="0" src="images/logout.gif" width="16" height="16"></a></td> </tr> </table></div> <else /> <!-- login form --> <form action="login.php" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])"> <script type="text/javascript" src="clientscript/vbulletin_md5.js"></script> <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="2"> <tr> <td width="110"><img border="0" src="images/user.gif" width="16" height="16"> <input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td> <td width="110"><img border="0" src="images/pass.gif" width="16" height="16"> <input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" tabindex="102" /></td> <td width="20"> <input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked /></td> <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td> </tr> </table> <input type="hidden" name="s" value="$session[sessionhash]" /> <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> <!-- / login form -->
     
    </if>

    وسيكون شكله كالتالي



    [​IMG]




    والان كما ترون فلقد اصبح شكل التصميم افقي ومميز جدا برايي

    لهذا لنركبه الان بالتصميم

    لذا لنعود الان الى الفرونت بيج , ونفتح الصفحة التي عملنا فيها التصميم

    وندخل صفحة الاكواد من هنا


    [​IMG]



    وبعدها لو تلاحظ الكود التالي كما بالصورة



    [​IMG]



    عليك ان تقوم بحذفه لكي يصبح الكود فقط كالتالي



    images/xxx.gif



    وسيصبح هكذا



    [​IMG]



    الان لنعود الى صفحة التصميم



    [​IMG]



    ونضغط على الخانة الوسط في الجدول


    [​IMG]




    وندخل على صفحة الاكواد بالضغط على code هنا



    [​IMG]



    وبعدها كما تلاحظون , نظلل الكود التالي



    [​IMG]



    ونضع بدلا منه , الكود الاخير الافقي لتسجيل الدخول



    أي هذا الكود


    كود:
    <if condition="$show['member']">
    <div class="smallfont">
    <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="0"> <tr> <td width="230"><strong> <phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]"> $vbphrase[welcome_x_link_y]</phrase></strong></td> <td><a href="usercp.php$session[sessionurl_q]"> <img border="0" src="images/usercp.gif" width="16" height="16" alt="لوحة تحكمي"></a></td> <td><a href="private.php"> <img border="0" src="images/msg.gif" width="16" height="16" alt="رسائلي الخاصة"></a></td> <td> <a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]"><img border="0" src="images/logout.gif" width="16" height="16"></a></td> </tr> </table></div> <else /> <!-- login form --> <form action="login.php" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])"> <script type="text/javascript" src="clientscript/vbulletin_md5.js"></script> <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="2"> <tr> <td width="110"><img border="0" src="images/user.gif" width="16" height="16"> <input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td> <td width="110"><img border="0" src="images/pass.gif" width="16" height="16"> <input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" tabindex="102" /></td> <td width="20"> <input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked /></td> <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td> </tr> </table> <input type="hidden" name="s" value="$session[sessionhash]" /> <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> <!-- / login form -->
     
    </if>

    والان نكون 100% انهينا عمل الكود والتصميم وتحضيره بالفرونت بيج



    الان ننسخ كود الصفحة كاملا



    ونفتح صفحة جديدة , وكما فعلنا بالسابق , نحذف محتوى اكواد تلك الصفحة الجديدة



    وبعدها نضيف الكود التالي اولا


    كود PHP:
    <div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">

    كود PHP:
    &nbsp;</div>

    وهذا الكود عمله هو كأنه لير لكي يكون فوق الصور


    والان نضيف الكود الخاص بالتصميم وتسجيل الدخول داخل الكود هذا (اللير)



    لكي يصبح الكود هكذا


    كود PHP:
    <div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">

    كود:
    <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="0" background="images/fox_02.jpg">
    <tr> <td> <img border="0" src="images/fox_03.jpg" width="26" height="40"></td> <td width="100%"> <if condition="$show['member']"> <div class="smallfont"> <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="0"> <tr> <td width="230"><strong> <phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]"> $vbphrase[welcome_x_link_y]</phrase></strong></td> <td><a href="usercp.php$session[sessionurl_q]"> <img border="0" src="images/usercp.gif" width="16" height="16" alt="لوحة تحكمي"></a></td> <td><a href="private.php"> <img border="0" src="images/msg.gif" width="16" height="16" alt="رسائلي الخاصة"></a></td> <td> <a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]"><img border="0" src="images/logout.gif" width="16" height="16"></a></td> </tr> </table></div> <else /> <!-- login form --> <form action="login.php" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])"> <script type="text/javascript" src="clientscript/vbulletin_md5.js"></script> <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="2"> <tr> <td width="110"><img border="0" src="images/user.gif" width="16" height="16"> <input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td> <td width="110"><img border="0" src="images/pass.gif" width="16" height="16"> <input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" tabindex="102" /></td> <td width="20"> <input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked /></td> <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td> </tr> </table> <input type="hidden" name="s" value="$session[sessionhash]" /> <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> <!-- / login form --> </if></td> <td> <img border="0" src="images/fox_01.jpg" width="24" height="40"></td> </tr> </table> </div>

    وفي النهاية انسخ الكود كاملا

    وضعه في اخر قالب الهيدر

    وستحصلون على


    هذا للزائر


    [​IMG]


    وهذا للعضو


    [​IMG]


    اما بالنسبة للصور



    فكل ما عليك عمله هو تحميل هذا الملف



    ظ…ط±ظƒط² طھط­ظ…ظٹظ„ ظپط±ظٹظ‚ ظپظˆظƒط³

    bl"eh"



    ورفع الصور الي فيه داخل مجلد الصور الرئيسية images





    وبهذا اكون انهيت شرحي

    bye1~`

    ان شاء الله اعجبكم شرحي المفصل والمتواضع​

     
  2. Dr.hac

    Dr.hac Developer

    الأنتساب:
    ‏8 سبتمبر 2011
    المشاركات:
    53
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    8
    الإقامة:
    IQ-TeaM
    رد: شرح تغيير مكان تسجيل الدخول بالتفصيل الممل مع اضافات رائعه

    جزاك الله الف خيير اخي الغالي ​
     

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