Title: Styling the Admin Menu
Last modified: November 15, 2017

---

# Styling the Admin Menu

 *  [harveyando](https://wordpress.org/support/users/harveyando/)
 * (@harveyando)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/styling-the-admin-menu/)
 * Hello,
 * I am styling my wordpress admin screen. So far I have styled the admin bar, using
   the below code. Can someone please tell me the hooks and selectors to do this
   to the admin menu down the left hand side of the admin screen?
 *     ```
       add_action( 'admin_menu', 'change_bar_color1' );
   
       function change_bar_color1() {
   
           ?>
   
           <style>
               #wpadminbar .ab-empty-item, #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon {
                   color: #FFFFFF !important;
               }
   
       /* Top Bar Background */
   
               #wpadminbar {
                   background: #303030 !important;
   
               }
       /* Top Bar Background Hover */
               #wpadminbar .quicklinks ul li a:hover {
                   background: #2ebab5;
               }
       /* Top Bar Background Hover */
               #wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item, #wpadminbar .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li > .ab-item:focus, #wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus {
                   color: #fff !important;
                   background: #2ebab5 !important;
               }
       /* Dropdown Background */
               #wpadminbar .menupop .ab-sub-wrapper {
                   background: #444444;
   
               }
       /* Dropdown Text */
               #wpadminbar .ab-submenu .ab-item, #wpadminbar .quicklinks .menupop ul li a, #wpadminbar .quicklinks .menupop.hover ul li a, #wpadminbar-nojs .quicklinks .menupop:hover ul li a {
                   color: #ffffff !important;
               }
       /* Dropdown Text Hover */
               #wpadminbar .menupop .menupop > .ab-item:hover:before, #wpadminbar .quicklinks .menupop ul li a:focus, #wpadminbar .quicklinks .menupop ul li a:focus strong, #wpadminbar .quicklinks .menupop ul li a:hover, #wpadminbar .quicklinks .menupop ul li a:hover strong, #wpadminbar .quicklinks .menupop.hover ul li a:focus, #wpadminbar .quicklinks .menupop.hover ul li a:hover, #wpadminbar .quicklinks li a:hover .blavatar, #wpadminbar li .ab-item:focus:before, #wpadminbar li a:focus .ab-icon:before, #wpadminbar li.hover .ab-icon:before, #wpadminbar li.hover .ab-item:after, #wpadminbar li.hover .ab-item:before, #wpadminbar li:hover #adminbarsearch:before, #wpadminbar li:hover .ab-icon:before, #wpadminbar li:hover .ab-item:after, #wpadminbar li:hover .ab-item:before, #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
                   color: #ffffff !important;
               }
       /* WordPress Dropdown Background */
               #wpadminbar .quicklinks .menupop ul.ab-sub-secondary, #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
                   background: #444444 !important;
               }
   
           </style>
   
           <?php
       }
       ```
   
    -  This topic was modified 8 years, 5 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).

Viewing 1 replies (of 1 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/styling-the-admin-menu/#post-9687324)
 * See if [Creating Admin Themes](https://codex.wordpress.org/Creating_Admin_Themes)
   helps you get working CSS. To find the correct selectors, use your browser’s 
   Inspector Tool. You can pick an element you wish to style and it’ll be highlighted
   in the tool. Hovering over other elements in the tool highlights where they are
   on the page. Once you find an element, you can alter current rules or add new
   ones as a test. The changes do not persist unless they are transfered to code
   or CSS files.

Viewing 1 replies (of 1 total)

The topic ‘Styling the Admin Menu’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 1 reply
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/styling-the-admin-menu/#post-9687324)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics