Code here: Create Image *AND* Text Hub Ultimate Branding CSS

Hi guys I just added some CSS to Ultimate Branding to extend the custom entry menu tab into IMAGE + TEXT instead of either one of these. It's not very complicated but it might save you a little time, code at the bottom.

Example here: http://jaaadesign.nl/files/2013/12/foto-1.png

Standard Ultimate Branding will give you the options to use either an image or text, but to have the menu tab blend in with the rest of the admin bar you should use both.

The code provided at the bottom of this post will do that for you. Simply choose the name of your tab (Entry Title Tab) and replace the image links in the code to your own.

Specs on the images I used:

I have used 2 different versions of 1 image to mimic the HOVER OVER effect of Wordpress. In my case I'm using the 'Light' skin for Wordpress admin, which has a blue hover effect so the first image is a grey scale, transparent background .PNG, and the second is a copy of the first but blue scale.

Note: To have the images also display well in the front end, where a different tab background color is used I've added a white (and on the second white/blue) 'glow' (Photoshop Touch), which is basicly an extra outline.

Hope it is of use to you, appy holidays,

Nick

/*   Custom Entry Menu Tab Image + Text [Admin CSS]   */

li#wp-admin-bar-wdcab_root.menupop {
padding-left: 33px;
background: url("http://droomdagboek.net/wp-content/uploads/2013/12/foto-1.png") no-repeat 4px transparent;
background-size: 28px auto;
}
li#wp-admin-bar-wdcab_root.menupop:hover {
padding-left: 33px;
background: url("http://droomdagboek.net/wp-content/uploads/2013/12/foto-2.png") no-repeat 4px #fff;
background-size: 28px auto;
}
#wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper {
min-width: 100%;
left: 0!important;
}

/*   Custom Entry Menu Tab Image + Text [Front side CSS]   */

li#wp-admin-bar-wdcab_root.menupop {
padding-left: 33px;
background: url("http://droomdagboek.net/wp-content/uploads/2013/12/foto-1.png") no-repeat 4px transparent;
background-size: 28px auto;
}
li#wp-admin-bar-wdcab_root.menupop:hover {
padding-left: 33px;
background: url("http://droomdagboek.net/wp-content/uploads/2013/12/foto-2.png") no-repeat 4px transparent;
background-size: 28px auto;
}
#wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper {
min-width: 100%;
left: 0!important;
}