BuddyPress.org

I’ve starting to customise both the home and member themes supplied with buddypress, adding my customisations to a file called custom-styles.css that, as Andy pointed out on the mailing list a few weeks back, is imported automatically. Everything works fine but I have some suggestions as to how it could be better implemented.

Currently custom-styles.css is called by way of an @import at the beginning of style.css. This is problematic for a couple of reasons. By calling the customisations BEFORE the default styles you must add “!important” to all your selectors in custom-styles.css in order to effectivly over-ride the defaults which can be a real nightmare. Also, as pointed out in Ticket 164 the @import reference to custom-styles.css is included in styles.css but the file itself is not included in the theme so a 404 is generated and the error logs get hammered.

I have implemented what I beleive is a better, cleaner approach:

style.css contains just two @import calls to default-styles.css and custom-styles.css (in that order). By default the latter can be either commented out or an empty file included with the theme.

The current content of style.css becomes default-styles.css (minus the @import call to custom-styles.css of course).

Basically this means that when customising the theme you can choose to add custom styles by over-riding in custom-styles.css or, as I imagine a lot of developers will prefer, completely replace the default styles by commenting out the default-styles.css import line and design from the ground-up (using default-styles.css just for reference).

This simplified approach should also be easier to manage as new builds are rapidly being released and applied during the development of BuddyPress.

I’d be interested to here how others have approached managing customisation as the platform has developed.