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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف زائر في الأحد أبريل 10, 2016 8:34 am


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

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

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

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

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

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

ومن كود css

موفقين يارب


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في الأحد أبريل 10, 2016 8:34 am


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

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

https://i86.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">

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

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


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في الأحد أبريل 10, 2016 9:11 am


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

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

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

https://i86.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;

دمتم بخير


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف SuperMan في الإثنين أبريل 11, 2016 1:15 pm


حصصريآ قالب تسجيل دخول متعدد الألوآن ~!♥
صورهه للقآلب
https://i86.servimg.com/u/f86/18/98/57/88/ashamp14.png
https://i86.servimg.com/u/f86/18/98/57/88/ashamp15.png
https://i86.servimg.com/u/f86/18/98/57/88/ashamp16.png
https://i86.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;
}





SuperMan
بصمة خالدة
بصمة خالدة

الجنس : ذكر

العقرب

عدد المساهمات : 8911

نقاط النشاط : 11127

السٌّمعَة : 173

بلد العضو :

العمر : 17


http://www.ibda3araby.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

سجل دخولك لتستطيع الرد بالموضوع

لابد تكون لديك عضوية لتستطيع الرد سجل الان

سجل معنا الان

انضم الينا بمنتدي الابداع العربي فعملية التسجيل سهله جدا ؟


تسجيل عضوية جديدة

سجل دخولك

لديك عضوية هنا ؟ سجل دخولك من هنا .


سجل دخولك

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