I decided to install and play with Buddypress this weekend. The first thing I wanted to do was move the admin-bar to the bottom of the page. Buddypress is still very young and I expect this to be a feature you can add with a simple click.
To make things easy you might want a code editing program. This will add numbers for each line. It will make it super easy to find the right code to change. I recommend Notepad++ on the PC and Espresso on the Mac
First things first. If you havent already renamed your custom.css and site-wide.css file, we need to do that first.
You can find the files in Themes > bphome > CSS
Rename custom-sample.css to custom.css and site-wide-sample.css to site-wide.css
This will activate a custom css for us to use without modding core files.
Using a code editing program (listed above) add this code to site-wide.css:
/* Relocate Admin-Bar */
body { padding-top: 0px !important; }
#wp-admin-bar {
bottom: 0 !important;
position: fixed !important;
top: auto !important;
}
#wp-admin-bar ul {
bottom: 27px;
}
#wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul li ul{
bottom: auto;
position: relative;
}
/* END Relocate Admin-bar */
You should have a fully functioning admin-bar at the bottom of the page.
This will not break when you update!
{ 4 comments… read them below or add one }
Extremely useful, thanks.
Post updated using Site-wide.css instead of changing core files
Thanks a lot, works great.
But how can I move the adminbar in the Dashboard wich doesn’t seem to be affected by the changes?
@ Vincent
Good question. I guess i never looked into it because I didnt care when I was in my dashboard. Ill look into it further later.
Off the top of my head you could just edit the admin-bar.css and that would do it. Every time you update BP it would break however.
I also havent dug into the Trunk Version yet with the new template system. That could change everything.
You must log in to post a comment.