Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] BP CSS Classes Locked in Menu Dashboard


  • Osisis
    Participant

    @osisis

    If someone would be so kind as to assist me with this issue I’m having. I’m creating a new WP website locally. I’m attempting to add Font Awesome icons to the primary menu using the instructions found here. In order to add the icon I need to update the CSS Classes in the menu dashboard. I can do this for all the menu items except the BP ones (i.e. Notifications, Profile etc). I need assistance editing the CSS classes for the bp items added to the primary menu. There was another post on here a year ago from someone else having the same issue, but the post had no responses.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Osisis
    Participant

    @osisis

    To add to this, for the record I tried to grab the css classes and the menu id adding each to my style.css

    #menu-item-20 ul li#bp-menu#bp-notifications-nav:before {
    			font-family: 'FontAwesome';
    			content: "\f030";
    		}
    .bp-menu bp-notifications-nav:before {
    			font-family: 'FontAwesome';
    			content: "\f030";
    		}
    .menu-item-19 .menu-primary li a:before {
          font-family: 'FontAwesome';
          content: "\f030";
    }

    But neither have had the desired results. Prior to this I was sure to enqueue Font Awesome into the functions.php of my child theme.


    Osisis
    Participant

    @osisis

    Not sure how to mark this topic resolved, but I’ve decided to go about this in another manner. I followed the BP model and have my admin bar acting in the capacity of a menu and deleted my primary menu. Is working out pretty well thus far. For anyone else that’s interested I

    Removed “howdy, $name” just because to me it screams WP

    function custom_adminbar_welcome() {
    	global $wp_admin_bar;
    
    		$name = wp_get_current_user()->display_name;
    		$avatar = get_avatar( wp_get_current_user()->ID, 28 );
    		$class = $class = empty( $avatar ) ? '' : 'with-avatar';
    
    		$wp_admin_bar->add_menu( array(
                    'id'    => 'my-account',
                    'title' => __('') . $avatar,
    				'class' => $class
    			) 
    		);
    }
    add_action( 'wp_before_admin_bar_render', 'custom_adminbar_welcome' );

    Removed WP links and change logo

    add_action( 'wp_before_admin_bar_render', 'custom_adminbar_welcome' );
    
    function rebranding_wordpress_logo(){
            global $wp_admin_bar;
            //the following codes is to remove sub menu
        $wp_admin_bar->remove_menu('about');            // Remove the about WordPress link
        $wp_admin_bar->remove_menu('wporg');            // Remove the WordPress.org link
        $wp_admin_bar->remove_menu('documentation');    // Remove the WordPress documentation link
        $wp_admin_bar->remove_menu('support-forums');   // Remove the support forums link
        $wp_admin_bar->remove_menu('feedback');         // Remove the feedback link
        $wp_admin_bar->remove_menu('site-name');        // Remove the site name menu
        $wp_admin_bar->remove_menu('view-site');        // Remove the view site link
        $wp_admin_bar->remove_menu('updates');          // Remove the updates link
        $wp_admin_bar->remove_menu('comments');         // Remove the comments link
        $wp_admin_bar->remove_menu('new-content');      // Remove the content link
        $wp_admin_bar->remove_menu('w3tc');             // If you use w3 total cache remove the performance link
     
            //and this is to change wordpress logo
            $wp_admin_bar->add_menu( array(
                'id'    => 'wp-logo',
                'title' => '<img src="http://test.theblackxperience.com/darklogo45.png" />',
                'href'  => __(home_url()),
                'meta'  => array(
                    'title' => __('eQubator'),
                ),
            ) );
            
    }
    add_action('wp_before_admin_bar_render', 'rebranding_wordpress_logo' );

    Moved BP child menus up to make them primary menus

    function make_parent_node( $wp_admin_bar ) {
    
    if ( ! is_user_logged_in() ) {
    		return false;
    	}
    
    	 $wp_admin_bar->add_node( array(
    		'id'     => 'my-account-activity',     // id of the existing child node (New > Post)
    		'title'  => '<span class="ab-icon"></span><span class="ab-item">'._x( '', '' ).'</span>', // alter the title of existing node
    		'parent' => false,          // set parent to false to make it a top level (parent) node
    	)); 
        $wp_admin_bar->add_node( array(
            'id'     => 'my-account-friends',     // id of the existing child node (New > Post)
    		'title'  => '<span class="ab-icon"></span><span class="ab-item">'._x( '', '' ).'</span>', // alter the title of existing node
    		'parent' => false,          // set parent to false to make it a top level (parent) node
    	));    
        $wp_admin_bar->add_node( array(
            'id'     => 'my-account-messages',     // id of the existing child node (New > Post)
    		'title'  => '<span class="ab-icon"></span><span class="ab-item">'._x( '', '' ).'</span>', // alter the title of existing node
    		'parent' => false,          // set parent to false to make it a top level (parent) node
    	));
       
    	$wp_admin_bar->add_node( $args );
    }
    add_action( 'admin_bar_menu', 'make_parent_node', 999 );

    Added CSS to turn the menu items into dashicons

    #wp-admin-bar-my-account-friends .ab-icon:before{
    	font-family: "dashicons" !important;
    	content: "\f307" !important;
    }
    #wp-admin-bar-my-account-messages .ab-icon:before{
    	font-family: "dashicons" !important;
    	content: "\f466" !important;
    }
    #wp-admin-bar-my-account-activity .ab-icon:before{
    	font-family: "dashicons" !important;
    	content: "\f130" !important;
    }
    
    #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications>a:before{
    	font-family: "dashicons" !important;
    	content: "\f319" !important;
    }

    Only problem I’m having now is that for some reason the logo has decided to move itself to the right, but that’s another question for another topic. But hope this helps someone else. admin bar as menu


    Osisis
    Participant

    @osisis

    Fixed the code above to fix the logo positioning. Now just need to work on margins and padding.

    http://test.theblackxperience.com/dashicon-menu.png

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] BP CSS Classes Locked in Menu Dashboard’ is closed to new replies.
Skip to toolbar