17.04.2014

Редактирование стилей административной панели

В последних версиях Wordpres появились цветовые схемы административной панели, что значительно украсило ее и позволило настроить под себя.

Но все же, предложенных вариантов может не хватить при оформлении админки. При этом, можно и не использовать их, а обойтись собственными стилями.

Для этого необходимо подключить свою таблицу стилей, в файле functions.php пишем функцию (см.ниже).

Затем создаем файл style-admin.css и в него добавляем стили.

HTML
CSS

<?// Свой дизайн админки
function custom_admin() {
echo '<link rel="stylesheet" href="'.get_bloginfo('template_directory').'/style-admin.css" type="text/css" />';
}
add_action('admin_head', 'custom_admin');?>

/* Своя цветовая схема админки */
/* Основные стили */
/* Фон админки */
html {
	background: #fff;
}
/* Цвета ссылок */
a {
	color: #44403A;
}
a:hover, a:active, a:focus,
table.widefat span.delete a, table.widefat span.trash a, table.widefat span.spam a,
.plugins a.delete, #all-plugins-table .plugins a.delete, #search-plugins-table .plugins a.delete,
.submitbox .submitdelete, #media-items a.delete, #media-items a.delete-permanently,
#nav-menu-footer .menu-delete {
	color:#7FB5A0
}
/* Цвет чекбокса и радиобаттона */
input[type=checkbox]:checked:before,
input[type=radio]:checked:before {
	background: #7FB5A0
}
/* Нечетные строки таблиц */
.alternate, .alt {
	background-color: #fbfbfb;
}
/* Кнопки */
.wrap .add-new-h2, .wrap .add-new-h2:active {
	background: #7FB5A0;
	color: #fff;
}
/* Кнопки при наведении */
.wrap .add-new-h2:hover, #add-new-comment a:hover, .tablenav .tablenav-pages a:hover,
.tablenav .tablenav-pages a:focus {
	color: #fff;
	background-color: #44403A
}
/* Кнопки форм */
.wp-core-ui .button-primary {
	background: #7FB5A0;
	border-color: #5ba78a;
	color: #fff;
	-webkit-box-shadow: inset 0 1px 0 #7FB5A0, 0 1px 0 rgba(0, 0, 0, .15);
	box-shadow: inset 0 1px 0 #7FB5A0, 0 1px 0 rgba(0, 0, 0, .15)
}
/* Кнопки форм при наведении */
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus {
	background: #4b4640;
	border-color: #44403A;
	color: #fff;
	-webkit-box-shadow: inset 0 1px 0 #44403A, 0 1px 0 rgba(0, 0, 0, .15);
	box-shadow: inset 0 1px 0 #44403A, 0 1px 0 rgba(0, 0, 0, .15)
}
/* Фон выбора тем */
.theme-browser .theme.active .theme-name, .theme-browser .theme.add-new-theme:hover:after {
	background: #7FB5A0
}
/* Админпанель */
/* Фон */
#wpadminbar {
	color: #fff;
	background: #4b4640;
	border-bottom: #44403A solid 5px;
}
/* Боковое меню */
#adminmenuback, #adminmenuwrap, #adminmenu {
	background: #4b4640;
}
/* Выпадающее меню */
#adminmenu .wp-submenu, #adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus+.wp-submenuб
#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
	border-right-color: #44403A;
}
/* Цвета пунктов меню первого уровня */
#adminmenu li.current a.menu-top, #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
.folded #adminmenu li.current.menu-top,
#adminmenu a:hover, #adminmenu li.menu-top:hover, #adminmenu li.opensub>a.menu-top,
#adminmenu li>a.menu-top:focus {
	color: #fff;
	background: #7FB5A0;
}
/* Цвета пунктов меню второго уровня */
#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, #adminmenu .wp-has-current-submenu .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu .wp-submenu a:hover, .folded #adminmenu .wp-has-current-submenu .wp-submenu a:focus,
.folded #adminmenu .wp-has-current-submenu .wp-submenu a:hover, #adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:focus,
#adminmenu a.wp-has-current-submenu:focus+.wp-submenu a:hover, #adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover,
#adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus,
#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:focus,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus {
	color: #7FB5A0;
}