Skip to:

Re: reducing the width of buddypress theme

Jeff Sayre



I hope you don’t think I was being snooty to you. Your issue was simply not clear to me.

Anyway, I now understand that you want the entire screen to be constrained to exactly 800 pixels in width, that you do not want the Buddy bar to be resized upon screen resizing.

There are a few ways to accomplish this. But, the best way is to create a CSS selector that will override the selector in the core file.

If you go to the admin-bar-logo.css file and look at the #wp-admin-bar selector, you’ll see that it has a width property set to 100%. This needs to be changed to your desired fixed width. But, do not change it within this file because it will be lost upon the next BuddyPress upgrade.

Instead, you place your custom CSS in the site-wide-sample.css file found in the BuddyPress-home/css directory. You must rename that file to site-wide.css. Now, your custom CSS selector will override the core BP CSS. Here’s what you’ll place in that file:

#wp-admin-bar { width: 800px !important; }

By the way, do you use Firebug with Firefox? If you don’t, it is a great tool. It not only allows you to find out within which files certain CSS selectors are located, but also to temporarily change them and see what impact they have on the design.

I hope this helps!

Skip to toolbar