إعـــــــلان

تقليص
لا يوجد إعلان حتى الآن.

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

تقليص
هذا الموضوع مغلق.
X
X
 
  • تصفية - فلترة
  • الوقت
  • عرض
إلغاء تحديد الكل
مشاركات جديدة

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

    بسم الله الرحمن الرحيم
    السلام عليكم

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

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

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

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

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


    هذا للزائر



    وهذا للعضو




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

    كيف بالضبط

    لنبد

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

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




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



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



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



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



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



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



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

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



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



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



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



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

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

    ونضغط اوكي



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




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



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



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

    File >>> Save For Web

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

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

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

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



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

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



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

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


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

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



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



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



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



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



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



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



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



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



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



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



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



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



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



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


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

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


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

    ونبحث عن قالب

    Navbar

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



    كود:
    <if condition="$show['member']">
    كود:
    <td class="alt2" nowrap="nowrap">
    <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>
    <if condition="$show['popups']">
    <script type="text/javascript"> vBmenu.register("notifications"); </script>
    <else />
    <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
    <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications"); </script>
    </if>
    <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>
    </td>
    <else />
    <td class="alt2" nowrap="nowrap" style="padding:0px">
    <!-- login form -->
    <form action="login.php?do=login" 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?v=$vboptions[simpleversion]"></script>
    <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
    <tr>
    <td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</label></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" />$vbphrase[remember_me]</label></td>
    </tr>
    <tr>
    <td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>
    <td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" 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 -->
    </td>
    </if>

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





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


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


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

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


    كود:
    <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>

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





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


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


    كود:
    <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>

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





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

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

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

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





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





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


    images/xxx.gif


    وسيصبح هكذ





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






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





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





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





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


    أي هذا الكود

    كود:
    <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% انهينا عمل الكود والتصميم وتحضيره بالفرونت بيج


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


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


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

    كود:
    <div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">
    كود:
     
    &nbsp;</div>
    وهذا الكود عمله هو كأنه لير لكي يكون فوق الصور

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

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

    كود:
    <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>
    وفي النهاية انسخ الكود كاملا

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

    وستحصلون على

    هذا للزائر



    وهذا للعضو



    في اعلى المنتدى

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

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

    http://up.fox4h.com//view.php?file=cf9d5f0e44

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

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

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

    تحياتي
    خضر من فلسطين

    منقول للفائدة

  • #2
    رد: شرح تغيير مكان تسجيل الدخول وعمله بشكل مميز جداا بالتفصيل

    بارك الله فيك أستاذنا
    وفي صاحب الموضوع

    تعليق


    • #3
      رد: شرح تغيير مكان تسجيل الدخول وعمله بشكل مميز جداا بالتفصيل

      جزاك الله خيرا أخي أبو همام


      .

      تعليق


      • #4
        رد: شرح تغيير مكان تسجيل الدخول وعمله بشكل مميز جداا بالتفصيل

        شـكــ وبارك الله فيك ـــرا لك ...


        لك مني أجمل تحية .

        تعليق


        • #5
          رد: شرح تغيير مكان تسجيل الدخول وعمله بشكل مميز جداا بالتفصيل

          السلام عليكم ورحمة الله وبركاته
          شرح مميز وجميل جداً ماشاء الله
          مشكور أخي العزيز أبوهمام على هذا الموضوع المميز
          والشكر موصول لصاحب الشرح
          جزاكم الله كل خير

          تعليق


          • #6
            رد: شرح تغيير مكان تسجيل الدخول وعمله بشكل مميز جداا بالتفصيل

            شكرا لك أخي الكريم على الشرح
            أتمنى أن أمتلك مثل خبرتك عاجلا غير آجل

            موفق بإذن الله ... لك مني أجمل تحية .

            تعليق


            • #7
              رد: شرح تغيير مكان تسجيل الدخول وعمله بشكل مميز جداا بالتفصيل

              شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

              تعليق

              مواضيع تهمك

              تقليص

              المنتدى: القسم العام نشرت بواسطة: Reem2Rabeh الوقت: 04-23-2025 الساعة 04:27 PM
              المنتدى: ضبط وتوكيد الجودة نشرت بواسطة: HeaD Master الوقت: 04-15-2025 الساعة 09:30 AM
              المنتدى: التصنيع والانتاج نشرت بواسطة: HeaD Master الوقت: 04-11-2025 الساعة 01:08 PM
              المنتدى: القسم العام نشرت بواسطة: نوال الخطيب الوقت: 03-19-2025 الساعة 03:07 AM
              المنتدى: الكمبيوتر والإنترنت نشرت بواسطة: عوض السوداني الوقت: 03-18-2025 الساعة 07:22 AM
              يعمل...
              X