Topic: [Resolved] Unable to style my admin bar menu · BuddyPress.org

Skip to:: Content; Pages; Categories; Search; Top; Bottom

[Resolved] Unable to style my admin bar menu

@chouf1

Participant

12 years, 6 months ago
Hi,

I use this function to create a custom adminbar menu. This works well.
I want to show the total site members count. The count works.
But the output desperatly stays on 2 lines for the user count.
I tried many things like span, div, css display block, etc, nothing to do. Thze menu ul and li don’t accept any css parameters, except at least the strong tag!!!

The only span who is working pefectly is when i use the unread-count class on it.

I searched in global.js but didn’t find…
If somebody very CSS clever can help, it would be much appreciated.

The function i use witch output count and user over 2 lines….
Put this in functions.php to see what is wrong..
```
function bp_adminbar_custom_admin() {
if (current_user_can('level_10')){
echo '<li class="alt"><a href="http://xxx.xom/wp-admin/network/" target="_blank">Quick Admin</a>';
echo '<ul><li id="toto"><span class="unread-count">'. bp_get_total_site_member_count() .'</span> <a href="http://bp-fr.net/wp-admin/network/users.php" target="_blank">Users</a> ';
echo '<li><a href="http://xxx.xom/wp-admin/network/plugins.php" target="_blank">Plugins</a>';
echo '</li></ul>';
}
}
add_action('bp_adminbar_menus', 'bp_adminbar_custom_admin', 99);
```

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

@imath

Moderator

12 years, 6 months ago
Hello @chouf1,

you can fix it by css :
```
#toto span{
float:left;
margin:5px;
}
```
But at line 4 of your code don’t forget to close the li tag
..."_blank">Users</a> </LI>';
@chouf1

Participant

12 years, 6 months ago
Thank you @imath

1) your solution works partialy.
The float applied to the span brings the number on the same line as the text, but the span content is upper the normal baseline.

I had to adjust with heigh and lineheigth. Here’s the whole css i applied to the span:
Now it’s OK !
```
span.toto {
float:left;
margin: 3px 5px 3px 15px;
height:15px;
line-height:15px;
background: #dd0000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #fff;
font-weight: bold;
padding: 2px 8px;
}
```
2) The whole admin menu is coded without ending li tags for each list element. Closing tag for li is not required. http://webdesign.about.com/od/htmltags/qt/optional-html-end-tags-when-to-include-them.htm

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

The topic ‘[Resolved] Unable to style my admin bar menu’ is closed to new replies.