Need more theme-friendly output for profile fields

It looks like this was not fixed in the best way. The only change that was made is that the wrapping div now has a class:

<div class="facebook_info>
<div>Facebook name: John Smith</div>
<div>Interests: rock climbing, riding bikes, kickball</div>
</div>

This still does not fix the issue that themers cannot visually separate the title "Interests" from the list of interests. These sections are especially hard to read when the list of items is long. The problem with the fix is it still does not provide a wrapper for the title, in this example the word "Interests." This could be accomplished by using the <dt> and <dd> elements suggested in the original issue description (above)

Bad: Here is how a user's profile currently looks (screenshot)

Good: Here is how the profile could look with some proper HTML elements and CSS classes (screenshot)

Please disregard this patch, I found some errors. I will be submitting a new one shortly.

Update: This patch creates a .css file, but does not alter the .module file so that the stylesheet is automatically loaded. See comment #7 to see how to do this manually until the next patch is rolled out.

Here is a patch which accomplishes what is outlined in comment #3. Here are the changes it makes to fbconnect.module:

1. Removes the wrapping <div> around each Facebook profile field
2. Inserts a <dt> around the $label items
3. Inserts a <dd> around the $value items
4. Places a <dl> inside the <div class="facebook_info"> wrapper
5. Places a <div class="clear"></div> after the <div class="facebook_info"> wrapper

Notes

• The module will now need to include a custom CSS file which includes minimal styling for the new <dt> and <dd> elements. Applying the patch inside /modules/fbconnect/ will create a new file at /modules/fbconnect/fbconnect.css.
• #5 requires a div.clear {clear: both;} to be set in the CSS. This is so the floated Facebook field elements will play nicely with the rest of the content on the profile page. There is probably a better way to do this, but I have included this code in the fbconnect.css file for now.

I've also noticed that this module places the <div class="facebook_info"> in a strange hierarchy in the HTML (inside a <dd> element)

- <div class="profile">
-- <div class="picture">
-- <dd>
--- <div class="facebook_info">
-- <h3>History</h3>
-- <dl class="user-member">

Recommendations:

• Remove the <dd> container for <div class="facebook_info">
• Change <div class="facebook_info"> to a <dl> element, i.e. <dl class="facebook_info">

Until the next patch is released, you can manually edit fbconnect.module so that it will automatically load the stylesheet (fbconnect.css)

Find the following line:

function fbconnect_init() {

And add this line below it

drupal_add_css(drupal_get_path('module', 'fbconnect') .'/fbconnect.css');