Styling BuddyPress integrated profiles

Hi

I am using s2Member (Pro) registration/profile fields integrated with BuddyPress. The data is appearing on the profile page but it is totally unstyled and inline eg:

Field Label 1 field data 1 Field Label 2 field data 2

Looking at the source code it is laid out in tables (with some very long class names!) eg:

<tr class="ws-plugin--s2member-profile-field-4bp ws-plugin--s2member-profile-4bp-field1 field_field1">
	<td class="ws-plugin--s2member-profile-field-4bp ws-plugin--s2member-profile-4bp-field1 field_field1 label">
		<span>Field Label 1</span>
	</td>
	<td class="ws-plugin--s2member-profile-field-4bp ws-plugin--s2member-profile-4bp-field1 field_field1 data">field data 1</td>
</tr>

But I cannot seem to style these tables with css eg:

td.field_field1 {
	font-weight: bold;
}

I am able to style the section title (which is in a div) which tells me the stylesheet in my theme is being applied to the page.

The problem is that, when I inspect the code with Firebug, the tables are not really there (I thought I knew a bit about php and css but I clearly know nothing about javascript!). The only formatting is:

<span>Field Label 1</span>field data 1<span>Field Label 2</span>field data 2

To cut a long story short, how do you style BuddyPress integrated profiles?

Hi Richard.

I’ll ask Jason about this, but could you post a link to your profile page to inspect it with Firebug a bit?

Thanks!

Cristián

Thank you, I think this is my bad, I am afraid to say.

I had adapted the default BuddyPress profile loop to use divs with individual class names based on the field name, rather than table cells without, so that I could change the layout.

When I started using s2Member fields instead I had the problem described above. I have replaced my profile-loop.php with the default one and I am now getting a stylable table based layout both in source view and Firebug.

I suppose if I now want to convert the s2Member table layout to divs I need to edit custom-reg-fields-4bp.inc.php?

Ah, thanks for the update. Glad you found the problem. :)

That seems a correct supposition. Future updates of s2Member would overwrite your customized file, though, so I suggest that you try making a copy of it and place it in the [hilite mono]/wp-content/mu-plugins/[/hilite] directory and edit that file instead. Haven’t tried it myself, but I think it may work.

I hope that helps.

Thank you for the suggestion but sadly edits to a

/wp-content/mu-plugins/custom-reg-fields-4bp.inc.php

file don’t seem to have any effect.

When I search the s2Member files for “ws-plugin–s2member-profile-field-4bp”, which I took from the code that s2Member puts in the BuddyPress profile for the custom fields, that’s the only file that comes up.

Do you have a caching plugin? Maybe you’re not seeing the updated page because of that.

My bad again!

I had my mu-plugins directory inside wp-content/plugins/ rather than inside wp-content/. Changes to mu-plugins/custom-reg-fields-4bp.inc.php work fine now of course.

I really want to ask another question in another topic but I have already wasted too much of your time and patience…

Oh, I’m glad you sorted it out. Thanks for the udpate!

No problem, start the threads you need, we’ll help what we can. :)