Skip to:
Content
Pages
Categories
Search
Top
Bottom

Scaling down/Centering complete Buddypress

  • Avatar of Ichbinsdennis
    ichbinsdennis
    Member

    @ichbinsdennis

    Hi guys.

    Sorry for my bad english but good old germans aren’t that good in speaking foreign languages..

    Is there any possibility to center whole buddypress so that you have “white” space on the left and right? I think this would look some kind of more “Professional” and could allow a better advertising system. Does anybody know which divs and classes have to be changed to achieve that?

    Thanks, Dennis

Viewing 13 replies - 1 through 13 (of 13 total)
  • Avatar of Sgrunt
    Sgrunt
    Participant

    @sgrunt

    i think you should modify both the buddypress home and the member theme: the base.css file or the custom.css file for both themes. Change the body, the left, right, center column width, and the narrow and wide column.

    Avatar of Ichbinsdennis
    ichbinsdennis
    Member

    @ichbinsdennis

    Allright.. I centered buddypress and the columns.

    What really fucks me up is Internet Explorer which shows avatars and infos on wrong places when making window smaller. Firefox is perfect.

    Do you know how to fix that? Should i give body width in percent or pixels? I tried both but both were causing problems on IE same as for the columns.

    Help me ^^

    Avatar of Sgrunt
    Sgrunt
    Participant

    @sgrunt

    yes, you have that problem in the original buddypress demo too. There is something wrong in stylesheets, but honestly i think it’s a pain to rewrite all stylesheets of buddypress: they are a lot!

    Avatar of Sgrunt
    Sgrunt
    Participant

    @sgrunt

    i think the problem is given by divs positioned using distances from margin left or right. And so when you resize the window, the distance from margins change, and you shall refresh the page to correctly rebuild the layout.

    Maybe, you just need to rewrite css code for left, center, right, narrow, wide columns and it’not a big pain.

    Avatar of Ichbinsdennis
    ichbinsdennis
    Member

    @ichbinsdennis

    Well this is some kind of confusing.. I open my site with internet explorer. It shows correctly on maximum browser size. But when i smaller the browser avatars, buttons and activity are in same position as with maximum size. When I refresh Internet Explorer everything shows up correctly. When I go back to maximum size, avatars, buttons and activity are in same position as with small size. When I refresh, again everything looks correctly, I never had something like this before when working on stylesheets.. Do you have a suggestion? Did you try it?

    cheers

    Avatar of Mdsports
    mdsports
    Participant

    @mdsports

    I think I may have experienced the same problem with buddypress. The only solutuion I’ve found so far is to remove “position: relative;” from most of the css file attributes.

    Avatar of Mdsports
    mdsports
    Participant

    @mdsports

    I forgot to ask… If there’s and easier way…please…someone help???

    Avatar of hatiro
    HaTiRo
    Participant

    @hatiro

    As there was no solution provided here and its been some time ago maybe this has been resolved, but its a problem that I encountered.

    I haven’t fully tested this but after a hunt around I found a couple of techniquues.

    Using javascript to refresh on resize between the <head> tags causes infinite loops in IE in some cases so that will not solve the problem.

    I found out though that if you include position:relative in all of your main outer divs including body and body.directory in the IE fixes css files in the bphome and bpmember themes your problems should go away…

    Let me know if this works for you….as I’ve only tested it locally and on IE7…

    Javascript?! Good lord. Just make a site-wide.css file with one line of code in it

    body {width: 970px;}

    Does that not work?

    Avatar of hatiro
    HaTiRo
    Participant

    @hatiro

    Thanks, that’s a better suggestion, not really much of a coder, just stumble across solutions..

    If I find something that works I try and share that, but more often than not someone else has a much better idea, so not sure if its a help or hindrance……try to steer clear of javascript where possible though :)

    Let me know if that works. It would go in wp-content/themes/bphome/css/site-wide.css

    When I saw you all talking about using Javascript just to center a theme and give it a fixed width… I sensed someone somewhere along the line went down a rabbit hole :) LOL.

    Avatar of hatiro
    HaTiRo
    Participant

    @hatiro

    David,

    Sorry realised that I’d already got body width at a fixed size but not in site-wide, which when looking at it now seems obvious.

    Problem with IE however is in the calculating of sizes. When a user resizes the screen some elements are left floating and are not in line with the rest of the page. Hitting refresh works but it doesn’t help the user experience.

    The body width works fine in most cases, but the need to fix the rendering bug in IE is what has been causing the problem. That is what the javascript has been about. But in drilling down through various forums, the answer has been to try and fix the css. The problem seems to be the inheritance or lack of it of position:relative in IE. Adding this to a top-level div seems to work (for me anyway)…

    Hope that makes sense…..

    Ahh. I see! I gotcha now.

    I have seen this behavior in IE when you try to put a width on the body tag… which the default theme does. The simple solution is just to get rid of any width declarations on body (or maybe 100% would work) so the entire problem goes away. Just add a wrapper div around your entire site and put your page width on that. Open it as the first thing after body and close it just before the close body tag. Give it an id and then apply your width to that… so…

    HTML

    <html>
    <body>
    <div id="wrapper">
    [everything else]
    </div>
    </body>
    </html>

    CSS in site-wide.css

    body {
    min-width: 100%;
    max-width: 100%;
    }

    #wrapper {
    width: 970px;
    }

    Of course… this means editing your theme files (header and footer)… not just overriding some CSS. But I think this would be a better solution than relying on javascript hacks. Also, I have not tested this in IE… so I’m not 100% sure it will work. You might have to edit the base.css files to completely remove the min-max width declarations rather than just overriding them with 100% in the site-wide.css file.

Viewing 13 replies - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.