home الرئيسيةpeople_outline الأعضاء vpn_key دخول


chatالمواضيع الأخيرة
كلمات لهــا معنى access_timeالأحد يناير 20, 2019 10:42 pmpersonمحمد فهمي يوسف
طلب بتصميم غلافaccess_timeالأحد يناير 20, 2019 3:01 pmpersonAhmed Alshiqaqi
طلب كتابه علي شعارaccess_timeالأحد يناير 20, 2019 2:39 pmpersonمودي الشرقاوي
طلب بعمل غلاف فيس بوكaccess_timeالأحد يناير 20, 2019 9:37 ampersonAhmed Alshiqaqi
اريد تصميم غلاف لصفحة فيس access_timeالسبت يناير 19, 2019 11:05 pmpersonAhmed Alshiqaqi
تصميم بنر access_timeالسبت يناير 19, 2019 6:21 pmpersonرؤوف
1طلب بتغيير لون access_timeالجمعة يناير 18, 2019 3:18 pmpersonAhmed Alshiqaqi
طلب بتصميم شبيه باحترافيهaccess_timeالجمعة يناير 18, 2019 3:11 pmpersonAhmed Alshiqaqi
طلب تصميم شعارaccess_timeالجمعة يناير 18, 2019 11:26 ampersonAhmed Alshiqaqi
new_releasesأفضل 10 أعضاء في هذا الأسبوع

طريقة عرض الأقسام

لونك المفضل



تومبلايت قوالب تسجيل الدخول جاهزة للاستخدام

قوالب تسجيل الدخول جاهزة للاستخدام

قوالب تسجيل الدخول تومبلايت - مجموعه من قوالب تسجيل الدخول جاهزة للتركيب

#قوالب_تسجيل_الدخول

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

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

ويتكون من كلاس يوضع بالبودي بالمكان المناسب الذي ترغب به

ومن كود css

موفقين يارب

رد: تومبلايت قوالب تسجيل الدخول جاهزة للاستخدام

صورة القالب الاول قبل الدخول

https://i.servimg.com/u/f86/16/46/77/76/215.png
صورة بعد الدخول

https://i.servimg.com/u/f86/16/46/77/76/115.png

قالب الكلاس بقالب overall_header

الكود:


<div class="login-box clfx">
      <!-- BEGIN switch_user_logged_out -->
        <form action="login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)">
        <input type="text" class="bginput" name="username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="اسم العضو" onblur="if(this.value=='')this.value='اسم العضو' " onfocus="if (this.value == 'اسم العضو') this.value = '';" >
            <input type="password" class="bginput" name="password" id="navbar_password" size="10" tabindex="102" onblur="if(this.value=='')this.value='password ' " onfocus="if(this.value=='password ')this.value=''" value="password " >

            <div class="chboxx">
                <label>
                    <input type="checkbox" name="checkbox" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" >حفظ البيانات؟</label>
            </div>
            <input type="submit" class="button" name="login" value="دخول" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." accesskey="s" >
          </form>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="NameUsers"><strong>أهلاً وسهلاً بك <a>{LOGGED_AS}</a>.</strong></div>
<div class="ControlUser">
<ul>
<li><a rel="nofollow" class="simptip-position-bottom" title="لوحة التحكم الخاصة بك" id="usercptools" href="/profile?mode=editprofile" accesskey="3">
  <div class="fa fa-cogs"></div></a><script type="text/javascript"> vbmenu_register("usercptools"); </script></li>
<li><a class="simptip-position-bottom" title="الاشعارات" href="/profile?mode=editprofile&page_profil=notifications" accesskey="3"><div class="fa fa-comment"></div></a></li>
<li><a rel="nofollow" class="simptip-position-bottom" title="اشتراكاتك" href="/search?search_id=watchsearch" accesskey="3"><div class="fa fa-th-large"></div></a></li>
<li><a class="simptip-position-bottom" title="مشاركات اليوم" href="/search?search_id=newposts" accesskey="2"><div class="fa fa-th"></div></a></li>
</ul>
</div>


اكواد css

الكود:


.login__box {
    background-color: #34A773;
    height: 65px;
}

 .login__box .cntr {
    position: relative;
}
.login-box {
    float: left;
    margin-left: 20px;
    margin-top: 15px;
    width: 500px;
}
.login-box input[type="text"], .login-box input[type="password"] {
    border: 0 none;
    border-radius: 0;
    box-sizing: border-box;
    float: right;
    line-height: 25px;
    margin-left: 8px;
    padding: 4px;
    width: 144px;
}
.login-box input[type="submit"] {
    background-color: rgb(236, 153, 46);
    color: rgb(255, 255, 255);
    float: left;
    height: 36px;
    padding: 0;
    text-shadow: 0 0 0 rgb(255, 255, 255);
    width: 80px;
}
.chboxx {
    color: rgb(255, 255, 255);
    float: right;
    margin-top: 10px;
}
          .NameUsers {
    color: #FEFFFF;
    float: right;
    font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
    font-size: 0.8em;
    margin-left: 15px;
}
  .NameUsers a {
    color: #FEFFFF;
    text-decoration: none;
}
  .ControlUser {
    padding-bottom: 10px;
    padding-left: 10px;
}
  .ControlUser ul {
    margin: 4px 0 12px;
    padding: 0 0 0 40px;
}
  .ControlUser li {
    background: rgb(245, 245, 245) none repeat scroll 0 0;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    box-shadow: 0 0 1px rgb(204, 204, 204);
    color: rgb(112, 129, 144);
    display: inline-block;
    font-size: 21px;
    height: auto;
    margin: 0;
    padding: 0 3px;
    text-shadow: 0 1px 0 rgb(255, 255, 255);
    width: auto;
}


واضافة قبل </head>
كود الاتي :

الكود:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


علما ان خلفية الخضراء هي حسب خلفية الهيدر او النافبار الموضوع

انتهى اول قالب من قوالب الدخول

رد: تومبلايت قوالب تسجيل الدخول جاهزة للاستخدام

تومبلايت قالب تسجيل رقم 2

صورة للقالب قبل الدخول

https://i.servimg.com/u/f86/16/46/77/76/414.png
بعد الدخول

https://i.servimg.com/u/f86/16/46/77/76/315.png
الكلاس بقالب

الكود:


<div class="loginbox">
  <!-- BEGIN switch_user_logged_out -->
      <form action="login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)">
      <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=387"></script>
      
      
<input type="text" class="bginput" name="username" id="navbar_username" accesskey="u" tabindex="101" value="اسم العضو" onblur="if(this.value=='')this.value='اسم العضو' " onfocus="if (this.value == 'اسم العضو') this.value = '';" >
<input type="password" class="bginput" name="password" id="navbar_password" tabindex="102"  onblur="if(this.value=='')this.value='password ' " onfocus="if(this.value=='password ')this.value=''" value="password " >
<label for="cb_cookieuser_navbar" class="rmmbrme"><input type="checkbox" name="autologin" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" >تذكرني!</label>
<input type="submit" name="login" class="button" value="دخـول" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." accesskey="s" >
      <input type="hidden" name="s" value="" >
      <input type="hidden" name="securitytoken" value="guest" >
      <input type="hidden" name="do" value="login" >
      <input type="hidden" name="vb_login_md5password" >
      <input type="hidden" name="vb_login_md5password_utf" >
      </form>
  <!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
      <strong>أهلا وسهلا بكـ <a>{LOGGED_AS}</a>.</strong>
    <!-- END switch_user_logged_in -->             
<div class="clr"><!--  --></div>
</div>


اكواد css

الكود:


       
.loginbox {
    float: right;
    margin: 3px 0 0;
    width: 500px;     
}         

.loginbox input.bginput[type="text"] {
    background-position: right top;
    margin-left: 1px;
}
.loginbox input.bginput[type="text"], .loginbox input.bginput[type="password"] {
    background-color: rgba(0, 0, 0, 0);
    background-image: url("http://i84.servimg.com/u/f84/16/46/77/76/img_0911.png");
    background-position: -104px top;
    background-repeat: no-repeat;
    border: 0 none;
    color: rgb(163, 163, 163);
    float: right;
    font-family: tahoma;
    font-size: 9pt;
    font-weight: normal;
    height: 33px;
    outline: 0 none;
    padding: 0 38px 0 3px;
    text-shadow: 0 1px 0 rgb(255, 255, 255);
    width: 100px;
}         
.rmmbrme {
    color: rgb(255, 255, 255);
    float: right;
    font-size: 13px;
    line-height: 40px;
    padding: 0 4px;
}
         

input[type="radio"], input[type="checkbox"] {
    -moz-binding: none;
    background-color: -moz-field !important;
    block-size: 13px;
    border: 2px inset threedlightshadow !important;
    box-sizing: border-box;
    color: -moz-fieldtext !important;
    cursor: default;
    inline-size: 13px;
    padding: 0 !important;
}         
         
 
.loginbox .button {
    background-color: rgba(0, 0, 0, 0);
    background-image: url("http://i84.servimg.com/u/f84/16/46/77/76/img_0911.png");
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    display: block;
    font-family: "Droid Arabic Kufi";
    font-size: 13px;
    font-weight: normal;
    height: 34px;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 0 rgb(8, 105, 122);
    width: 102px;


دمتم بخير

رد: تومبلايت قوالب تسجيل الدخول جاهزة للاستخدام

حصصريآ قالب تسجيل دخول متعدد الألوآن ~!♥
صورهه للقآلب
https://i.servimg.com/u/f86/18/98/57/88/ashamp14.png
https://i.servimg.com/u/f86/18/98/57/88/ashamp15.png
https://i.servimg.com/u/f86/18/98/57/88/ashamp16.png
https://i.servimg.com/u/f86/18/98/57/88/ashamp17.png
الكلاس بقالب ~!♥

الكود:

<script type='text/javascript' src="http://googledrive.com/host/0B7G5xQF5gc3vbmhfTnVtQjlJb28"></script>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B7G5xQF5gc3vdDVlb0VLcmkybUk" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue" href="https://googledrive.com/host/0B7G5xQF5gc3vZC1qN1F0WEZDOUE" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="green" href="https://googledrive.com/host/0B7G5xQF5gc3vRUhPQWgxV1IzWTg" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="ward" href="https://googledrive.com/host/0B7G5xQF5gc3vdm15Qk1neER1T0k" />
<div class="Nav">
<a href="javascript:chooseStyle('blue', 60)"><div class="blue"></div></a>
<a href="javascript:chooseStyle('red', 60)"><div class="red"></div></a>
<a href="javascript:chooseStyle('green', 60)"><div class="green"></div></a>
<a href="javascript:chooseStyle('ward', 60)"><div class="ward"></div></a>
<!-- BEGIN switch_user_logged_out -->
<div class="lo-gin">
<!-- login form -->
      
   <div style="position:relative">
      
      <form style="margin:0px;padding:0px" action="login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)">
      <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=387"></script>

<input type="text" class="usr-name1" style="font-size: 13px" name="username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="اسم العضو" onblur="if(this.value=='')this.value='اسم العضو' " onfocus="if (this.value == 'اسم العضو') this.value = '';">
<input type="password" class="pas-swd1" style="font-size: 13px" name="password" id="navbar_password" size="10" tabindex="102" value="password" onblur="if(this.value=='')this.value='password' " onfocus="if (this.value == 'password') this.value = '';">
<input type="submit" class="but-tonx2" name="login" value="دخول" tabindex="104" />
      <input type="hidden" name="s" value="">
      <input type="hidden" name="securitytoken" value="guest">
      <input type="hidden" name="do" value="login">
      <input type="hidden" name="md5password">
      <input type="hidden" name="md5password_utf">
      </form>
      <!-- END switch_user_logged_out -->
      <!-- / login form -->

</div></div>
</div>

اكواد css ~!♥

الكود:

.Nav {
   background-color:#077686;
   height:49px;
   background-repeat:repeat-x;
}

.lo-gin {
  width: 400px;
  height: 43px;
  float:right;
  margin-top:9px;
  margin-right:10px;
}

.usr-name1, .pas-swd1 {
    float: right;
    border: 0px;
    background-color: #0a5864;
    border: solid 1px #138c9f;
    padding: 5px;
    text-align: center;
    line-height: 18px;
    margin: 0px 0px 0px 12px;
    width: 130px;
    outline: 0px;
   }

.usr-name1 {
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family:Tahoma;
}

.pas-swd1 {
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family:Tahoma;
}

.but-tonx2 {
    font-family:Tahoma;
    color: #fff;
    border: 0px;
    cursor: pointer;
    width: 80px;
    height:28px;
    float:right;
    color: #fff;
    background-color: #0a5864;
    border: solid 1px #138c9f;
    text-shadow: 0 0 0 #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-top:1px;
}

.blue {
   background-color:#0a5864;
   height:30px;
   width:30px;
   float:left;
   background-repeat:no-repeat;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top:10px;
    margin-left:5px;
}

.red {
   background-color:#b30f0f;
   height:30px;
   width:30px;
   float:left;
   background-repeat:no-repeat;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top:10px;
    margin-left:5px;
}

.green {
   background-color:#16870a;
   height:30px;
   width:30px;
   float:left;
   background-repeat:no-repeat;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top:10px;
    margin-left:5px;
}

.ward {
   background-color:#850e93;
   height:30px;
   width:30px;
   float:left;
   background-repeat:no-repeat;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top:10px;
    margin-left:5px;
}




ارسال رد

هــــــام

ندعوك للتسجيل في المنتدى لتتمكن من ترك رد أو تسجيل الدخول اذا كنت من اسرة المنتدى

صلاحيات هذا الموضوع
لاتستطيع الرد على المواضيع في هذا المنتدى