Overriding admin-bar.css (1 post)

  1. Chris Lowry
    Posted 3 years ago #

    Hey there.

    I'm using a variety of hooks to adjust the admin bar, making a login form for non logged in users.

    You can see the hooks I'm using below - not very tidy yet, will neaten that up soon.

    However, the issue I am having is: how do I style the elements in the bar? As you can see, I've added a login form, and a message, but my attempts to style anything fail due to it being overridden by admin-bar.css.

    See here - http://jonrackham.com/tastour/ - The "join today" link is not responding to my css for its #nobreak declaration.

    How do I get round this? Don't want to edit admin-bar.css in case it's overwritten in a future upgrade of WP.

    Help appreciated!

    My functions.php code below:

    add_filter( 'show_admin_bar', '__return_true' );
    add_action( 'admin_bar_menu', 'add_toolbar_stuff', 999 );
    function add_toolbar_stuff( $wp_admin_bar ) {
    add_action( 'admin_bar_menu', 'wp_admin_bar_login', 999 );
    function wp_admin_bar_login( $wp_admin_bar ) {
    	if ( is_user_logged_in() )
    		$form = '<div class="loginform">';
    		$form .= '<form action="http://jonrackham.com/tastour/wp-login.php" method="post" id="adminbarlogin">';
    		$form .= '<input class="adminbar-input" name="log" id="adminbarlogin-log" type="text" value="Username" />';
    		$form .= '<input class="adminbar-input" name="pwd" id="adminbarlogin-pwd" type="password" value="Password" />';
    		$form .= '<input type="submit" class="adminbar-button" value="Login"/>';
    		$form .= '<span class="adminbar-loginmeta">';
    		$form .= '<input type="checkbox" checked="checked" tabindex="3" value="forever" id="rememberme" name="rememberme">';
    		$form .= '<label for="rememberme">Remember me</label>';
    		$form .= '<a href="http://jonrackham.com/tastour/wp-login.php?action=lostpassword">Lost your password?</a></span></form>';
    		$form .= '</div>';
    	$wp_admin_bar->add_node( array(
    		'id'     => 'login',
    		'title'  => $form,
    		'meta'   => array('class'    => 'admin-bar-login')
    	) );
    	$message = '<p>Not a Bon Vivant member yet? Why not <a id="nobreak" href="http://jonrackham.com/tastour/member-registration/">join today?</a></p>';
    		$wp_admin_bar->add_node( array(
    		'id'     => 'message',
    		'title'  => $message,
    		'meta'   => array('class'    => 'admin-bar-message')
    	) );

Topic Closed

This topic has been closed to new replies.

About this Topic