Topic: Admin bar modification

Admin bar modification

Panoravu
Participant

@panoravu

2 months, 1 week ago

Hello there!

I’m trying to modify the admin bar, but I’m having some issues and I would like some help.

1: I increased the height from 28px to 40px. The problem is that when I’m in the Dashboard, the admin bar is overlapping the upper part of the Dashboard. How can I fix that?

2: How can I set new positions for the items of the bar? What I want is them not to be spread throughout the page, but more in the center, matching my site width (960px).

3: Is there any way or plugin to make the bar like the one in Facebook? Not in the looks, but the functions…

I’m waiting for some ideas…

Thank you!

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

@mercime
Keymaster

@mercime

2 months ago

@panoravu check out the http://wordpress.org/extend/plugins/mp6/ for upcoming WP 3.6 though

Panoravu
Participant

@panoravu

2 months ago

Thank you @mercime, but it is not what I had in my mind. I tried it though…

Any other ideas?

bp-help
Participant

@bphelp

2 months ago

@panoravu
Have you tried:
http://premium.wpmudev.org/project/custom-admin-bar/
If this doesn’t do what you need then it will require custom coding and if you can’t do it then you may have to hire a developer.

Panoravu
Participant

@panoravu

2 months ago

@bphelp
Yes, I’ve tried it… It’s nice, but it doesn’t do what I described above. Thank you though.
Custom coding is what I meant. That’s why I need help. Some guidance. I searched online, but couldn’t find anything useful. If someone can point me the right direction, I would appreciate it! Maybe a website I haven’t found or some bits of code to get me started…

Chouf1
Participant

@chouf1

2 months ago

hi @panoravu,

for css styling, be inspired by this: http://www.php-ease.com/code/wordpress-style-admin-bar.html

If you want to code something into the Toolbar, you have to play with the wp_admin_bar filter.

The function goes then to your theme functions.php

Based ons omething like this

function my_function( $wp_admin_bar )
{
/* what you need here */

}
add_filter( ‘admin_bar_menu’, ‘my_function’ );

Google around to find many answers about the WP Toolbar, like this one:
http://technerdia.com/1140_wordpress-admin-bar.html

Panoravu
Participant

@panoravu

2 months ago

Thank you @chouf1!

I’ll check the links and I’ll come back if I need anything more…

bp-help
Participant

@bphelp

2 months ago

@panoravu You will probably have to just hire a developer because all the links relative to BP in the admin bar are dynamic to each user. I have been trying to get help myself but I guess its overly complex. See this thread:
http://buddypress.org/support/topic/how-to-split-out-buddypress-notifications-drop-down-items-to-their-own-top-level/
Sorry I could not help more, it is above my skill level.

Panoravu
Participant

@panoravu

2 months ago

I solved the first question!

Now, for the second one, I’m thinking a different approach…

I will decrease the width of the admin bar to match my site’s width and I’ll create a second bar as a background. The second bar won’t have any functions, it will just have the same color as the admin bar and its width will be 100%, so it’s gonna look seamless. I haven’t done that yet, but I’m thinking to use the first linked @chouf1 posted as a guide.

What I want from you guys is to help me in the first step. I managed to decrease the admin bar’s width, but it’s aligned to the left. How can I align the whole bar to the center??

Chouf1
Participant

@chouf1

2 months ago

have you tried to aply the old css trick margin: auto to the div containing the bar ?

http://designshack.net/articles/css/how-to-center-anything-with-css/

Hugo
Moderator

@hnla

2 months ago

@chouf1 is that your code on that linked page http://www.php-ease.com/code/wordpress-style-admin-bar.html ?

Panoravu
Participant

@panoravu

2 months ago

Thank you @chouf1! Really helpful link!!

I finally did it!

It was a bit more complicated in my case due to the fluid design (I used margin: 0 0 0 -620px and left: 50%;), but it’s ok now…

Thanks again. Cheers!

Chouf1
Participant

@chouf1

2 months ago

hi @hnla,

no Hugo, it’s not “my code” ! Found it on the web and linked to it only as example purpose.

Here’s another link, probably better than the previous who explains clearly some admin_bar tweakings:
http://blog.rutwick.com/add-items-anywhere-to-the-wp-3-3-admin-bar

Panoravu
Participant

@panoravu

1 month, 3 weeks ago

Hey @chouf1. I need to ask you something (again). Or anyone who knows…

As I said before, I need to add another bar behind the admin bar. I thought to use the link you mentioned above. The HTML and the CSS code are pretty clear, but where in the child theme should I put this code?

I tried to put it in the functions.php (see image below) but it didn’t work… :/

Chouf1
Participant

@chouf1

1 month, 3 weeks ago

In functions.php, you can only write php. The doc type, the div and the closing html has nothing to do in it.

If you attribute a class or a ID to a div, there is no need to create a function who add the style.
In the child theme you have a file named style.css. This file contains your css styles !

Panoravu
Participant

@panoravu

1 month, 3 weeks ago

Ok, so I’ll put the CSS in the style.css.

Where should I put the HTML code?

PS: I read somewhere that I can include HTML in a PHP file. I guess I did it wrong.. :/

Chouf1
Participant

@chouf1

1 month, 3 weeks ago

Yes, you did !
And the function is unecessary. Have you tried what is explained here ?
http://blog.rutwick.com/add-items-anywhere-to-the-wp-3-3-admin-bar

Panoravu
Participant

@panoravu

1 month, 3 weeks ago

Thank you @chouf1 for your response! But I found this plugin http://wordpress.org/extend/plugins/wp-topbar/ …

So no need for coding!

Chouf1
Participant

@chouf1

1 month, 3 weeks ago

@panoravu,

de nada !

Fortunately there has plugins ! It’s your choice.