Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using the register_post_type function in order to create a custom post type. I am already using the menu_icon parameter in order to set the admin icon for the post type. But, how can I set the 'mouseover' icon? When I have seen other plugins create custom post types, they have a seperate 'color' version of their icon that shows on mouseover -

share|improve this question
add comment

3 Answers

This is more of a CSS question. However, if you create your icon as CSS sprite, you just shift between versions of it in your CSS. Something like:

#toplevel_page_my_item .wp-menu-image {
  background: url('images/sprite.png') no-repeat 0 8px !important;
}

#toplevel_page_my_item:hover .wp-menu-image,
#toplevel_my_item.wp-has-current-submenu .wp-menu-image {
  background-position: 0 -24px !important;
}
share|improve this answer
    
I may be a n00b at this, but I can't find any good information elsewhere - what do you mean by 'create your icon as a CSS sprite'? –  William Mar 27 '13 at 16:09
    
First hit in Google for "CSS sprite": css-tricks.com/css-sprites –  vancoder Mar 27 '13 at 16:13
add comment

The code I use is:

add_action( 'admin_head', 'cpt_icon');
function cpt_icon() { 
    echo '
        #menu-posts-cpt .wp-menu-image {
            background: url('.get_template_directory_uri().'/img/cpt-icon.png) no-repeat 6px 6px !important;
        }
        #menu-posts-cpt:hover .wp-menu-image, #menu-posts-cpt.wp-has-current-submenu .wp-menu-image {
            background-position:6px -16px !important;
        }
        #icon-edit.icon32-posts-cpt {background: url('.get_template_directory_uri().'/img/cpt-32x32.png) no-repeat;}
    ';
}

Where:

  • 'cpt-icon.png' is the sprite which has the monochrome & color icons for the admin menu.
  • 'cpt-32x32.png' is the icon which appears on the CPT pages such as(Add New CPT, Edit CPT, etc.).

Sample icons:

cpt-icon.png

cpt-icon.png

cpt-32x32.png

cpt-32x32.png

share|improve this answer
add comment

vancoder is correct, a sprite would be your best bet. Here is my example:

My CPT is called "contact".

Here is how it shows in the admin menu nav:

<li class="menu-top menu-icon-post" id="menu-posts-contact">

The css I use to display a custom image when not active/hovered over:

#adminmenu #menu-posts-contact div.wp-menu-image {
    background-position: 0 0;
}

The css for hover:

#adminmenu #menu-posts-contact:hover div.wp-menu-image {
    background-position: 0 -30px;   
}

The css for active state:

#adminmenu #menu-posts-contact.current div.wp-menu-image {
    background-position: 0 -60px;
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.