Оформляем страницу входа в админку

Опубликовано в Веб-дизайн
/
3 Мар 2014

Здравствуйте, дорогие друзья. В этом посте я научу вас оформлять страницу входа в админ панель сайта, работающего под управлением системы WordPress. Вы спросите, зачем это нужно? В первую очередь это подойдёт всем тем, на чьем сайте разрешена регистрация новый пользователей. Это поможет хоть  немного разнообразить стандартный интерфейс админки и сделать сайт белее уникальным и привлекательным для новых регистраций. В том случае если вы являетесь единственным автором сайта и регистрация вместо с входом сторонних пользователей запрещена, то можете оформить страницу исключительно в эстетических соображениях.

Подготовка

оформляем

Перед началом редактирования я рекомендую создать резервные копии всех изменяемых файлов  на случай каких либо ошибок или опечаток. А все основные изменения мы будем вносить в файл, который располагается по адресу: /wp-admin/css/colors.min.css?ver=3.8.1. Что касается вопроса «Чем его редактировать?», то все правки в исходный код данного файла стилей мы будем выполнять при помощи бесплатного редактора Notepad++.

И ещё одно дополнение, скорей всего после очередного обновления движка WordPress  так же обновятся и все стандартные файлы стилей, так что после оформления страницы входа в админку настоятельно рекомендую создать ещё одну резервную копию, но на этот раз уже изменённого файла colors.min.css?ver=3.8.1, дабы после очередного обновления не проделывать всю работу заново.

Оформляем

Приступим к оформлению, его я покажу на примере своего сайта vk-line.ru, который вскоре начнёт свою работу и будет предназначен как официальный сайт для моей одноимённой программы, о которой я писал на своей странице в контакте и группе блога. Теперь, после того как вы сделали все необходимые резервные копии, можно приступить непосредственно к нашей станице. Откройте её в другом браузере, перейдя по ссылке вида http://ваш сайт/wp-login.php.Открыли? Теперь переходим к следующему шагу.

css

Подключитесь через ваш FTP клиент (я использую FileZilla) к вашему сайту и перейдите по написанному выше пути к файлу «colors.min.css?ver=3.8.1»  и откройте его при помощи Notepad++, перед вами появилась одна, но очень длинная строка кода. Не понимаю, зачем нужно было так сжимать файл стилей, но работать с ним теперь не очень удобно.

Первое, что нам нужно сделать, это изменить фон страницы входа, для этого включаем поиск и ищем строку, которая задает фон страницы :

background: #f1f1f1;

В ней содержится только значение цвета, для того что бы добавить одно большое изображение в качестве фона для страницы входа, то замените эту часть кода на ту что представлена ниже, где img это адрес к вашей картинке:

 background: url("img") no-repeat;  /* задаем картинку */
 background-attachment: fixed;  /* убираем прокрутку */
 background-size: cover;  /* Масштабирование с сохранением пропорций */
 background-position: 50% 50%;  /* Положение по центру */

Теперь, после сохранения изменений фон страницы изменится на на то изображение, которое вы выберите и при этом будет корректно отображаться на экранах с практически любым разрешением. Кстати, не забудьте сжать картинку с фоном, а то ваша страница будет загружаться достаточно долго.

фон

Фон мы изменили, приступим к редактированию стилей самой формы авторизации. Первым делом сделаем её прозрачной, для того что бы она гармонично смотрелась вместе с нашей картинкой. Для этого находим строчку, которая так же отвечает за фон, но теперь уже не страницы а формы авторизации, она располагается в блоке .login form и выглядит так:

background: #fff;

Для достижения прозрачности необходим использовать параметр background: rgba. который делает прозрачным не все элементы формы, а только фон данного блока. Ниже я приведу уже законченный код для блока .login form который предает чёрный и прозрачный цвет формы, а так же при помощи box-shadow добавляет небольшую тень:

.login form {
background: rgba(9, 9, 9, 0.83);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13);
box-shadow: 0 1px 3px rgba(0,0,0,.13);
}

Попробуйте заменить весь код в login form на тот что выше для того что бы посмотреть, как теперь выглядит форма. Если вам не подошли цвет, или прозрачность, то измените параметры  background: rgba и box-shadow под себя.

форма

Ну а теперь нужно изменить цвет текста на формы, так что бы он был хорошо заметен на тёмном фоне. Для этого нужно открыть другой файл, который лежит в этой же папке и называется wp-admin.min.css?ver=3.8.1. В нём нужно найти следующие строки:

.login label {
color: #777;
font-size: 14px;
}

В них нужно изменить свойство color на подходящее для вас, в моем случае это #fff, так как на чёрном фоне лучше всего смотрится белый цвет. После всех этих манипуляций не забудьте сохранить изменения во всех файлах и сделать их резервные копии.

Текст

 

На этом всё, надеюсь вам помогла эта статья. До встречи в моем блоге! Подписывайтесь на страницу В контакте и rss ленту. Вскоре, я прикреплю небольшую видео инструкцию по оформлению страницы входа, располагаться она будет ниже.

комментариев 10 Добавить комментарий

  • Забавно! Эта статья + моя — неплохо бы получилось=)

    • Да, точно. Кстати идея для этой статьи родилась когда ты интересовался изменением логотипа WordPress. 🙂

  • Прикольно! Реально не знал. Попробую реализовать.

  • А при обновлении WordPress опять все слетит! Уж лучше вынести форму входа либо в виджет, либо на отдельную страницу блога.

    • Да, я писал об этом выше. Но мое решение несколько другое, просто создать резервную копию. 😉

  • Кирилл, замечательная статья! Очень неплохо бы было при входе на форум или для себя любимого, если кто то захочет.

    Кстати, красиво у тебя стоит табличка закрытие на плановые работы нового сайта. Это же плагин?

    Прогулялась в твою админку, а там нет рисунка.

    • Спасибо! Страницу исправил, теперь всё должно выглядеть как надо. 🙂
      Плагин для создания страницы-заглушки называется WP Maintenance Mode и скачать его можно по этой ссылке: wordpress.org/plugins/wp-maintenance-mode.

  • Кирилл, прикольный дизайн входа в админку. Будет лишнее время-займусь творчеством)) Жаль, что мою страницу входа никто не увидит, кроме меня. Я её спрятал, чтобы не сглазили )))

  • Действительно прикольная штука, нужно будет поработать над этой фишкой. Спасибо.

  • Отличная статья, когда буду делать сайт, обязательно воспользуюсь!

Оставить комментарий