BuddyPress

Hi all,

Shifting the sidebar to the left (child theme of bp1.2.2.1 default) seems like it would be a straightforward task, but I just can’t get it to behave ;-(

I thought that swapping the margin settings of the .padder and #sidebar divs would suffice but, alas, no good. That only creates a blank space on the left where the sidebar could go, but the sidebar contents still display on the right.

Here’s a screenshot of what happened: http://i44.tinypic.com/33zclz8.jpg

This is what I tried:

div#content .padder {
margin-left: 241px;
border-right: 1px solid #e4e4e4;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px;
}
div#sidebar {
float: left;
width: 240px;
margin-right: -242px;
margin-top: 1px;
border-left: 1px solid #e4e4e4;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
background: url( ../images/sidebar_back.gif ) top left repeat-x;
}

I can usually find my way in css (php is still new to me), but this has got me stumped! Any suggestions or guidance?

You would also need to set the #content to float:right

This is a basic source ordering technique that’s been employed #container acts as a wrapper and must be floated opposite to the sidebar direction to allow the sidebar to position alongside but after in the source markup

@hnla

Thank you!

I didn’t think of that, and it helped a lot. I needed to tweak some other stuff too. Like floating div#content .padder left and giving it a fixed width in my fixed width template (otherwise the contents of every page would bunch up against the right edge). But your suggestion got me going to exactly where I wanted to get.

A final adjustment to the header image, and voilà: http://rspace.org

Now that I have the site looking the way I want it, I can get back to content. Yay!

Update: of course, IE being the pain in the a** that it is, everything’s out of whack!

More fiddling to be done…

Any suggestions for an IE fix?

depends on what version of IE but try this:
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
or
<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

Hmm works for me in IE6, what exactly is out; is the sidebar simply positioned below clearing #content?

If still having issues you can try a few thngs, firstly as a test add zoom:1; to #content .padder to establish whether .padder requires hasLayout..

Go to a more traditional source order set of styles which would involve giving the #content element a negative left margin equal or greater than the sidebar then padder gets the a normal margin to pull it clear of the sidebar area, the sidebar is floated and has a negative margin 100%.

You shouldn’t really need to be adding meta tags to control IE8 it generally works fine and certainly doesn’t want to act as IE7. Compatibility mode is a bit of a joke it’s far more sensible to add a conditional stylesheet to handle earlier versions than force IE8 to render in cack mode throwing away all it’s benefits and improvements

@hnla

Thanks for the additional input, I’ll try your suggestions. 100% neg margin for the sidebar sounds intriguing. I think I’m more comfortable with the 2nd solution you laid out… ‘cuz I know what you’re talking about

While I’m playing with L&F, I’m trying something else at the same time: rather than sidebar left, repurpose the header image to better fit sidebar right (with the searchbox and navbar to the left).

Thanks again (a bunch!) for your help. I’ve got this thread bookmarked.

BTW, yes, the sidebar was positioned below clearing #content in IE7.

One other thing about the layout, the positioning of the admin bar is not too clever with regards IE early versions that never understood position fixed, and other approaches would need to be found unless happy to have that adminbar actually sit as a footer.

With site layouts and sidebar columns a standard framwork I have always employed as a base is essentially two main parent containers along with a #content-wrap ( = bp #content) and a #content (bp = .padder) with either one or two sidebars that follow immediately after #content closes, using that arrangement one can fashion source ordered layouts with one or two sidebar, placed singularly left or right or flanking the content as a pair, with the a very simple group of rulesets to provide layout switching based on html or body IDs. #content-wrap is always floated with negative side margin as appropriate #content with a positive margin as appropriate, sidebars will drop into place using negative margins, the one oddity is that one has to be aware of the content-wrap float direction and that it must state a width otherwise earlier versions of Opera would have a fit

@hnla

Bingo! Thanks for that!

My confusion with negative/positive margins and right/left floats – and which divs should wear which – led me astray. As I’m a low-tech, visually-oriented kind of fella, I’ll try first drawing myself a paper sketch of my desired layout & values using your cues. I’ll do it later today though ‘cuz I’m going to treat myself to the luxury of an afternoon nap with my cat

Thanks again for your help, I really appreciate it.

No problem, there may be further issues as frankly I haven’t bothered to look to closely at IE<8 and have been simply playing with extending the default styles which to be honest can be problematic trying to style or override existing rules, but the right group of elements exist in the markup to be able to configure as one wants. I’ll probably be looking closer at IE6 and it’s handling of three column fluid content layout and switching in/out of sidebars so if I find issues I’ll post them back (one that immediately springs to mind is that of handling of min/max widths as used in default)

Hurrah!

After finally getting around to installing the Firebug for Firefox addon, I was able to fiddle to my heart’s content with the css and get the sidebar off to the left, just the way I wanted it!

Firebug: highly recommended to anyone who wants to change stuff around, but who ain’t all that fluent in the lingo. That would be me

Rats! Now my footer content shows up at the bottom of the sidebar content.

Back to the drawing board…

Here is my issue: I am trying to match up my sidebar to flow with the rest of the site but I cannot find the template files to adjust the structure, here is the link: http://charlottediversified.biz/members/admin/.

Now I should not have to adjust the wp theme itself (studiopress magazine_10), I should be able to modify the template files of the bp files. However, I cannot find which file to modify to place the sidebar in the correct container.so that it will line up correctly as the other pages are.

Can someone help me? Thanks.