Topic: Admin bar modification

Admin bar modification

@panoravu

Participant

11 years, 9 months 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

Participant

11 years, 9 months ago

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

@panoravu

Participant

11 years, 9 months ago

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

Any other ideas?

@bphelp

Participant

11 years, 9 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

11 years, 9 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

11 years, 9 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

11 years, 9 months ago

Thank you @chouf1! 🙂

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

@bphelp

Participant

11 years, 9 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:
https://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

11 years, 9 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

11 years, 9 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/

@hnla

Participant

11 years, 9 months ago

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

@panoravu

Participant

11 years, 9 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

11 years, 9 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

11 years, 9 months 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

11 years, 9 months 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

11 years, 9 months 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

11 years, 9 months 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

11 years, 9 months ago

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

So no need for coding! 🙂

@chouf1

Participant

11 years, 9 months ago

@panoravu,

de nada ! 😉

Fortunately there has plugins ! It’s your choice.