*NOTE: The heart next to the name flashes pink, or whatever color you set it to, when a user is online. The heart and the social icons are from Font Awesome, so you'll need to first put their code in your forum wrapper. Also, if you wish to use something other than the heart, you can


Step 1: Go to Admin > Themes > Layout Templates and navigate to the "Forum Wrapper." Directly beneath this part of the forum wrapper:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Place the following code to make sure your forum has access to the Font Awesome icon library.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Step 2: Go to Admin > Themes > Advanced Styles & CSS and click on the "Style Sheet" tab. Enter the following CSS:

/*custom profile remodel by Teg http://promoforum.net*/
/*Do not edit unless the CSS section says to edit*/
table.pro_status {
       margin-top: 20px;
       margin-bottom: 20px;
   }
   td.pro_status {
       width: 85%;
       padding: 20px auto;
       text-align: center;
       font-size: 20px;
   }
   .pro_ava_area {
       width: 160px;
       padding-right: 20px;
       height: auto;
       margin: auto;
   }
.pro_ava_area2 {
       width: 150px;
       height: auto;
       margin: auto;
   }
   .pro_user_name {
       text-align:center;
    font-size: 18px;
   }
.pro_ava_area_groups {
       text-align:center;
       margin-top: -15px;
       padding-bottom: 5px;
   }
   .social_nets {
       line-height: 20px;
       width: 150px;
       text-align:center;
   }
   .pro_buttons {
    margin: auto;
    text-align: center;
   }
   .space {
       min-height: 20px;
   }
   .about_me {
       padding: 10px;
       min-height: 160px;
       font-size: 14px;
   }
   table.pro_info {
    float: right;
   }
   th.about_me {
       text-align: left;
   }
   td.pro_info {
       /*The background color here refers to the color of the
       background for each column on the row. It is where the
       default stats will show. You can edit the background color
       of this section.*/
       background-color: #f2f2f2;
       line-height: 14px;
       font-size: 14px;
       text-align: center;
       width: 225px;
       padding:10px;
   }
   td.pro_info_custom_title {
    font-weight: 600;
   }
   td.pro_none_found {
    font-style: italic;
   }
td.space {
       min-width: 5px;
       border: none !important;
   }
   hr.spaced {
       border: 0 !important;
   }
i.social_nets-chat {
   /*The color here refers to the color of the
   social media icons. The icons will defaultly show this
   color unless you change it. You can edit the color
   of this section.*/
   color: #43494c;
   font-size: 18px;
   line-height: 20px;
   padding-top: 3px;
   padding-bottom: 3px;
}
i.social_nets-chat:hover {
   /*The color here refers to the color of the
   social media icons hover color. The icons will defaultly show this
   color unless you change it. You can edit the color
   of this section.*/
   color: #e45f72;
}
i.online_icon_pro {
   /*The color here refers to the color of the
   ONLINE heart that will fade in and out if the user is online.
   The icons will defaultly show this color unless you change it.
   You can edit the color
   of this section.*/
   color:#e45f72;
}
/*Do not Edit anything below this comment for the PF Profile code by Teg*/
/*This creates the blinking/flashing heart effect. Again, do not edit this.*/
.blink_me {
   -webkit-animation-name: blinker;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   
   -moz-animation-name: blinker;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;
   
   animation-name: blinker;
   animation-duration: 1s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
   0% { opacity: 1.0; }
   50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
   0% { opacity: 1.0; }
   50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes blinker {  
   0% { opacity: 1.0; }
   50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}
Step 3: Go to Admin > Themes > Layout Templates and navigate to the "User Profile" section. Select everything in the User Profile tab. Then, delete it. Copy and past the following code into the "User Profile Tab:"

<!--Start PF Profile Remodel by Teg at http://promoforum.net-->
<!--Feel free to post this template anywhere you like. Please give credit where credit is due.-->
<div class="container show-user">
<div class="title-bar">
<h1>View Profile - $[user.name] ($[user.username])</h1>
</div>
<div class="content cap-bottom">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
{foreach $[menu]}<li{if $[menu.active]} class="ui-active"{/if}><a href="$[menu.href]">$[menu.text]</a></li>{/foreach}
</ul>
</div>
       {if $[route.name] == "user"}
<div class="pad-all-double clear">
         <!--This is where the status update will apppear. Members will have to update this via their profile, as the status
 form is not included-->
            <div class="pro_status">
                         <table class="pro_status">
<tr>
                               {if $[user.personal_text]}
<td class="pro_status">$[user.personal_text]</td>
                               {/if}
</tr>
                       </table>
            </div>

           
           <!--This area affects the User's displan name, online/offline status, user avatar, social media icons (if the user has them) and the settings, edit profile, send message buttons.-->
<div class="float-left">
<div class="pro_ava_area">
<!--User display name-->
<div class="pro_user_name">$[user.name]
                           <!--User offline/online status-->
{if $[user.is_online]}
<span class="online_icon_pro"><i class="online_icon_pro blink_me fa fa-heart"> </i></span>
{else}
<span class="online_icon_pro"><i class="fa fa-heart"></i></span>
{/if}
                       </div>

<!--This area affects the User's avatar-->

$[user.avatar]

<!--This applies to the user group/rank-->
{if $[user.group]}
<div class="pro_ava_area_groups">$[user.group.stars]</div>
{else}
<div class="pro_ava_area_groups">$[user.rank.stars]</div>
{/if}

<!--This applies to the social media/chat icons-->
{if $[user.social_exists]}
<div class="pro_ava_area2">
{if $[user.social_network]}
<div class="social_nets">
{foreach $[user.social_network]}
<!--Facebook-->
{if $[user.social_network.iteration] == "1"}
<a href="$[user.social_network.href]" target="_blank"><i class="social_nets-chat fa fa-facebook-square" title="Facebook"></i></a>
{/if}
<!--Google +-->
{if $[user.social_network.iteration] == "2"}
<a href="$[user.social_network.href]" target="_blank"><i class="social_nets-chat fa fa-google-plus-square" title="Google +"></i></a>
{/if}
<!--LinkedIn-->
{if $[user.social_network.iteration] == "3"}
<a href="$[user.social_network.href]" target="_blank"><i class="social_nets-chat fa fa-linkedin-square" title="LinkedIn"></i></a>
{/if}
<!--Twitter-->
{if $[user.social_network.iteration] == "4"}
<a href="$[user.social_network.href]" target="_blank"><i class="social_nets-chat fa fa-twitter-square" title="Twitter"></i></a>
{/if}
<!--YouTube-->
{if $[user.social_network.iteration] == "5"}
<a href="$[user.social_network.href]" target="_blank"><i class="social_nets-chat fa fa-youtube-square" title="YouTube"></i></a>
{/if}
{/foreach}

<!--This applies to the chat icon for skype. *NOTE: The only chat item this template applies to is skype, it doesn't include, Yahoo messenger, AIM, or ICQ-->
{foreach $[user.instant_messenger]}
<!--Skype-->
{if $[user.instant_messenger.name] == "Skype"}
<i class="social_nets-chat fa fa-skype" title="$[user.instant_messenger.value]"></i>
{/if}
{/foreach}
</div>
{/if}
</div>
{/if}
                       <hr>
                   <!--This next bit applies for the settings, send message, and edit profile buttons-->
<div class="pro_buttons">
$[options]<br /><br />
$[send_message_button]<br /><br />
$[edit_profile_button]<br /><br />
</div>
</div>
</div>
           
           <!--This next area applies to all the profile fields. This includes one custom profile text area. You can include more, but you will need to add them in.-->
           <div class="space"></div>
            {foreach $[user.custom_field]}
           <!--About Me/About Section-->
            {if $[user.custom_field.name] == "About"}
<div class="content-box center-col">
                   <!--Custom Profile Area: It is recommended that you use text areas or things that can span across the width of the profile for this section-->
<table>
<tr>
                           <th class="about_me">$[user.custom_field.name]</th>
                       </tr>
<tr class="$[user.custom_field.content_class]">
<td class="about_me">
                                  $[user.custom_field.value]
</td>
                        </tr>
                   </table>
               </div>
                    {/if}
   {/foreach}
             
           <hr>
           <!--This is the area for all the normal profile fields-->
            <div class="content-box center-col" style="border: 0;">
                   <table style="float:right;">
                       <!--FIRSt ROW-->
                       <tr>
                           <!--Custom Title-->
                           {if $[user.custom_title]}
                           <td class="pro_info"><strong>$[user.custom_title]</strong></td>
                           {else}
                           <td class="pro_info"><em>User has no custom title</em></td>
                           {/if}
                           <!--User Location-->
                           <td class="space"></td>
                           {if $[user.location]}
                           <td class="pro_info">$[user.location]</td>
                           {else}
                           <td class="pro_info"><em>Location unknown</em></td>
                           {/if}
<td class="space"></td>
                           <!--Post Count-->
                           {if $[user.posts]}
                           <td class="pro_info"><em>Posts:</em> $[user.posts]</td>
                           {else}
                           <td class="pro_info"><em>This user has no posts</em></td>
                           {/if}
                       </tr>
                       <tr>
                           <td colspan="5">
                       <hr class="spaced">
                           </td>
                       </tr>
                       <!--SECOND ROW-->
                       <tr>
                           <!--Email-->
                           {if $[user.email]}
                           <td class="pro_info">$[user.email]</td>
                           {else}
                           <td class="pro_info"><em>User email is hidden</em></td>
                           {/if}
<td class="space"></td>
                           <!--Gender-->
                           {if $[user.gender]}
                           <td class="pro_info">$[user.gender.text]</td>
                           {else}
                           <td class="pro_info"><em>Gender not specified</em></td>
                           {/if}
<td class="space"></td>
                           <!--Likes Received-->
                           {if $[user.likes]}
                           <td class="pro_info"><em>Likes:</em> $[user.likes]</td>
                           {else}
                           <td class="pro_info"><em>Nobody likes me...</em></td>
                           {/if}
                       </tr>
                       <tr>
                           <td colspan="5">
                       <hr class="spaced">
                           </td>
                       </tr>
                       <!--THIRD ROW-->
                       <tr>
                           <!--Website-->
                           {if $[user.website]}
                           <td class="pro_info">$[user.website]</td>
                           {else}
                           <td class="pro_info"><em>No Website Found</em></td>
                           {/if}
<td class="space"></td>
                           <!--User Birthday/Age-->
                           {if $[user.birthday]}
                           <td class="pro_info">$[user.birthday]</td>
                           {elseif $[user.age]}
                           <td class="pro_info">$[user.age] years old</td>
                           {else}
                           <td class="pro_info"><em>Birthday Unknown</em></td>
                           {/if}
<td class="space"></td>
                           <!--Join Date-->
                           <td class="pro_info"><strong>Joined:</strong><em> $[user.registered_on_short]</em></td>
                       </tr>
                   </table>
</div>
</div>{/if}
<div class="pad-all-double ui-helper-clearfix clear">
$[content]
</div>
</div>
</div>
Step 4: Select the "Summary" tab. Wrap the entire code to hide it. To do this, add this to the beginning (the very beginning):

<!--
Then, at the very end, add:

-->
Step 5: Go to Admin > Members > Custom Profile Fields. You need to create the "About" field. So, name the field "About" and set the type to Text Area from the drop down box. Ensure that the areas location is in the Member Profiles only, not the mini profile. Then, make sure the people who can edit are Member and Staff with Power. Once you've created the field you should be okay.


*Note: If you wish to change the name of the field, you will need to change it in the template as well. To do this, locate this section of code:

<!--About Me/About Section-->
            {if $[user.custom_field.name] == "About"}
Change the "About" to "yournamehere" and it should present the correct text area. Your user profile, and that of all your members should now look like the above. 

*NOTE: In the CSS, I've indicated where you can change the colors and written descriptions, please pay attention to those before asking an questions. If you have any issue. I'll be here.