What is the correct way to alter the admin-bar.css
-
Hey.
I’m altering the appearance of the admin-bar of buddypress. Therefor i edited the admin-bar.css file in the bp-core/css/ folder.
I know that this is a bad solution in terms of upgradability of the bp plugin set.
I’m asking myself what is the correct way to alter the admin-bar.css so that it stays constant after an update.
Is there any hook to unload the default admin-bar.css and load our own?
-
Try this…
Paste the following in your “bp-custom.php” file (‘wp-content/plugins/bp-custom.php’). If you don’t have one, make one!
function my_admin_bar_css() {
echo '<link href="LINK TO STYLESHEET" rel="stylesheet" type="text/css" media="screen,projection" />';
}
remove_action('wp_head', 'bp_core_admin_bar_css', 1);
add_action('wp_head', 'my_admin_bar_css', 1);Assuming that your admin bar stylesheet is in your member theme’s directory, you could probably use “<?php bloginfo(‘template_url’); ?>/css/your_admin_bar.css” to determine the theme’s path (I say probably b/c I’m not sure! hehe).
Might want to play around with that… in theory, it should work… *untested*.
[EDIT]
Okay I’ve tested this… and it doesn’t quite work!
The custom CSS gets loaded, but I can’t seem to remove bp_core_admin_bar_css.
Time for a mod to jump in!
There is an article in codex on this topic!
Hi Jeff, I believe he just wants to modify the CSS and not the menus.
Oops! You are right!
Well, if you want to do more than CSS edits, now you know where to look.
Hi together,
thanks for the advices. Everything works fine! I now can modify the css of the admin-bar on a per blog basis, because i storec the admin-bar.css file in the template directory of the actual theme (i’ll keep the admin-bar consistent, but now i have the option to do some color adaptions to fit the user themes.)
I have one more question. I’m hiding the admin-bar if a user is not logged in. However i want to show it on the buddypress-home- and -member-theme sites also if a user is not logged in.
Is there a technique to achieve this?
hello ok i wish to do this but am not sure how best to set path to new admin-bar.css?
Would i use full url – http://www.mysite.com etc or relative path?
If relative is there a correct was to do this, ie using baseurl?
I have new file in
/wp-content/bp-themes/mytheme/css/admin-bar.css
cheers
Hi Carpeconnect,
you can try this code snippet
function my_admin_bar_css() {
echo '<link href="<?php bloginfo('template_url'); ?>/css/admin_bar.css" rel="stylesheet" type="text/css" media="screen,projection" />';
}
remove_action('wp_head', 'bp_core_admin_bar_css', 1);
add_action('wp_head', 'my_admin_bar_css', 1);
21cdb + Carpconnect, be advised that this does not remove the core admin bar css. The original admin bar CSS file will still be listed in your HTML source.
The remove_action doesn’t quite remove it… mods, any idea why?
This is still not working for me?
I have left the standard admin-bar.css in place.
in bp-custom.php i have
/* Admin Bar CSS */
function my_admin_bar_css() {
echo ‘<link href=”<?php bloginfo(‘template_url’); ?>/css/admin_bar.css” rel=”stylesheet” type=”text/css” media=”screen,projection” />’;
}
remove_action(‘wp_head’, ‘bp_core_admin_bar_css’, 1);
add_action(‘wp_head’, ‘my_admin_bar_css’, 1);
I have place my edited version of admin-bar.css into
wp-content/bp-themes/mytheme_member/css/admin-bar.css
this does not have any effect?
All am doing is changing the menu colours.
cheers
I
Instead of using the <?php bloginfo(‘template_url’); ?> tag, try manually typing in the path to your CSS file and see if that works.
Remember, bp-custom.php must be located in “wp-content/plugins/“
As mentioned above the solution is working for me. I also figured out a way to remove the original admin-bar.css out of the header. I’m not at work at the moment, so i can’t look it up and write it down here, but i will do so tomorrow!
One problem remains for me. In the admin-bar.css and also in my-admin-bar.css there is a padding-top width the height of the buddybar applied to the body of the page.
If i don’t use my-admin-bar.css and check the “hide adminbar for users that aren’t logged in” in the settings of the dashboard the padding-top isn’t applied to the body. However if i use my-admin-bar.css it gets loaded all the time and not only if a user is logged in. This implies that i always have an extra gap, because the padding si applied all the time!?
Any hints for this problem?
21cdb, looking forward to your solution for removing the original admin-bar.css file!
Re: your problem… you could potentially solve your problem by adding a CSS class to the body when you’re logged in or not, and then declaring a CSS override for the body.
—
In your BP member theme, add the following to your <body> tag:
<body<?php if (!is_user_logged_in() ) echo ' class="non-login"'; ?>>
Then, at the bottom of your my-admin-bar.css,:
body.non-login {padding-top:0 !important;}
This is untested… but in theory, this should work.
Let me know how it goes!
Hey r-a-y,
it seems it was a problem about when you trigger the remove and the add action.
Therefor i put everything in its own function which apllies after every hook is triggered:
// **** Custom BuddyPress admin-bar.css called my-admin-bar.css, stored in template directory ********
function my_admin_bar_css() { ?>
<link href=”<?php bloginfo(‘template_url’); ?>/css/my-admin-bar.css” rel=”stylesheet” type=”text/css” media=”screen,projection” />
<?php
$doing_admin_bar = false;
}
function trigger_adminbar_hooks(){
remove_action(‘bp_adminbar_logo’, ‘bp_adminbar_logo’);
remove_action(‘wp_head’, ‘bp_core_admin_bar_css’, 1);
add_action(‘bp_adminbar_menus’, ‘bp_adminbar_custom_logo’, 1 );
add_action(‘wp_head’, ‘my_admin_bar_css’, 1);
}
add_action(‘plugins_loaded’,’trigger_adminbar_hooks’,99);
?>
I’m going to try your solution. Would be great to know how to apply the my-admin-bar.css only when the adminbar is displayed. I’m glad about your solution for the moment, but there should also be a more correct way for the future!
Thanks 21cdb, the magical “plugins_loaded” is what I need to know!
—
About your problem, maybe try using the boolean $doing_admin_bar that you’re using and use and if-else statement to call the custom CSS only when it is true in your my_admin_bar_css() function?
Hey r-a-y,
is it possible that you give me an example of this if-else statement?
I also do have another question. I would like to change the admin_bar_logo.gif. I was thinking about using the following code:
<?php
function bp_adminbar_custom_logo() {
global $bp;
echo '<a>root_domain . '"><img id="admin-bar-logo" src="' . apply_filters( 'bp_admin_bar_logo_src', bloginfo('template_url') . /images/admin_bar_logo.gif . '" alt="' . apply_filters( 'bp_admin_bar_logo_alt_text', __( 'BuddyPress', 'buddypress' ) ) . '" /></a>';
?>However i have problems with bloginfo(‘template_url’) which isn’t working and i don’t get the mistake, if there is one?!
Hey 21cdb,
This is actually getting beyond the scope of the original post!
I’m not sure what the $doing_admin_bar variable is; I’m assuming it’s a variable of BP’s that allows you to check if the admin bar is displayed or not.
If that is the case, you can try this:
function check_admin_bar() {
global $bp;
if($doing_admin_bar) add_action('wp_head', 'my_admin_bar_css', 1);
else remove_action('wp_head', 'bp_core_admin_bar_css', 1);
}
add_action('plugins_loaded','check_admin_bar',99);Try that out, not sure if it will work though!
—
Re: Admin bar logo. Simple way is to not use the apply_filter! Just directly link to your logo!
function my_adminlogo() {
echo '<a href="/"><img src="LINK TO LOGO" alt="YOUR LOGO" /></a>';
}
function my_adminbar_logo() {
//replace BP logo with your logo
remove_action( 'bp_adminbar_logo', 'bp_adminbar_logo');
add_action( 'bp_adminbar_logo', 'my_adminlogo');
}
add_action( 'bp_adminbar_logo', 'my_adminbar_logo', 1);—
To do more modifications, I highly recommend reading the codex article, “Modifying the Admin Bar” that Jeff linked to:
https://codex.buddypress.org/how-to-guides/modifying-the-buddypress-admin-bar/
It contains mostly everything you need to know!
Oops… just looking over my code again!
The function should be:
function check_admin_bar() {
global $bp;
//remove core admin bar CSS at all times!
remove_action('wp_head', 'bp_core_admin_bar_css', 1);
//add custom CSS only if admin bar is true
if($doing_admin_bar) add_action('wp_head', 'my_admin_bar_css', 1);
}
add_action('plugins_loaded','check_admin_bar',99);
- The topic ‘What is the correct way to alter the admin-bar.css’ is closed to new replies.