ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

آموزش ها , مقالات,آموزش,ترفند , وردپرس

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

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

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

/* By mohammad javad - www.20script.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;
}

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 1 آموزش ها , مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=7761
کلمات کلیدی پست :
مطالب مرتبط
1,364حذف لرزش پسورد اشتباه در ورود به وردپرس تاریخ : 2024/01/21
12,241دانلود قالب قدیمی فامو برای وردپرس تاریخ : 2014/12/30
6,872آموزش ساخت دامنه در لوکال هاست تاریخ : 2019/08/17
25,951کار نکردن فایل ترجمه قالب وردپرس تاریخ : 2015/08/10
347,993افزونه افزایش سرعت سایت وردپرسی WP Rocket نسخه 3.15.8.1 تاریخ : 2024/01/25
11,671افزونه بهینه سازی و سئو با CyberSEO Lite v6.2 برای وردپرس تاریخ : 2014/05/18
8,005۶ ابزارک با موضوع جام جهانی برای وردپرس تاریخ : 2014/06/6
10,012پوسته فروشگاهی و چندفروشندگی Marketo برای ووکامرس تاریخ : 2018/09/20
10,172افزونه وردپرس کوتاه کردن لینک مطالب Pretty Link Lite تاریخ : 2017/04/3
19,043افزونه ارسال خودکار مطالب به تلگرام WP Telegram تاریخ : 2017/10/21
10,456چرا یواست سئو محتوای صفحه را در نظر نمی‌گیرد؟ تاریخ : 2020/10/6
31,796افزونه جلوگیری از کپی متن و تصاویر در وردپرس Smart Content Protector تاریخ : 2019/08/25
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file