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

دسته‌ها : آموزش, سی اس اس علی میرزائی 19 دیدگاه‌ها

استایل آبی برای فرم ورود

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

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

/* By Ali Mizaei - www.alimir.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;
}
راستی اگه این پست رو مفید دیدید، لایک فراموشتون نشه ;)

دیدگاه کاربران در مورد این نوشته

  1. آره ، اما درست نمیشه ! باشه ممنون ، کاش میتونستید خودتون توضیح میدادید ، انجمن طول میکشه تا به جواب برسم

    توسط mani پاسخ

    1. به شخصه تا حالا با این مورد مواجه نشدم! شاید در انجمن، برخی دوستان تجربه اش رو داشته باشن و بتونن بهتون کمک کنن.

      توسط علی میرزائی پاسخ

  2. آقا علی درست نمیشه :(

    توسط mani پاسخ

    1. موارد توضیح داده شده رو به دقت دنبال کردید؟!؟ (مثلا ست کردم مقادیر کوکی یا غیر فعال کردن افزونه ها و…)
      مشکلتون رو در انجمن هم مطرح کنید:
      forum.wp-parsi.com

      توسط علی میرزائی پاسخ

  3. هر کاری میکنم جواب نمیده ، همش همون ارور رو میده :(

    توسط Mani پاسخ

  4. خطا: کوکی‌ها از کار افتاده‌اند یا کاوشگر شما از کوکی‌ها پشتیبانی نمی‌کند. شما باید برای به کارگیری وردپرس کوکی‌ها را فعال کنید :(
    چرا ؟

    توسط Mani پاسخ

    1. لینک های زیر رو بررسی کنید:
      http://wpdevshed.com/faqs-wordpress-login-errors/
      http://tiny.alimir.ir/tx
      http://wordpress.org/support/topic/cookie-error-when-logging-in

      توسط علی میرزائی پاسخ

  5. pingback
  6. pingback
  7. سلام داداش
    بالاخره وقت کردم و اومدم.
    کد جدیدت خیلی جالبه, و جایگزین کد قبلی کردم :)
    اینم نمونه :
    http://www.xgraphic.ir/wp-login.php
    موفق باشی

    توسط Reza Alizadeh پاسخ

  8. علی عزیز . لطف میکنید یک ایمیل بدید تا باهاتون در ارتباط باشم . من به شدت احتیاج دارم که راهنمایی کنید در این مورد بهم

    توسط Dr.Global پاسخ

    1. والا حجم ایمیل های دریافتی من یه مقدار بالاست و با توجه به محدودیت فضای ایمیل نمیتونم به تک تک پرسش ها پاسخ کاملی بدم.
      لطفا سؤال ها رو در سامانه پرسش و پاسخ سایت مطرح کنید.

      توسط علی میرزائی پاسخ

  9. خیلی باحاله داداش
    اما الان که دارم اسباب کشی میکنم, در اولین فرصت میام و هم این کد رو تو سایتم درست میکنم, هم یه طراحی حرفه ای واست میزنم :)
    روزگار به کام

    توسط رضا علیزاده پاسخ

    1. اصلا قابلی نداشت، ایشالا در آینده باز رو طرح هایی جدید کار میکنم… 😉
      فدایت، ایشالا که با خوشی و موفقیت همراه باشه…
      روزگارت شیک…

      توسط علی میرزائی پاسخ

  10. سلام
    متاسفانه بعد از انجام تغیرات سایت دیگه بالا نمیاد !

    توسط Dr.Global پاسخ

    1. سلام،
      احتمالا در جایی اشتباه کردید. حدس میزنم مشکلتون در محل قراردهی کد فانکشن باشه!

      توسط علی میرزائی پاسخ

  11. سلام چه طوری میتونم به سایتم گزینه عضویت رو هم اضافه کنم تا مردم عضو سایتم بشن ممنون میشم کمکم کنید.آدرس سایتم:
    pbsaba.ir

    توسط مجتبی اطهری پاسخ

    1. سلام،
      خیلی سادست…
      در بخش تنظیمات > همگانی تیک گزینه “هرکسی می تواند نام نویسی کند” رو بزنید و تغییرات رو ذخیره کنید.

      توسط علی میرزائی پاسخ

      1. ممنون دوست عزیز

        توسط مجتبی اطهری پاسخ

دیدگاه خود را بیان کنید