How to change the user-profile.tpl.php file to a customized outline like Linkedin for Drupal 7?

Question

I'm using Drupal 7.9 for an internal website. I'm trying to customize the "user-profile.tpl.php" file so it shows the fields that I've customized in the "admin/config/people/accounts/fields" to be shown below:

<<>>image block on the left<<>>

"Full Name
Job Title/Position

Your Organization Name Here, INC
1234 Your Address Here
Long City Name, ST 12345

(P) 555-123-1234
(E) emailaddress@somecompany.com"

But I'm having an issue writing the PHP in the "user-profile.tpl.php" file (I didn't touch the user-profile-category.tpl.php or the user-profile-item.tpl.php files)

This is what I've coded, which obviously is printing everything out wrong.

<div class="profile" style="float:left; width:100%;">

<div class="profile-image" style="width:20%; float:left;">
    <?php if ($user_picture): ?>
      <div class="user-picture">
        <?php print $user_picture; ?>
      </div>
    <?php endif; ?>
</div>

<div class="profile-info" style="width:80%; float:left;">
    <h1><?php print render($user_profile['field_profile_full_name']) ?></h1>
    <p><?php print render($user_profile['field_profile_job_title']) ?></p>

    <h3><?php print render($user_profile['field_profile_organization']) ?></h3>
    <p><?php print render($user_profile['field_profile_address']) ?><p>
    <p><?php print render($user_profile['field_profile_city']) ?>, <?php print render($user_profile['field_profile_state']) ?> <?php print render($user_profile['field_profile_zip_code']) ?></p>

    <h3>(P)<?php print render($user_profile['field_profile_business_phone']) ?></h3>
    <h3>(E)<?php print render($user_profile['field_profile_e_mail_address']) ?></h3>

</div>

</div>

When it prints on the page, everything still has a bunch of page breaks and space in between the info. And the address line isn't included in one block, it puts it on a new line each item.

How do I write the code so I can get the format outlined above?

Answer 1

You can utilize views module to achieve what are you looking for, with some CSS styles.

While using views you have two options view user information:

Option 1:

1. Create block view (Users)
2. Select user fields you want to display
3. Then add Contextual filters (User: Uid)
4. From the configuration page make sure to select Provide default value
5. Then from Type drop down menu select User ID from logged in user.
6. Then apply changes.
7. Save view.
8. Under Structure -> Blocks locate the new created view in content region
9. Configure the block to appear only on the user account page user and users/*
10. Then you need to clear the original drupal content in the user view account page by apply this custom module.

Code:

function mymodule_menu_alter(&$items){
  $items['user/%user']['page callback'] = 'mymodule_user_view_page';
}

function mymodule_user_view_page() {
  return array();
}

Option 2:

1. Create page view (Users)
2. Apply steps 2-6 as Option 1
3. Add Path user/%user under Page Settings
4. Save view.

Answer 2

This seems working.

However there is a issue regarding this implementation.

Users registered after creating this view block are not able to see any detail in My profile page.

Only the users registered before creating this block view are able to see their profile page .