Dashboard CSS

CSS Styles for WordPress Dashboard

Custom CSS Styles to the WordPress Admin

Place this code into your themes functions.php file.

// Dashboard CSS

add_action( ‘admin_head’, ‘showhiddencustomfields’ );
function showhiddencustomfields() {echo “<link rel=’stylesheet’ media=’screen,projection’ type=’text/css’ href=’http://codecentral.org/wp-content/themes/theme-name/stylesheet-name.css’>”;}

Example: Dasboard CSS

Create a .CSS file and add your custom styles.

/*

Dasboard

*/

/*——————————————————————————

Hello, this is the main WordPress admin CSS file.
All the important stuff is in here.

————————————————————————*/

/* 2 column liquid layout */
#wpwrap {
height: auto;
min-height: 100%;
width: 100%;
position: relative;
}

#wpcontent {
height: 100%;
}

#wpcontent,
#wpfooter {
margin-left: 170px;
}

.folded #wpcontent,
.folded #wpfooter {
margin-left: 56px;
}

#wpbody-content {
padding-bottom: 65px;
float: left;
width: 100%;
}

#adminmenuback,
#adminmenuwrap,
#adminmenu,
#adminmenu .wp-submenu {
width: 150px;
}

#adminmenuback {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}

#adminmenu {
clear: left;
margin: 12px 0 0;
padding: 0;
list-style: none;
}

.folded #adminmenuback,
.folded #adminmenuwrap,
.folded #adminmenu,
.folded #adminmenu li.menu-top {
width: 36px;
}

/* New Menu icons */

.icon16:before {
speak: none;
font-size: 20px;
line-height: 20px;
padding: 6px 0;
height: 34px;
width: 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

.icon16.icon-dashboard:before,
#adminmenu .menu-icon-dashboard div.wp-menu-image:before {
content: ‘\f102′;
margin-top: -1px;
}

.icon16.icon-post:before,
#adminmenu .menu-icon-post div.wp-menu-image:before {
content: ‘\f109′;
}

.icon16.icon-media:before,
#adminmenu .menu-icon-media div.wp-menu-image:before {
content: ‘\f104′;
}

.icon16.icon-links:before,
#adminmenu .menu-icon-links div.wp-menu-image:before {
content: ‘\f103′;
}

.icon16.icon-page:before,
#adminmenu .menu-icon-page div.wp-menu-image:before {
content: ‘\f105′;
}

.icon16.icon-comments:before,
#adminmenu .menu-icon-comments div.wp-menu-image:before {
content: ‘\f101′;
margin-top: 1px;
}

.icon16.icon-appearance:before,
#adminmenu .menu-icon-appearance div.wp-menu-image:before {
content: ‘\f100′;
}

.icon16.icon-plugins:before,
#adminmenu .menu-icon-plugins div.wp-menu-image:before {
content: ‘\f106′;
}

.icon16.icon-users:before,
#adminmenu .menu-icon-users div.wp-menu-image:before {
content: ‘\f110′;
}

.icon16.icon-tools:before,
#adminmenu .menu-icon-tools div.wp-menu-image:before {
content: ‘\f107′;
}

.icon16.icon-settings:before,
#adminmenu .menu-icon-settings div.wp-menu-image:before {
content: ‘\f108′;
}

.icon16.icon-site:before,
#adminmenu .menu-icon-site div.wp-menu-image:before {
content: ‘\f112′
}

.icon16.icon-generic:before,
#adminmenu .menu-icon-generic div.wp-menu-image:before {
content: ‘\f111′;
}

.key-labels label {
line-height: 24px;
}

strong, b {
font-weight: 600;
}

.pre {
/* https://developer.mozilla.org/en-US/docs/CSS/white-space /
white-space: pre-wrap; /
css-3 /
word-wrap: break-word; /
IE 5.5 – 7 */
}

.howto {
font-style: italic;
display: block;
font-family: “Open Sans”, sans-serif;
}

p.install-help {
margin: 8px 0;
font-style: italic;
}

.no-break {
white-space: nowrap;
}

/——————————————————————————
7.0 – Main Navigation (Left Menu)
——————————————————————————
/

#adminmenuwrap {
position: relative;
float: left;
}

#adminmenushadow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 6px;
z-index: 20;
}

/* side admin menu */
#adminmenu * {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

#adminmenu li {
margin: 0;
padding: 0;
cursor: pointer;
}

#adminmenu a {
display: block;
line-height: 18px;
padding: 2px 5px;
}

#adminmenu li.menu-top {
border: none;
min-height: 34px;
position: relative;
}

#adminmenu .wp-submenu {
list-style: none;
position: absolute;
top: -1000em;
left: 150px;
overflow: visible;
word-wrap: break-word;
}

#adminmenu .wp-submenu,
.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
margin-top: 1px;
margin-right: -1px;
padding: 7px 0 8px;
z-index: 9999;
}

.js #adminmenu .sub-open,
.js #adminmenu .opensub .wp-submenu,
#adminmenu a.menu-top:focus + .wp-submenu,
.no-js li.wp-has-submenu:hover .wp-submenu {
top: -1px;
}

#adminmenu .wp-has-current-submenu .wp-submenu,
.no-js li.wp-has-current-submenu:hover .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu {
position: relative;
z-index: 2;
top: auto;
left: auto;
right: auto;
bottom: auto;
border: 0 none;
margin-top: 0;

-webkit-box-shadow: none;
box-shadow: none;

}

.folded #adminmenu .wp-submenu.sub-open,
.folded #adminmenu .opensub .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
.folded #adminmenu a.menu-top:focus + .wp-submenu,
.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
top: -1px;
left: 36px;
margin-top: 2px;
}

.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
position: absolute;
top: -1000em;
}

#adminmenu .wp-not-current-submenu .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
min-width: 150px;
width: auto;
}

#adminmenu .wp-submenu a {
font-size: 13px;
line-height: 1.2;
margin: 0;
padding: 6px 0;
}

#adminmenu .wp-not-current-submenu li > a,
.folded #adminmenu .wp-has-current-submenu li > a {
padding-right: 16px;
padding-left: 14px;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

#adminmenu .wp-has-current-submenu ul > li > a,
.folded #adminmenu li.menu-top .wp-submenu > li > a {
padding: 6px 12px;
}

#adminmenu a.menu-top,
#adminmenu .wp-submenu-head {
font-size: 14px;
font-weight: 400;
line-height: 18px;
padding: 0;
}

#adminmenu .wp-submenu-head,
.folded #adminmenu .wp-menu-name {
display: none;
}

.folded #adminmenu .wp-submenu-head {
display: block;
}

#adminmenu .wp-submenu li {
padding: 0;
margin: 0;
overflow: hidden;
}

#adminmenu .wp-menu-image img {
padding: 7px 0 0 7px;
opacity: 0.6;
filter: alpha(opacity=60);
}

#adminmenu div.wp-menu-name {
padding: 7px 12px 7px 0;
}

#adminmenu div.wp-menu-image {
float: left;
margin: 0;
width: 34px;
height: 30px;
text-align: center;
}

#adminmenu div.wp-menu-image:before {
color: #999;
speak: none;
font-size: 20px;
line-height: 20px;
padding: 6px 0;
height: 34px;
width: 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

.folded #adminmenu div.wp-menu-image {
height: 30px;
width: 34px;
position: absolute;
z-index: 25;
}

.folded #adminmenu a.menu-top {
height: 34px;
}

/——————————————————————————
21.0 – Admin Footer
——————————————————————————
/

#wpfooter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 0;
margin-right: 20px;
border-top-width: 1px;
border-top-style: solid;
}

#wpfooter p {
font-size: 13px;
margin: 0;
line-height: 20px;
}

#footer-thankyou {
font-style: italic;
}

#wpfooter a {
text-decoration: none;
}

#wpfooter a:hover {
text-decoration: underline;
}

/* menu */

#adminmenu li.wp-menu-separator {
background: transparent;
border-color: transparent;
}

#adminmenu div.separator {
border-color: transparent;
}

#adminmenu li.wp-menu-open {
border-color: #dfdfdf;
}

#adminmenu li.menu-top,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top {
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
background-color: #111;
color: #2ea2cc;
}

/* flyout menu arrow */
#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
border-right-color: #333;
}

#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
.folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow div {
background: #0074a2;
}

#adminmenu li.wp-not-current-submenu .wp-menu-arrow {
border-top-color: #f9f9f9;
border-bottom-color: #dfdfdf;
background: transparent;
}

#adminmenu li.wp-not-current-submenu .wp-menu-arrow div {
background: #111;
border-color: #111;
}

#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
color: #fff;
}

.folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top {
border-color: #666; /* Match the background color of the current menu item for a flat appearance */
}

#adminmenu .wp-submenu li.current,
#adminmenu .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:hover {
color: #fff;
background: transparent;
}

#adminmenu .wp-submenu,
.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
background-color: #333;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.3);
box-shadow: 0 3px 6px rgba(0,0,0,0.3);

}

/* Apply these styles to auto-folded menus */
@media only screen and (max-width: 900px) {
.auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
background-color: #333;

    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

}

#adminmenu .wp-submenu a,
.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
.folded #adminmenu .wp-has-current-submenu .wp-submenu a {
color: #bbb;
}

/* Apply these styles to auto-folded menus */
@media only screen and (max-width: 900px) {
.auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu a {
color: #bbb;
}
}

#adminmenu .wp-submenu .wp-submenu-head {
color: #fff;
}

/* To be merged */

/——————————————————————————
This is a rough example of using SVG for plugin icons.
This will not be the final suggested method of implementation,
but should provide an example of how SVGs can work with the new UI.
——————————————————————————
/

#toplevel_page_jetpack div.wp-menu-image {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJqZXRwYWNrIj4NCgk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNOC41LDE3Ljk2M0w3Ljk0NiwxNy4yNWMtMC42ODgsMC4yNDMtMS41MjgsMC4zOTEtMi40NDYsMC4zOTFzLTEuNzU4LTAuMTQ2LTIuNDQ3LTAuMzkxTDIuNSwxNy45NjMNCgkJYzAsMC43MTEsMS4zNDMsMS4yODcsMywxLjI4N1M4LjUsMTguNjc0LDguNSwxNy45NjN6Ii8+DQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTEwLjY3NSwxNi45NjNsMC41NTQtMC43MTNjMC42ODksMC4yNDMsMS41MjgsMC4zOTEsMi40NDYsMC4zOTFzMS43NTctMC4xNDYsMi40NDYtMC4zOTFsMC41NTQsMC43MTMNCgkJYzAsMC43MTEtMS4zNDMsMS4yODctMywxLjI4N1MxMC42NzUsMTcuNjc0LDEwLjY3NSwxNi45NjN6Ii8+DQoJPGc+DQoJCTxyZWN0IHg9IjQiIHk9IjEwIiBmaWxsPSIjOTk5OTk5IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+DQoJCTxwYXRoIGZpbGw9IiM5OTk5OTkiIGQ9Ik0xNS4wNDMsMS4wNDNjLTAuNDEyLTAuMjI5LTAuOTA4LTAuMzc1LTEuNDU1LTAuMzc1Yy0wLjU1MywwLjAwMS0xLjA1MSwwLjE0OC0xLjQ2MywwLjM4MQ0KCQkJYy0wLjg3OCwwLjg4My0xLjU5OCwyLjU0Ni0yLjA0NSw0LjY0M0MxMC4xMDUsNS43ODksMTAuMTI1LDUuODk5LDEwLjE0OCw2SDguOTc3QzguNTE1LDQuMDgxLDcuODI0LDIuNTU4LDYuOTk0LDEuNzIzDQoJCQlDNi41NzIsMS40ODUsNi4wNjQsMS4zMzQsNS41LDEuMzM0QzQuOTM5LDEuMzMzLDQuNDM0LDEuNDgxLDQuMDE0LDEuNzE2Yy0xLjUyMSwxLjUyMS0yLjYwMiw1LjI5Ni0yLjYwMiw5LjcyMg0KCQkJYzAsMS42NDYsMC4xNTQsMy4xOTgsMC40Miw0LjU4NEMyLjU2MiwxNi42MDQsMy45MjIsMTcsNS41LDE3czIuOTM5LTAuMzk2LDMuNjY4LTAuOTc5QzkuMjkxLDE1LjM4MSw5LjM4NywxNC43MDQsOS40NTcsMTRoMS4xNTkNCgkJCWMtMC4wNDYsMC40NTEtMC4wOTEsMC45MDYtMC4xNTksMS4zMzNDMTEuMjE1LDE1LjczOCwxMi4zMjYsMTYsMTMuNTg4LDE2YzEuNTQ0LDAsMi44NzUtMC4zODksMy41OS0wLjk1OA0KCQkJYzAuMjYtMS4zNTQsMC40MS0yLjg3NCwwLjQxLTQuNDg1QzE3LjU4OCw2LjIyNSwxNi41MzEsMi41MzEsMTUuMDQzLDEuMDQzeiBNNiw5djNINS42MjNjMC4xMTcsMS4wNTUsMC4zMTksMi4wNzcsMC42MjcsM2gtMg0KCQkJYy0wLjMwOC0wLjkyMy0wLjUxLTEuOTQ1LTAuNjI3LTNIM1Y5aDAuNTM1QzMuNjEzLDcuNTkyLDMuODQ2LDYuMjEzLDQuMjUsNWgyQzUuODQ2LDYuMjEzLDUuNjEzLDcuNTkyLDUuNTM1LDlINnogTTUuNSwzLjYyNQ0KCQkJYy0wLjgyOCwwLTEuNS0wLjMzNi0xLjUtMC43NXMwLjY3Mi0wLjc1LDEuNS0wLjc1UzcsMi40NjEsNywyLjg3NVM2LjMyOCwzLjYyNSw1LjUsMy42MjV6IE05LjUzNSwxMw0KCQkJYzAuMDMxLTAuNTExLDAuMDUzLTEuMDI5LDAuMDUzLTEuNTYyQzkuNTg4LDkuODUsOS40NDMsOC4zNSw5LjE5NSw3aDEuMTc0YzAuMjUsMS4zNDYsMC4zOTMsMi44NDgsMC4zOTMsNC40MzgNCgkJCWMwLDAuNTM3LTAuMDI5LDEuMDU1LTAuMDYyLDEuNTYySDkuNTM1eiBNMTIuMTI1LDIuMTVjMC0wLjQxNCwwLjY3Mi0wLjc1LDEuNS0wLjc1czEuNSwwLjMzNiwxLjUsMC43NXMtMC42NzIsMC43NS0xLjUsMC43NQ0KCQkJUzEyLjEyNSwyLjU2NCwxMi4xMjUsMi4xNXogTTE2LDExaC0wLjYyM2MtMC4xMTcsMS4wNTUtMC4zMTgsMi4wNzctMC42MjcsM2gtMmMwLjMwOS0wLjkyMywwLjUxLTEuOTQ1LDAuNjI3LTNIMTNWOGgwLjQ2NQ0KCQkJYy0wLjA3OC0xLjQwOC0wLjMxMS0yLjc4Ny0wLjcxNS00aDJjMC40MDQsMS4yMTMsMC42MzcsMi41OTIsMC43MTUsNEgxNlYxMXoiLz4NCgkJPHJlY3QgeD0iMTQiIHk9IjkiIGZpbGw9IiM5OTk5OTkiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==) !important;
background-position: center center !important;
background-size: 20px 20px !important;
}

@media only screen and (min-width: 1250px)
#widgets-left #available-widgets .widget {margin: 2px;}

Dashboard CSS
3 votes, 5.00 avg. rating (98% score)

Continue the discussion

    Topics

    Archives