Either you fixed it, or I’m missing it, because it looks fine in Chrome, Firefox, and IE for Windows.
Apparently the bar doesn’t extend to the full width of the open browser even in the default installation (I assumed it did), but if you notice how this installation of BuddyPress is configured here on the BuddyPress site (the page we’re on, in BuddyPress.org), the bar at the top extends full-width! Since I can’t peer into this site’s base.css file for the theme I’m wondering how to change that attribute … ?
Since I can’t peer into this site’s base.css file for the theme I’m wondering how to change that attribute … ?
Ah, but you can!
For all CSS and template design issues, I highly recommend that you use the Firefox browser with the Firebug Add-on. WIth FIrebug installed in Firefox, you can see where page elements inherit their CSS–the file names, the file contents, etcetera. You can even make changes to the CSS selector parameters and see how that affects the design.
So, when you pull up any buddypress.org page, or any webpage at all, you can use Firebug within Firefox to see how the CSS selectors are styled.
Oy! Of course … I forgot to use Firebug on THIS site … sometimes the most obvious stuff trips us up! Thanks, Jeff!
Kit-
Is this issue resolved? If so, please set the topic as resolved!
Jeff–
No, it’s not resolved yet. I can’t seem to get this to work. I’m still not sure which CSS attributes are controlling the width of the search-login-bar at the top of the page, despite having looked them over in Firebug. Here is the CSS code I see when I use the inspector to examine the Buddypress web site:
#search-login-bar { custom.css (line 70)
background:#EBEBEB none repeat scroll 0 0;
border-top-color:#0090FF;
}
#search-login-bar { base.css (line 43)
background:#FFF9DF none repeat scroll 0 0;
border-top:10px solid #F7740A;
padding:7px 10px;
}
And then here is the code I see when I inspect the same element in my installation:
#search-login-bar { [base.css (line 50)]
background:#CCCCCC none repeat scroll 0 0;
border-top:10px solid #CA3495;
padding:7px 20px;
}
Any tips would help (I know this is a totally elementary, if not kindergarten-level, question!).
Thanks.
I know you don’t believe me, but I promise you that I’ve looked this over on every Windows browser, and it looks just fine to me.
Can you post up a link to a screen shot of what you see?
In FF and Safari for OSX, I see that the gray background does not extend all the way across the screen. Of course, I have a 24″ screen. If I resize my browser window, the problem “goes away.”
What size monitor are you using?
I see that you’ve hard-coded in base.css the maximum body tag width to 1300 pixels and the minimum width to 960 pixels. This is different than the body selector used in bp.org’s bass.css file. There are no max or min values set.
Kit-
Make sure that you have backups of your CSS files before trying my suggestions.
In base.css:
Remove max-width:1300px;
min-width:960px;
Then, change these two selectors as follows:
#header {
margin:25px auto;
width:1245px;
}
#content {
margin:10px auto;
width:1245px;
}
Of course, you can set your width to whatever you like.
You’ll also have to add back the <div class=”padder”> division to make the various form boxes within the search bar line up with your header. Using Firebug, look at how this is done in bp.org.
Good find Jeff. :thumbup: I needs me one of them fancy Macintoshes. 
Jeff–
I’m also using a large 23″ monitor, but I have not changed any of the widths in the CSS that you note in your message previous to the last message. Those are the values that come “in the box” in the default BuddyPress installation. But it’s clear that the designers of the BuddyPress.org website have changed theirs … I’ll try to make those changes and see if that makes a difference.
Isn’t there just a simple way of making this feature expandable to the width of whatever browser window my visitor may have? Like using a percentage size instead of a fixed pixel width? What if a 30″ monitor comes along and wishes to view it?
(John James J … yes, I believe you are seeing what you say you are seeing, for sure! Maybe my problem is that I have too generous a browser window … but on the BuddyPress site this top bar expands to fit whatever size window I make in my monitor … but my own version of the theme doesn’t do this, nor does the “out of box” installation of BuddyPress … there is always a gap!)
Thanks for the code!
Kit
Kit-
Okay, I just fired up the default bphome theme and see that what you’re trying to change is indeed the standard CSS setup. So, once again, you get to create a custom theme!
Follow the same procedure as before. Make a backup of the standard bphome theme, rename it to something new, and make the changes I’ve outlines above. They should flow through to your customized bpmemebr theme as well!
