درس شرح تغيير مكان تسجيل الدخول والرسائل الخاصة بشكل مميز بلغة css







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

 مرحبا بكل اعضاء وزوار ترايدنت الكرام اهلا ومرحبا بكم في درس متواضع بلغة css لغة العصر اليوم اقدم فكرة مميزة جدا في تغيير مكان تسجيل الدخول بالمنتدى قام باستخدامها في استايلة الرمضاني الاخ المميزقناص جوبا والان نطرح لكم كيف تم عملها لنبدأ ع البركة

1- قم باستخدام برنامج الفوتوشوب في تصميم شكل كالاتي وهو شكل بسيط كل حسب مايريد

طبعا الشكل تم تصميمة طبقا للاستايل الافتراضي تابع معي 2-صمم شكل مربع دخول كالاتي

وليكونا اثنين كهذا الشكل 3-صمم زر مكتو ب علية دخول الاعضاء او تسجيل او كما تريد وهذا مثال

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

اومن اول هذا الكود في السطر 22

رمز PHP:
<if condition="$show['member']"

لغاية السطر 68 او الكود

رمز PHP:
<!-- / login form -->
    </
td>
</if> 

الموضح بالصورة

ليصبح بالشكل التالي

الان لعبة الاكواد المفضلة لدي استعد الان نقوم بالتعديل وكتابة الاكواد الخاصة وتعديل الناف بار . نبدا اول قم بتغيير اسماء الصور كما بالشكل

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

رمز PHP:
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>

استبدل هذ القالب بهذا الكود المعدل

رمز PHP:
<if condition="$show['member']">
<
div class="login">
    <
div class="log">
    <
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>
    </div>
    </div>

<else />

<div class="login">
    <div class="log">
        <!-- 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><input type="text" class="bginput1"  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>
        </tr>
        <tr>
            <td><input type="password" class="bginput2"  style="font-size: 11px" name="vb_login_password" id="navbar_password"  size="10" tabindex="102" /></td>
        </tr>
        <tr>
            <td class="smallfont" nowrap="nowrap">
            <input style="vertical-align:middle;" type="submit"  class="button_l" value="" tabindex="104"  title="$vbphrase[enter_username_to_login_or_register]" accesskey="s"  />
            <input style="vertical-align:middle;" type="checkbox"  name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar"  accesskey="c" /></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 -->

    </div>
</div>

</if> 

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

قم بنسخ الكود الى قالب الهيدر انسخة في اول الهيدر والان ركز معايا حتة جد فاكر الصور اللى قولتلك انسخها في مجلد الصور في في مجلد استايلك دلوقتي وقت اكواد css

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

خياراتcss

رمز PHP:
.login {
    
background:url(images/login.jpgno-repeat;
    
float:right;
    
height:221px;
    
position:absolute;
    
right:0;
    
width:176px;
    
margin-top:210px;
    
z-index:9999;
}
.
logo {
    
float:right;
    
left:auto;
    
right:0px;
    
position:absolute;
}
.
log {
    
position:absolute;
    
top:102px;
    
right:1px;
    
color:#FFF;
    
margin-right:3px;
    
padding-right:1px;
    
padding-left:10px;
}
.
bginput1 {
    
background:url(images/bginput.jpgno-repeat top center;
    
height:37px;
    
width:157px;
    
font:12px TahomaGenevasans-serif;
    
text-align:center;
    
color:#6a5d44;
    
border:none;
}
.
bginput2 {
    
background:url(images/bginput.jpgno-repeat top center;
    
height:37px;
    
width:157px;
    
font:12px TahomaGenevasans-serif;
    
text-align:center;
    
color:#6a5d44;
    
border:none;
}
.
button_l {
    
background:url(images/button.jpgno-repeat top center;
    
height:34px;
    
width:102px;
    
border:none;
    
cursor:pointer;
}
.
smallfont {
    
font:12px tahoma

بالصور

لتصبح النتيجة النهائية كالاتي وان شاء الله تكون مميزة واعجبتكم اخواني شوف الصور

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

http://www.traidnt.net/vb/showthread.php?t=1647404