first things first

A general tendency (actually fad) these days is to go for bells and whistles before the basic needs are met with and the basic problems of users are solved. I hope Buddypress won\’t succumb to this. It\’s a remarkably good product.

As a new user of Buddypress, I had mentioned some basic problems but never got an answer. Some of them are:

1. The width of the site vary depending on the browser you use.

2. Under Member Directory, the alphabetical search doesn\’t work.

3. Profile pictures regularly give error reports. An automatic resizing of the picture with reference to the page concerned would have been easier for both the user and code writer.

1) Is not a bp issue. It’s a css theme issue. You are welcome to modify the distributed theme or use any theme that you’d like.

To address 2 and 3 we need to know what version of bp you are using, what version wpmu to start with. Things are pretty busy round here lately. Topics scroll off the front page radar within 12-24 hrs. Can you post links to the 2 and 3 topics?

Ah. I ran across number 2 post. It was buried at the end of a resolved topic. Nobody is going to notice that. The best way is to pick an appropriate forum and start a new topic for each issue that you want to bring up.

Still need to know what version bp and what version wpmu you are running.

2. Yes, I meant Avatars. In my previous installation, friends who registered for test purpose had this problem — even after the uploaded avatar was successfully loaded and displayed correctly for hours or days.

In a previous installation I did some CSS modification to get the 800px width.

In general it was working well with Firefox and Chrome as well,

But “My Profile” (with its 4-column layout) still showed the old wide screen.

How/Where can I do the necessary width changes?

Is there a specific CSS for this page?

You will be helping me a lot if you have a solution for this.

I settled for Buddypress after trying out all the well-known social network softwares (inluding those with a price, like SocialGo). I think this is the best. I just can’t let it go on account of a display-width problem.

This editor makes it ridiculously simple to “reverse engineer” CSS code. In the “x-ray” mode you can click any element on the screen and it tells you what the container is (along with all of it’s parent elements). You can also bring up an “inspector” that will show you all CSS declarations that are affecting that element. And you can even modify the CSS and see the changes as you type the code. I’m not sure if there is anything similar for PC… but there must be.

I actually took a quick look myself using CSS Edit and the difference between profile pages and other pages seems to be that profile pages have two left sidebars with a fixed width of 138px (#optionsbar and #userbar) while the other pages have a single right sidebar (#sidebar) without any width defined (i.e. 100%). Meanwhile, #main is used on all pages and has a min-width of 680px. So unless you change some CSS code… the profile pages will always be at least 956px wide.

How did you change the CSS? One thing to bear in mind is that the default theme is fluid. It has min and max widths set. It sounds like you want a fixed width of 800px all the time (no bigger, no smaller… regardless of window size). So… did you remove the min/max on the body and change it to 800? Did you remove the min-width on #main and change it to… let’s say… 560px (allowing 120px each for those two sidebars in the profile)?

Anyway… as mentioned above… this is not a bug and has nothing to do with BuddyPress development. It’s just CSS 101. But I feel you pain. Hopefully the above is some help.

p.s. Did you look at Elgg during your evaluation? It has some features I need that BP currently lacks… but BP is clearly much superior otherwise.

Yes, I want the width to be 800px (in fact, less than that, to get rid off the horizontal scroll bar at the bottom of my screen).

I was on a trial-and error spree at a testing site, and was able to found the differences you have mentioned and have reached the same conclusion.

“the difference between profile pages and other pages seems to be that profile pages have two left sidebars with a fixed width of 138px (#optionsbar and #userbar) while the other pages have a single right sidebar (#sidebar) without any width defined (i.e. 100%). Meanwhile, #main is used on all pages and has a min-width of 680px. So unless you change some CSS code… the profile pages will always be at least 956px wide.”

Yes I have tried the max/mini width in the base.css, making both 800px, and it works on the main page and the some other pages as well (that is, under the second horizontal menu). It should work (after all IE6 displays all pages in 800px).

I am not sure how atentive I was to #main. I must try it. I must say your reply has given me some hope and a better idea about things, but I will add that BP still has a bug. On buddypress.org itself you can see that: the header or admin bar is fixed at 800px; it can’t adjust its width with that of the rest of the site. It works well with Firefox if I use: #wp-admin-bar { width: 960px !important; } … but it should work automatically.

I am also testing Elgg; several adjustments are pretty easier there compared to BP, but I perfectly agree with you: “It has some features I need that BP currently lacks… but BP is clearly much superior otherwise”. in addition BP has a very pleasant, elegant look. This is why I want to stick with BP and spend hours on my WPMU site.

Internet Explorer 6 does not understand min/max width… it only understands width. So if you set min/max to the same… IE6 will just make the <div> 100% wide (assuming it’s not floated). You need to remove min/max and just put in a width. Your options are fixed width in all browsers or 100% fluid in all browsers (no min/max). Or you could use conditional comments to feed IE6 a different set of width declarations.

Bottom line (if I’m recalling the code correctly) is that you have to make #main narrower if you want the profile page to fit within 800px. You can either define a set width in pixels or just remove all width declarations and let #main default to 100% of the width of it’s parent.

The theme will be a little cramped at 800px… but this should work. Again, if this is just an IE6 issue, I use conditional comments to accomplish what you want (I’m still not 100% sure I understand what you’re trying to achieve).