[BBcode] غير شكل الدخول , وجعله مثل موقع التويتر Twitter Style

Mohamed Ali

[ VIP ]
24 مارس 2010
670
4
0

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

معنا اليوم تعديل في غايه الروعه والجمال ,
وهو جعل شكل الدخول , مثل موقع التويتر

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

attachment.php



وعند الضغط علي دخول , سوف تنزل قائمة مندسلة ليضع فيها الاسم والرقم السري .

attachment.php


وطبعا في الفير فوكس يكون شكلها اجمل مع الانحنائات الجانبية .


المهم
طريقة التركيب ياريت تركزوا شوي عشان نطلع بدون اي خطاء .

اولاً حمل الملف المرفق باسم login
وفك الضغط عنه بتلاقي مجلد باسم login قم برفعه كاملاً لمجلد منتداك
يعني يكون علي الشكل التالي
/vb/login/

ويوجد ملف اخر بالتعديلات التي يجب ان تقوم بها في القوالب , وسوف نشرحها هنا مره اخرى .


بعد رفع المجلد login يبقي لدينا التعديلات علي القوالب


التعديل الاول
افتح قالب الـadditional.css
وضع فيه الكود التالي
كود:
/* TheWindows7Site Custom Login */
#container {
    float:right;
    margin:0 auto;
    position: relative;
}
a img {
    border-width:0; 
}
#topnav {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
}
#topnav a.signin {
    background:#0d3156;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url("./login/images/signin-nav-bg-ie.png")  no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin:hover {
    background:#15579b;
    *background:transparent  url("./login/images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
    *background-position:0 3px!important;
}
a.signin {
    position:relative;
    margin-left:3px;
}
a.signin span {
    background-image:url("./login/images/toggle_down_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    padding:4px 16px 6px 0;
}
#topnav a.register {
    background:#0d3156;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url("./login/images/signin-nav-bg-ie.png")  no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.register:hover {
    background:#15579b;
    *background:transparent  url("./login/images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.register, #topnav a.register:hover {
    *background-position:0 3px!important;
}
a.register {
    position:relative;
    margin-left:0px;
}
a.register span {
    background-image:url("./login/images/register_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    padding:4px 16px 6px 0;
}
 
#topnav a.menu-open {
    background:#0d3156!important;
    color:#fff!important;
    outline:none;
}
#small_signup {
    display:inline;
    float:none;
    line-height:23px;
    margin:25px 0 0;
    width:170px;
}
a.signin.menu-open span {
    background-image:url("./login/images/toggle_up_light.png");
    color:#fff;
}
#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
   /* background-color:#0d3156; */
    background:url(login/images/login_back.png) #0d3156 repeat-x;
    position:absolute;
    width:210px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    padding:12px;
    top: 24.5px; 
    right: 0px; 
    margin-top:5px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#fff;
    font-size:11px;
}
#signin_menu input[type=text], #signin_menu input[type=password] {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #0d3156;
    background:url(login/images/field_back.png) repeat-x;
    font-size:13px;
    margin:0 0 5px;
    padding:5px;
    width:203px;
}
#signin_menu p {
    margin:0;
}
#signin_menu a {
    color:#fff;
}
#signin_menu label {
    font-weight:normal;
}
#signin_menu p.remember {
    padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
    clear:both;
    margin:5px 0;
}
#signin_menu p a {
    color:#fff!important;
}
#signin_menu p a:hover {
    text-decoration:underline;
}
#signin_submit {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background-color:#0d3156;
    border:1px solid #fff;
    color:#fff;
    text-shadow:0 -1px 0 #39d;
    padding:4px 10px 5px;
    font-size:11px;
    margin:0 5px 0 0;
    font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
    background-position:0 -5px;
    cursor:pointer;
}
/* TheWindows7Site Custom Login */
التعديل الثاني
اتفح قالب الـ header
وابحث عن
كود:
<div id="toplinks" class="toplinks">
  <vb:if condition="$show['member']">
   <ul class="isuser">
    <li><a href="login.php?{vb:raw  session.sessionurl}do=logout&logouthash={vb:raw  bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase  sure_you_want_to_log_out}')">{vb:rawphrase  log_out}</a></li>
    <vb:if condition="$show['registerbutton']">
    <li><a href="register.php{vb:raw session.sessionurl_q}"  rel="nofollow">{vb:rawphrase register}</a></li>
    </vb:if>
    <li><a href="usercp.php{vb:raw  session.sessionurl_q}">{vb:rawphrase  control_panel}</a></li>
    <li><a href="{vb:link member, {vb:raw  bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
    <vb:if condition="$notifications_total">
    <li class="popupmenu notifications" id="notifications">
     <a class="popupctrl" href="usercp.php{vb:raw  session.sessionurl_q}">{vb:rawphrase your_notifications}: <span  class="notifications-number"><strong>{vb:raw  notifications_total}</strong></span></a>
     <ul class="popupbody popuphover">
      {vb:raw notifications_menubits}
     </ul>
    </li>
    <vb:else />
    <li class="popupmenu nonotifications" id="nonotifications">
     <a class="popupctrl" href="usercp.php{vb:raw  session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
     <ul class="popupbody popuphover">
      <li>{vb:rawphrase no_new_messages}</li>
      <li><a href="private.php{vb:raw  session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
     </ul>
    </li>
    </vb:if>
    <li class="welcomelink">{vb:rawphrase welcome_x_link_y,  {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw  bbuserinfo}}}</li>
   </ul>
            {vb:raw template_hook.header_userinfo}
   <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw  pmbox.lastvisitdate}, {vb:raw  pmbox.lastvisittime}}</p></vb:comment>
  <vb:else />
   <ul class="nouser">
   <vb:if condition="$show['registerbutton']">
    <li><a href="register.php{vb:raw session.sessionurl_q}"  rel="nofollow">{vb:rawphrase register}</a></li>
   </vb:if>
    <li><a rel="help" href="faq.php{vb:raw  session.sessionurl_q}">{vb:rawphrase help}</a></li>
    <li>
   <script type="text/javascript"  src="clientscript/vbulletin_md5.js?v={vb:raw  vboptions.simpleversion}"></script>
   <form action="login.php?{vb:raw session.sessionurl}do=login"  method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password,  vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
    <fieldset id="logindetails" class="logindetails">
     <div>
      <div>
     <input type="text" class="textbox default-value"  name="vb_login_username" id="navbar_username" size="10" accesskey="u"  tabindex="101" value="<vb:if condition="$username">{vb:raw  username}<vb:else />{vb:rawphrase username}</vb:if>"  onfocus="if (this.value == '<vb:if condition="$username">{vb:raw  username}<vb:else />{vb:rawphrase  username}</vb:if>'){this.value=''; this.style.color='black';}"  onblur="if (this.value == '') {this.value='<vb:if  condition="$username">{vb:raw username}<vb:else />{vb:rawphrase  username}</vb:if>'; this.style.color='#828282';}"/>
     <input type="password" class="textbox default-value"  tabindex="102" name="vb_login_password" id="navbar_password" size="10"  onfocus="this.style.color='black';" />
     <input type="submit" class="loginbutton" tabindex="104"  value="{vb:rawphrase log_in}" title="{vb:rawphrase  enter_username_to_login_or_register}" accesskey="s" />
      </div>
     </div>
    </fieldset>
    <div id="remember" class="remember">
     <label for="cb_cookieuser_navbar"><input type="checkbox"  name="cookieuser" value="1" id="cb_cookieuser_navbar"  class="cb_cookieuser_navbar" accesskey="c" tabindex="103" />  {vb:rawphrase remember_me}</label>
    </div>
    <input type="hidden" name="s" value="{vb:raw  session.sessionhash}" />
    <input type="hidden" name="securitytoken" value="{vb:raw  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>
    </li>
   </ul>
  </vb:if>
 </div>
استبدله بـ
كود:
<div id="toplinks" class="toplinks">
  <vb:if condition="$show['member']">
   <ul class="isuser">
    <li><a href="login.php?{vb:raw  session.sessionurl}do=logout&logouthash={vb:raw  bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase  sure_you_want_to_log_out}')">{vb:rawphrase  log_out}</a></li>
    <vb:if condition="$show['registerbutton']">
    <li><a href="register.php{vb:raw session.sessionurl_q}"  rel="nofollow">{vb:rawphrase register}</a></li>
    </vb:if>
    <li><a href="usercp.php{vb:raw  session.sessionurl_q}">{vb:rawphrase  control_panel}</a></li>
    <li><a href="{vb:link member, {vb:raw  bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
    <vb:if condition="$notifications_total">
    <li class="popupmenu notifications" id="notifications">
     <a class="popupctrl" href="usercp.php{vb:raw  session.sessionurl_q}">{vb:rawphrase your_notifications}: <span  class="notifications-number"><strong>{vb:raw  notifications_total}</strong></span></a>
     <ul class="popupbody popuphover">
      {vb:raw notifications_menubits}
     </ul>
    </li>
    <vb:else />
    <li class="popupmenu nonotifications" id="nonotifications">
     <a class="popupctrl" href="usercp.php{vb:raw  session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
     <ul class="popupbody popuphover">
      <li>{vb:rawphrase no_new_messages}</li>
      <li><a href="private.php{vb:raw  session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
     </ul>
    </li>
    </vb:if>
    <li class="welcomelink">{vb:rawphrase welcome_x_link_y,  {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw  bbuserinfo}}}</li>
   </ul>
            {vb:raw template_hook.header_userinfo}
   <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw  pmbox.lastvisitdate}, {vb:raw  pmbox.lastvisittime}}</p></vb:comment>
  </vb:if>
 </div>
التعديل الثالث والاخير
افتح قالب الـnavbar
وابحث عن
كود:
<div class="body_wrapper">
اضف بعده
كود:
<!-- TheWindows7Site Custom Login -->
<vb:if condition="$show['guest']">
<script src="login/javascripts/jquery.js"  type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $(".signin").click(function(e) {
                e.preventDefault();
                $("fieldset#signin_menu").toggle();
                $(".signin").toggleClass("menu-open");
            });
            $("fieldset#signin_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if($(e.target).parent("a.signin").length==0) {
                    $(".signin").removeClass("menu-open");
                    $("fieldset#signin_menu").hide();
                }
            });            
        });
</script>
<script type="text/javascript"  src="clientscript/vbulletin_md5.js?v={vb:raw  vboptions.simpleversion}"></script>
<div id="container">
  <div id="topnav" class="topnav"> هل لديك حساب <a href="login"  class="signin"><span>دخول</span></a> <a  href="./register.php"  class="register"><span>التسجيل</span></a>  </div>
  <fieldset id="signin_menu">
    <form method="post" id="signin" action="login.php?{vb:raw  session.sessionurl}do=login" onsubmit="md5hash(vb_login_password,  vb_login_md5password, vb_login_md5password_utf, {vb:raw  show.nopasswordempty})">
      <label for="username">الاسم</label>
<input id="navbar_username" type="text" value="" tabindex="101"  accesskey="u" name="vb_login_username" />
      </p>
      <p>
        <label for="password">الرقم السري</label>
<input id="navbar_password" type="password" value="" tabindex="102"  accesskey="u" name="vb_login_password" />
      </p>
      <p class="remember">
        <input type="submit" id="signin_submit" value="دخول"  tabindex="104" title="Login" accesskey="s" />
        <input id="cb_cookieuser_navbar" type="checkbox"  accesskey="c" tabindex="103" value="1" name="cookieuser"  checked="checked"/>
        <label for="cb_cookieuser_navbar">تذكرني ؟</label>
      </p>
      <p class="forgot"> <a  href="./login.php?do=lostpw">نسيت الرقم السري ؟</a> </p>
      <p class="forgot-username"> <A title="لا تنسى ان تضع  بريدك في الرسالة." 
href="./sendmessage.php">نسيت اسم العضوية ؟</A> </p>
                <input type="hidden" name="s" value="{vb:raw  session.sessionhash}" />

                <input type="hidden" name="securitytoken"  value="{vb:raw 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>
  </fieldset>
</div>
</vb:if>
<!-- TheWindows7Site Custom Login -->
فقط وتمتع بشكل تسجيل الدخول الجميل , والشبية بموقع تويتر ,


المصدر
http://www.vbulletin.org/forum/showthread.php?t=238152



تحياتي لكم​


 

المرفقات

  • login.zip
    27 KB · المشاهدات: 224
  • 03.jpg
    03.jpg
    22.5 KB · المشاهدات: 871
  • 02.jpg
    02.jpg
    4.2 KB · المشاهدات: 733