• اسکریپت,قالب جوملا,قالب وردپرس,مرجع اسکریپت,نال شده,نال

  • تبلیغات



    موضوعات

    به پایگاه تخصصی اسکریپت پارسی زبانان خوش آمدید.
    648x60




    طرح آبی برای فرم ورود وردپرس + آموزش

    طرح آبی برای فرم ورود وردپرس + آموزش

    تاریخ : شنبه، 2 آگوست 2014
    1دیدگاه
    نوشته:مدیر

    مدتی پیش آموزشی رو در سایت با عنوان ویرایش صفحه ورود وردپرس منتشرکرده بودیم که به شکلی ساده، دست به ایجاد تغییر و تحول در فرم پیشفرض وردپرس می زد. امروز هم در تکمیل همون پست یک استایل پیشرفته تر رو آماده کردیم که با استفاده از اون می تونید فرم ورودتون را چند برابر زیباتر کنید.

    طرح آبی برای فرم ورود وردپرس + آموزش

    جهت استفاده از این استایل، طبق آموزش قبل، تابع custom_login (برای مشاهده تابع اینجا کلیک کنید) رو در توابع پوسته قرار داده  و استایل زیر رو با کدهای شیوه نامه custom-login.css جایگزین کنید.
    * توجه داشته باشید که در این استایل جدای از تصویر لوگو که در سلکتور login #login h1 a تعریف شده، دو تصویر پس زمینه دیگه هم وجود داره که با دانلود فایل پیوستی میتونید به اون تصاویر دسترسی داشته باشید (فقط حواستون باشه که پس از بارگذاری تصاویر، آدرس دهی ها هم طبق محل قرارگیری، تغییر خواهند کرد). فرم ورود وردپرس

     

     

    /* By scriptbaz.ir*/
    
    body.login, html {
    	background: url(images/backg.png) -5px repeat;
    	margin: 0 auto;
    }
    
    .login #login h1 a {
    	background: url(images/yourlogo.png) 0px 0 no-repeat transparent;
    	width:310px;
    	height:170px;
    	margin-right:10px;
    	margin-top:-90px;
    }
    
    label{
    	color:#ebebeb !important;
    }
    
    .login #loginform, .login #registerform, .login #lostpasswordform{
    	width:333px;
    	height: 352px;
    	padding: 58px 76px 0 76px;
    	border: none;
    	margin:-20px -75px;
    	box-shadow: none;
    	background: url(images/login-box-backg.png) no-repeat left top;
    }
    
    /* Input */
    .login input[type="text"], .login input[type="password"]{
    	margin-top:10px;
    	padding: 10px 10px 6px 10px;
    	border: 1px solid #0d2c52;
    	background-color:#1e4f8a;
    	font-size: 18px;
    	color: #ebebeb;
    }
    
    .login input[type="text"]:focus, .login input[type="password"]:focus {
      color: white;
      background: rgba(0, 0, 0, 0.1);
      outline: 0;
    }
    
    .login input[type="password"] {
    	margin-top: 10px;
    }
    
    /* submit */
    .login #wp-submit{
    	color: white;
    	height:40px;
    	padding: 0 20px;
    	font-size:16px;
    	font-weight:bold;
    	float: left;
        background-color: #0064cd;
        background-repeat: repeat-x;
        background-image: linear-gradient(to bottom, #049cdb, #0064cd);
        border: 1px solid #ccc;
        border-color: #0064cd #0064cd #003f81;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    	-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
    	transition: all .2s ease;
    }
    
    .login #wp-submit:hover {
        background-position: 0 -15px;
        text-decoration: none;
    }
    
    .login #wp-submit:active {
        -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);
    }
    
    .login #nav{
        color: #fff;
        margin:-130px -10px 0 0;
    }
    
    .login #backtoblog{
        color: #fff;
    	margin-right:-10px;
    }
    
    .login #nav a ,.login #backtoblog a{
    	text-decoration:none;
    	text-shadow:none;
    	color:#ebebeb !important;
    }
    
    .login #nav a:hover ,.login #backtoblog a:hover{
    	color:#fcfe43 !important;
    }

     

    دانلود
    حجم:


    تبلیغات



    آخرین ارسال ها

    نرم افزارهای ضروری

    XAMPP XAMPP
    5.6.8
    NotePad++ NotePad++
    6.8.1
    FileZilla FileZilla
    3.7.3

    تبلیغات متنی

    [DBSAdWord]
    با عضویت در خبرنامه ی ما از آخرین مطالب ما در ایمیل خود با خبر شوید