[piccs3o]

Hi, I am running the Buddypress default theme on my test site http://www.irrilium.com/SecretPlan and have hit a snag.

I would like to differentiate the look of the Members page and the Groups page.

I am looking to have a different Group Avatar size to the Members Avatar and also introduce a background image to the Groups item list div

However both pages use the same class for both the Avatars and the item list which means changes to Groups effects Members which is admirably efficient but reduces customisation options..

I am new to PHP and CSS so am unsure on how to proceed.

I am guessing that I need to introduce at least one sub-class for both the avatar and item list to gain the differentiation I need within the child theme, replicating the directory structure used by the Buddypress default theme within the child theme. That way I can customise Groups using the new avatar class and item list class and adjust the default theme CSS via the child theme to get the Members page looking the way I want.
Is this the correct method? It seems like a big mod for a relatively simple change. Am I missing a simpler way of getting the members page and the Groups page to look different.

I would be grateful for any suggestions.

[Hugo Ashmore]

If you look at the body element and swap between the pages you should see various different classes applied depending on page being viewed. You should be able to use these classes to effect descndent selector styling, in other words you will add a class from the body element at the start of your selector group e.g:

body.groups #id .class {}
body.directory #id .class {}
body.profile #id .class {}
etc

The question of these classes has been raised and improvements to them have been committed to 1.3 to make it a little easier to use these hooks for styling.

At the moment you might find that to, say, style all the single member pages you have to group styles as there isn’t a class that covers the general members account/profile pages views.

working in a child theme yes you can copy over files and add extra classes where you think it helps and/or add custom styles to the main stylesheet in the child theme to override the default styles. When copying files over preserve the directory structure that exists in bp-default so your files get found and used in preference to the default ones.

[piccs3o]

Thank you hnla for a quick and detailed response. So to check if I understand you correctly, by introducing the correct classes in the correct order I can differentiate the Avatar and Item-lists of the Groups and Members pages and apply different CSS styling?

[Hugo Ashmore]

Yep decedent selectors are actually the space you might leave between the selectors, a space says that the selector/element on the extreme right has to have a parent or ancestor/antecedent that matches to the one on the left thus:

#my-element a {} means that the anchor will only have these styles if it is nested at some point in an element named as #my-element.

At some point is important as a descendant selector denotes a hierarchy to any level or depth, that anchor can be further nested in a dozen elements.

So if you had styles for avatar that ran something like this:

li div.item-avatar a.avatar {}

but you wanted to change it in some way for say the account page ‘friends view’

then you could do:

body.friends li div.item-avatar a.avatar {}

It all depends on how the original has been styled as to how you override it and you have to be aware of the specificity of the selector rule or the ‘weight’, if the original styles using selectors like this:

#some-id #another-id li div.item-avatar a.avatar {}

then you new rule will not override it as each selector carries a weighted value and ID’s carry the heaviest value so their selector group trumps yours, you would need to add a few IDs or match IDs until your selector set had a higher value.

[piccs3o]

Very cool, many thanks for the excellent help : )