[lethiaowens]

I have successfully installed BuddyPress and the BP-Template-Pack. Everything looks great except one small issue. I have been looking at this for hours and for the life of me I can’t figure out why my title bar extends all the way across the screen instead of ending at the 590px width for the content area for the BuddyPress content area.

My website example can be found here – http://cityofexpertsstlouis.com/members/admin/ (you’ll notice the blue bar which includes the ‘No Filter’ dropdown goes all the way across the screen)

My BuddyPress CSS file can be found here – http://cityofexpertsstlouis.com//wp-content/plugins/bp-template-pack/bp.css

My Theme CSS file can be found here – http://cityofexpertsstlouis.com//wp-content/themes/lifestyle/style.css

Are there any other files I need to share to get help with this issue? Thanks in advance to anyone who may be able to assist me.

[nit3watch]

in style.css
line 378
change:width:960px; to the desired width.

If you dont have firefox and firebug, GET IT! All you would have to do is right click the element and you can see what is applied to it.

[Boone Gorges]

@nit3watch is right that Firebug is your friend

The reason why the admin bar doesn’t obey your content width is because it’s not technically in your content. If you view the source of your page, you’ll see that the markup for the admin bar is actually in your footer. Your best bet is to do what @nit3watch suggested and apply styles directly to #wp-admin-bar.

[lethiaowens]

Thanks so much Nit3watch and Boone Gorges. Where do I find the style.css that needs to be changed? I looked in both of the style sheet for the lifestyle theme and there is no wp-admin-bar element.

I did a search and the only files within my theme, the buddypress plugin and the bp-template-pack that has the text ‘wp-admin-bar’ are the following files:

adminbar.css – http://cityofexpertsstlouis.com//wp-content/plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css
bp-core-adminbar.php – http://cityofexpertsstlouis.com//wp-content/plugins/buddypress/bp-core/bp-core-adminbar.php
bp-core-cssjs.php – http://cityofexpertsstlouis.com//wp-content/plugins/buddypress/bp-core/bp-core-cssjs.php
default.css – http://cityofexpertsstlouis.com//wp-content/plugins/buddypress/bp-themes/bp-default/_inc/css/default.css
global.js – http://cityofexpertsstlouis.com//wp-content/plugins/buddypress/bp-themes/bp-default/_inc/global.js
rtl.css – http://cityofexpertsstlouis.com//wp-content/plugins/buddypress/bp-themes/bp-default/rtl.css

Thanks again for your help.

[lethiaowens]

Here is a screenshot of the exact title bar and am trying to adjust – http://cityofexpertsstlouis.com/wp-content/themes/lifestyle/images/buddypress.jpg

[lethiaowens]

Okay I figured it out…I had to change the 960px width to 100% in the style.css file for the lifestyle theme. The new code looks like this and it now works;

#subnav {
width: 100%;
background: #006c9f;
font-family: Arial, Tahoma, Verdana;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-shadow: #333333 1px 1px;
text-transform: uppercase;
clear: both;
overflow: hidden;
}

Thanks everyone for your suggestions.

[nit3watch]

“Okay I figured it out” nothing to figure out.. If you right click with firebug, it tells you which file the rule is located in, never mind the line number. Also in firebug you can edit the css via the browser for a temporary view of what the rule will do before having to dig into your files and playing around with rules.

It really is a necessary tool if you plan on playing around with themes.. Good luck