WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] MP6 - how to style admin bar entries? (3 posts)

  1. RobertHarm
    Member
    Posted 9 months ago #

    my plugin "Leaflet Maps Marker" adds an entry to the default admin bar - this works fine on WP3.8-beta1/MP6 if screen is wide; if on the other hand the screen is small, the icon and text are not properly aligned and size doesnt fit, example: http://pro.mapsmarker.com/admin-bar-how-to.png

    I searched the forums and make.wordpress.org but couldnt find a tutorial how to change this for WP3.8 (which classes to add/use...) - can anyone help please?
    Thx,
    Robert

  2. RobertHarm
    Member
    Posted 9 months ago #

    found a solution by adding the following css definitions for my admin bar icon:

    /*MP6 admin bar */
    #wp-admin-bar-lmm > .ab-item .ab-icon:before {
    content: url('../img/icon-adminbar.png');
    }
    @media print,
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 120dpi) {
    #wp-admin-bar-lmm > .ab-item .ab-icon:before {
    content: url('../img/icon-adminbar.png');
    }
    }
    @media screen and ( max-width: 782px ) {
    #wp-admin-bar-lmm > .ab-item .ab-icon:before {
    content: url('../img/icon-adminbar-2x.png');
    }
    }

  3. kitchin
    Member
    Posted 8 months ago #

    See also: http://core.trac.wordpress.org/ticket/26609 for more on the front-end page width issue. You'll see the comment "At 600px, #wpadminbar is changed from position:fixed to position:absolute," as well as some issues about themes than restyle the front-end body to position:relative.

    In addition to the page width issue, it can be hard to just get the admin bar consistent between the front-end and back-end when you add icons.

    Using the above CSS :before content:url() technique works for me, with:

    $wp_admin_bar->add_menu(array(
    	'id'    => 'foo',
    	'title' => '<span class="ab-icon"></span><span class="ab-label">Foo</span>',
    	'href'  => '#',
    ));

    That HTML is similar to the "+ New" core item, which also uses ":before content..." but not a url.

    So that is a good way to do icons, though I haven't looked at page widths on all browsers myself.

    On the other hand, an HTML img is trickier:

    $wp_admin_bar->add_menu(array(
    	'id'    => 'foo',
    	'title' => '<span class="ab-icon"><img src="..."></span><span class="ab-label">Foo</span>',
    	'href'  => '#',
    ));

    My workaround then to get the front-end and back-end the same was to add display: block to the img. Not sure how great that is.

    The above calls are in

    add_action( 'admin_bar_menu', 'foo_action_admin_bar_menu');
    function foo_action_admin_bar_menu {
      // here //
    }

Reply

You must log in to post.

About this Topic

Tags