Пользователь Customizer не меняет фон формы регистра

Я использую плагин «Login Customizer», чтобы изменить внешний вид моей учетной записи / страницы регистрации. При обращении к фону формы я понимаю, что фоновый цвет формы формы регистрации и цвет фона с потерянным паролем не применяется. Он работает для страницы входа, но не регистрации.

Я что-то упустил или это такое намерение?

Кстати, можно ли изменить цвет сообщений, например, белую полосу, которая появляется при вводе неправильного пароля?

Некоторое время назад я отказался от плагинов, чтобы настроить вход в WordPress. Теперь я создаю плагин, который связывает пользовательский CSS в мою тему и редактирует все, что дает мне больший контроль над стилем входа. В тот же день большинство добавит файл functions.php в текущий каталог тем, но теперь я предпочитаю использовать плагин, поскольку его просто отключает плагин, если вы нанесете какой-либо реальный ущерб вашему сайту.

Создание плагина

Сначала создайте плагин, заголовок в wp-content/plugins/ и создание каталога с именем my-custom-login . В этой папке создайте файл с именем my-custom-login.php

Откройте файл и вставьте:

 <?php /** * Plugin Name: My Custom Login * Plugin URI: http://mycustom.login * Description: Login page CSS modifications. * Version: 1.0.0 * Author: Joe Bloggs * Author URI: http://joe.bloggs * License: GPL2 */ 

Это раздел комментариев, используемый WordPress для сбора сведений о плагине, который показан в разделе « Plugins ==> Installed Plugins » в области администрирования WordPress.

Теперь мы добавим наш CSS-файл, который будет создан в следующем разделе.

Ниже комментариев к плагину добавьте:

 function my_custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/custom-login/custom-login.css" />'; } add_action('login_head', 'my_custom_login'); 

Создать CSS

Теперь перейдем к нашему текущему каталогу тем, который находится в папке wp-content/themes/your-theme-folder заменив your-theme-folder на ваше текущее название темы. В вашем каталоге тем мы создадим папку с именем custom-login .

Теперь в папке custom-login создайте файл с именем custom-login.css

Теперь давайте все изменим 🙂

 /* This changes the background color */ body.login { background-color: #191919; } /* Additionally I added this because on the registration page the color only covers half the page */ body, html { background-color: #191919; } /* This changes the logo */ .login h1 a { background-image: url('login-logo.png'); } /* This changes the login form box */ .login form { background-color: #000000; } /* This changes the message box above the login form */ .login .message { background-color: #000000; border-left: 4px solid #9548e2; } /* This changes the paragraph text color */ p { color: #FFFFFF; } /* This changes the label (ie Username / Password text */ .login label { font-size: 12px; color: #FFFFFF; } /* This changes the username and password input boxes */ .login input[type="text"]{ background-color: #ffffff; border-color:#dddddd; -webkit-border-radius: 4px; } .login input[type="password"]{ background-color: #ffffff; border-color:#dddddd; -webkit-border-radius: 4px; } /* This changes the color of the login button */ .login .button-primary { width: 120px; float:right; background-color:#ad78e2 !important; background: -webkit-gradient(linear, left top, left bottom, from(#ad78e2), to(#9548e2)); background: -webkit-linear-gradient(top, #ad78e2, #9548e2); background: -moz-linear-gradient(top, #ad78e2, #9548e2); background: -ms-linear-gradient(top, #ad78e2, #9548e2); background: -o-linear-gradient(top, #ad78e2, #9548e2); background-image: -ms-linear-gradient(top, #9548e2 0%, #ad78e2 100%); color: #ffffff; -webkit-border-radius: 4px; border: 1px solid #bd98e2; } .login .button-primary:hover { background-color:#ad78e2 !important; background: -webkit-gradient(linear, left top, left bottom, from(#ad78e2), to(#9548e2 )); background: -webkit-linear-gradient(top, #ad78e2, #9548e2 ); background: -moz-linear-gradient(top, #ad78e2, #9548e2 ); background: -ms-linear-gradient(top, #ad78e2, #9548e2 ); background: -o-linear-gradient(top, #ad78e2, #9548e2 ); background-image: -ms-linear-gradient(top, #ad78e2 0%, #9548e2 100%); color: #fff; -webkit-border-radius: 4px; border: 1px solid #bd98e2; } .login .button-primary:active { background-color:#ad78e2 !important; background: -webkit-gradient(linear, left top, left bottom, from(#9548e2), to(#ad78e2)); background: -webkit-linear-gradient(top, #9548e2, #ad78e2); background: -moz-linear-gradient(top, #9548e2, #ad78e2); background: -ms-linear-gradient(top, #9548e2, #ad78e2); background: -o-linear-gradient(top, #9548e2, #ad78e2); background-image: -ms-linear-gradient(top, #9548e2 0%, #ad78e2 100%); color: #fff; -webkit-border-radius: 4px; border: 1px solid #bd98e2; } /* This changes links hover color */ .login #nav a:hover{ color: #9548e2 !important; } /* This changes the back to blog link color */ .login #backtoblog a, .login #nav a, .login h1 a { color: #ad78e2 !important; text-decoration: none; } /* This changes the back to blog hover link color */ .login #backtoblog a, .login #nav a, .login h1 a:hover { color: #9548e2 !important; } 

/* comments */ даст вам представление о том, что именно меняется, и вы можете изменить шестнадцатеричные цвета, например, #ad78e2 на все, что вам нравится.

Если есть что-то еще, что вы хотите изменить, лучший способ сделать это – установить дополнение Firebug для Firefox. После установки вы можете right-click и выбрать Inspect element with Firebug который выведет HTML но если вы посмотрите в левую панель, вы увидите вкладку « Style », которая показывает CSS. Вы можете временно изменить цвета CSS, например, в этой области, чтобы вы могли видеть, как будут выглядеть изменения перед их внедрением.

Теперь перейдите в Plugins ==> Installed Plugins в вашей области администрирования WordPress и активируйте свой плагин.

Я знаю, что вы спрашивали о конкретном плагине WordPress, но иногда научитесь погружаться в сам CSS самостоятельно, дадите вам необходимый вам контроль. И помните, если вы считаете, что сломали что-то просто, просто отключите созданный вами плагин. Если вы делаете серьезную ошибку, WordPress должен отключить плагин самостоятельно, но если вы попали на сломанный сайт, просто ftp или ssh в каталог wp-content/plugins/ и переименуйте или удалите созданную папку плагина.