Simplifying Default Theme Structure

[alanchrishughes]

I like the default theme simply because all of the ajax coding and what not functions smoothly, the design isn't terribly bad and in theory is a pretty minimal design that shouldn't take much for people to customize, but the way it is coded is....... I've never seen anything like it.

Basically every single Wordpress theme and website in general that has a sidebar uses something like....

#page {width: 1000px; margin: 0 auto;}
#content {width: 700px; float: left}
#sidebar {width: 300px; float: left}

or whatever width or min-width/max-width you want to use, and that's it, very simple. Buddypress Template even suggests this. This would make it a piece of cake to customize. Right now I wouldn't even know where to begin to just make the sidebar wider or narrower, let alone anything advanced.

[boonebgorges]

Have you looked at the trunk version of bp-default? Its code is simplified in some ways, and the organization of its CSS has been greatly enhanced.

As for the point about "basically every single WordPress theme", I think you'll find that the complexity of bp-default's styling is roughly on a par with, for example, the Twenty Ten and Twenty Eleven themes that have shipped with recent versions of WordPress.

In any case, if you have specific suggestions for simplification, especially to the version of bp-default in the dev version of BuddyPress, they are more than welcome.

[alanchrishughes]

My specific suggestion is...

#page {width: 1000px; margin: 0 auto;}
#content {width: 700px; float: left}
#sidebar {width: 300px; float: left}

I'm not sure what you mean by the "trunk version." I just look at the theme that is inside of the plugin folder.

[boonebgorges]

I'm afraid I still don't understand what you're getting at. bp-default has a partially dynamic-width theme. #content is set as a percentage of #container ​http://buddypress.trac.wordpress.org/browser/trunk/bp-themes/bp-default/_inc/css/default.css#L103 which is, in turn, a percentage of body ​http://buddypress.trac.wordpress.org/browser/trunk/bp-themes/bp-default/_inc/css/default.css#L103, which is partially dynamic ​http://buddypress.trac.wordpress.org/browser/trunk/bp-themes/bp-default/_inc/css/default.css#L66 If we hardcode the width, it'll no longer be dynamic.

The width of #sidebar is set here: ​http://buddypress.trac.wordpress.org/browser/trunk/bp-themes/bp-default/_inc/css/default.css#L246

bp-default does not use a #page selector, so your #page suggestion would do nothing.

By "trunk version", I mean the latest development version of BuddyPress. You can browse it here ​http://buddypress.trac.wordpress.org/browser or download it here ​http://buddypress.trac.wordpress.org/changeset/4964/trunk?old_path=%2F&format=zip

I may be misunderstanding what you're saying. If you're suggesting that the markup itself be simplified, you'll have to provide specific examples of where they should change. Or if you're saying that dynamic width is a bad thing, you should say that. Or if you're just unhappy that we use so many CSS declarations, then I'm afraid I don't know what to say - that's just how bp-default is built. As I say in my previous comment, most modern WP themes have a relatively complex markup structure, which requires more than minimal CSS to look good across browsers.

[modemlooper]

The one thing if anything I'd ever change with the mark up is to remove .padder that alone has been a pain with child theme CSS customizations.

[alanchrishughes]

Well that's exactly what I am talking about, it's soooooo much unnecessary code and written so bizarrely and for what? So the #content column can fluctuate width a little bit? I'm suggesting wiping all that out entirely and just starting from scratch doing it like Buddypress Template

<div id="container">

[HEADER]

<div id="content">

[PAGE CONTENT]

</div>

<div id="sidebar">

[SIDEBAR CONTENT]

</div>

[FOOTER]

</div>

with three little lines of CSS (obviously adding some padding or margin and stuff to pretty it up).

#container {width: 1000px; margin: 0 auto;}
#content {width: 700px; float: left}
#sidebar {width: 300px; float: left}

simple...

[Jonnyauk]

Replying to modemlooper:

The one thing if anything I'd ever change with the mark up is to remove .padder that alone has been a pain with child theme CSS customizations.

+1 to remove #padder DIV too - I have to remove it every time!!

I'd be concerned about fixing widths on the default theme as Alan suggests though, this sould be left upto a child theme to do as the current default theme (BuddyPress 1.5Beta-2) is flexible width to a certain extent which works well IMHO as a default. Don't get me wrong - almost all the sites I design are fixed width, but as I said, this can easily be achieved within child theme CSS.

[mercime]

-1 to remove div.padder
Many are using it in child themes of live sites and many BP plugin components use it in template files. If you don't need it, you can easily override imported default.css by setting the following in child theme's style.css margin=0;padding:0 or target specific div.padder and style as required.

[alanchrishughes]

How would you go about writing fixed widths in a child theme? Or even just directly editing the theme? I've never seen anything this strange before.

[alanchrishughes]

It just really doesn't make sense for something like this to be the default theme. The functionality of Buddypress is complicated enough on its own and doesn't need a redundantly complicated theme on top of it. Maybe this could be maintained as a separate theme if some of you like it and a straight forward theme could be the default. Just an idea.

[r-a-y]

Maybe this could be maintained as a separate theme if some of you like it and a straight forward theme could be the default. Just an idea.

This is exactly why the functionality of child themes were created. Don't like the markup in the parent theme? Override the template in question.

And ​like mercime mentioned, we can't make rather, large markup changes in bp-default without fear of breaking other child themes that already rely on the existing markup.

---

Besides, ​theme compatibility to all WP themes in BP 1.7 makes this ticket a moot point.