🧩 Рестайлинг страницы авторизации

[Develop-Soft]

Это не плагин, но увы нет раздела "решения" (и прочие лайфхаки).


Плагин Код ниже меняет оформление формы авторизации согласно картинке:

Код: Выделить всё

<style>.forget-password > a, a:focus, a:hover, a:active {color:unset !important}</style>
<script>
$('#login_form').ready(function() {
 $(":submit").css("width","100%");
 $(".btn-registration").prop("class",null);
 $(".btn-guest-login").prop("class",null);
 $('a[href*="restore_password"]').prepend("<i class=\"fa fa-unlock-alt\" aria-hidden=\"true\"></i> ");
 $('a[href*="registration"]').prepend("<i class=\"fa fa-user-plus\" aria-hidden=\"true\"></i> "); 
 $(".forget-password").css("margin-top","15px");
});
</script>

т.к. у плагинов нет доступа к данной странице, код прописывается в:
"Настройки" -> "Страница входа" -> "Описание страницы (в режиме "Источник")"



Внимание! Выполняя манипуляции с полем описания для страницы входа в режиме "источник" - вы рискуете "окирпичить" себе форму авторизации и остаться "без ложки к обеду"!
Будьте внимательны и осторожны!

Скачать (v0.3)

Установка: по рецепту отсюда.

[nruslan2]

+1 к тому чтобы так было сделано в версии 3.0 - НАМНОГО НАМНОГО читабельнее стало!! (ну как вариант можно сделать вообще меню настроек с настройками как выглядит главная страница)

[alcompstudio]

О, прикольное решение, спасибо! Возьму на заметку)

[Develop-Soft]

Градиентик добавил (и красненький текст в шапочке)...

Код: Выделить всё

<style type="text/css">.login{
  width: 100%;
  height: 100%;
  background: #003e88;
  background-image: 
    linear-gradient(rgba(22,109,188,0.8) 3px, transparent 0),
    linear-gradient(90deg, rgba(22,109,188,0.8) 3px, transparent 0),
    linear-gradient(rgba(26,98,176,0.6) 2px, transparent 0),
    linear-gradient(90deg, rgba(26,98,176,0.6) 2px, transparent 0),
    linear-gradient(rgba(0,94,170,0.3) 1px, transparent 0),
    linear-gradient(90deg, rgba(0,94,170,0.3) 1px, transparent 0),
    radial-gradient(circle,#0054ad, #003e88);
  background-size:
    128px 128px, 128px 128px,
    32px 32px, 32px 32px,
    16px 16px, 16px 16px,
    100% 100%;
}
</style>

<style>.forget-password > a, a:focus, a:hover, a:active {color:unset !important}</style>

 <script>
$('#login_form').ready(function() {
 $(":submit").css("width","100%");
 $(".btn-registration").prop("class",null);
 $(".btn-guest-login").prop("class",null);
$('a[href*="restore_password"]').prepend("<i class=\"fa fa-unlock-alt\" aria-hidden=\"true\"></i> ");
$('a[href*="registration"]').prepend("<i class=\"fa fa-user-plus\" aria-hidden=\"true\"></i> "); 
$(".forget-password").css("margin-top","15px");
});
</script>

[Develop-Soft]

Добавил небольшой фикс против "выбеливания" при наведении крысы на ссылки.

[Develop-Soft]

Нашел возможность из системы плагинов добраться до окна входа, сделал плагин:

restyle_login_form_v0.1.zip

(883 байт) 105 скачиваний

[Develop-Soft]

restyle_login_form_v0.2.zip

(902 байт) 146 скачиваний

Подправил искажение заголовка страницы.

[Develop-Soft]

Подправил ошибки. Сделал кнопочку чуть поярче.

restyle_login_form_v0.3.zip

(938 байт) 29 скачиваний