Member Profile Request

[Former Member]

Oh yeah, I just grabbed some social media icons to use for the template.

If you could keep facebook, twitter, youtube, and skype, that would be great.

[Teg]

Sept 29, 2015 6:50:42 GMT -8 @seriously said:

Oh yeah, I just grabbed some social media icons to use for the template.

If you could keep facebook, twitter, youtube, and skype, that would be great.

ill add skype real quick and send it to ya here I suppose.

There some things you will have to edit. Like padding and such depending on the width of your forum and how wide you want everything. Same with some colors. The horizontal rule style is default for my actual them so if you want it that way you'll have to add border styling in the CSS . I will get this posted when I awake from my nap lol you have no idea... I've been working on this since 3am... It's 11am and I haven't slept at all

[Former Member]

That's not a problem at all. I'm sure I can handle a few edits here and there without breaking anything.

*knocks on wood*

Enjoy your nap! You have my sincerest gratitude for all of your hard work, and I commend you for staying
up late just to do it.

I look forward to the post/PM!

[Teg]

Sept 29, 2015 7:04:04 GMT -8 @seriously said:

That's not a problem at all. I'm sure I can handle a few edits here and there without breaking anything.

*knocks on wood*

Enjoy your nap! You have my sincerest gratitude for all of your hard work, and I commend you for staying
up late just to do it.

I look forward to the post/PM!

Yeah... So I may actually use this for my own forum (if you don't mind), I really like it... Alright... 

So, this goes into the "User Profile" tab. Highlight everything in that tab.. Hit delete, then add this:

<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>
<div class="pad-all-double clear">
           {if $[can.update_status]}
            <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>
{/if}
<div class="float-left pro_ava_area">
<div class="float-left pad-right">
                   <span style="color: $[user.color]; font-size: 18px; padding-left: 6px;">$[user.name]</span><span style="padding-left: 39px; line-height: 18px;">{if $[user.is_online]}
<img src="http://storage.proboards.com/6348926/i/jH8X7h48pPabTDVglW2T.png" alt="online indicator">
{else}
<img src="http://storage.proboards.com/6348926/i/OSc6JRUhw2DwRExRmz5b.png" alt="offline indicator">
               {/if}</span><br />
                   $[user.avatar]
                {if $[user.group]}
                   <div class="pro_ava_area_text">$[user.group.name]</div>
{else}
                   <div class="pro_ava_area_text">$[user.rank.name]</div>
{/if}
               
               {if $[user.social_exists]}
<div class="content-box">
{if $[user.social_network]}
<div class="social_nets">

                               {foreach $[user.social_network]}

{if $[user.social_network.iteration] == "1"}
<a href="$[user.social_network.href]" target="_blank"><img class="social_icons" src="http://storage.proboards.com/6348926/i/FNm_xgMXICPAzbXlgney.png" alt="$[user.social_network.href]" title="$[user.social_network.href]" /></a>
{/if}

{if $[user.social_network.iteration] == "2"}
<a href="$[user.social_network.href]" target="_blank"><img class="social_icons" src="http://storage.proboards.com/6348926/i/DPOJd2F1nXd6BRwJ5DpK.png" alt="$[user.social_network.href]" title="$[user.social_network.href]" /></a>
{/if}

{if $[user.social_network.iteration] == "3"}
<a href="$[user.social_network.href]" target="_blank"><img class="social_icons" src="http://storage.proboards.com/6348926/i/GD8foaJI0LKM8wWZUVkk.png" alt="$[user.social_network.href]" title="$[user.social_network.href]" /></a>
{/if}

{if $[user.social_network.iteration] == "4"}
<a href="$[user.social_network.href]" target="_blank"><img class="social_icons" src="http://storage.proboards.com/6348926/i/l18ahi76f5OfN1mBmcX8.png" alt="$[user.social_network.href]" title="$[user.social_network.href]" /></a>
{/if}

                               {if $[user.social_network.iteration] == "5"}
<a href="$[user.social_network.href]" target="_blank"><img class="social_icons" src="http://storage.proboards.com/6348926/i/qCvZpcdv0aIfAUhbmcV0.png" alt="$[user.social_network.href]" title="$[user.social_network.href]" /></a>
{/if}
{/foreach}
                               
                               {foreach $[user.instant_messenger]}
                               {if $[user.instant_messenger.name] == "Skype"}
                               <img class="social_icons" src="http://storage.proboards.com/6348926/i/r_7KHPjOTMTMuM3XrCej.png" alt="Skype" title="$[user.instant_messenger.value]">
                               {/if}
                               {/foreach}
                             
                               
</div>
{/if}

</div>
{/if}
                   <div style="margin: auto;text-align: center;">
                   $[options]<br /><br />
$[send_message_button]<br /><br />
$[edit_profile_button]
                   </div>

               </div>
</div>

           <div class="space"></div>
<div class="content-box center-col">
<table>
<tr>
{foreach $[user.custom_field]}
                            {if $[user.custom_field.name] == "About"}
                            <th class="about_me">$[user.custom_field.name]</th>
<tr class="$[user.custom_field.content_class]">
<td class="about_me">
                                  $[user.custom_field.value]
</td>
                        </tr>
                        {/if}
{/foreach}
                   </table>
               </div>
           <hr>
            <div class="content-box center-col" style="border: 0;">
                   <table style="float:right;">
                       <tr>
                           {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}
                           <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>
                           {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>
                       <tr>
                           {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>
                           {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>
                           {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>
                       <tr>
                           {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>
                           {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>
                           <td class="pro_info"><em>Joined: $[user.registered_on_short]</em></td>
                       </tr>
                   </table>
</div>
</div>

<div class="pad-all-double ui-helper-clearfix clear">
$[content]
</div>

</div>
</div>


Then, navigate over to the summary tab. Select everything, delete and replace with 
<!--$[form.header]<table>
<tr>
<td id="center-column">

{if $[user.warning.bar]}
<div class="content-box center-col">
<table><tr><td class="warning-table-td">Warning Level: </td><td>$[user.warning.bar]</td></tr></table>
</div>
{/if}
{if $[user.badges]}
<div class="content-box center-col $[user.badges_container_class]">
{foreach $[user.badges]}$[user.badges]{/foreach}
$[user.gift_link]
</div>
{/if}
<div class="content-box center-col">
<table>
<tr>
<td class="headings">Latest Status:</td>
<td>$[user.personal_text]</td>
</tr>
{if $[user.custom_title]}
<tr>
<td class="headings">Custom Title:</td>
<td>$[user.custom_title]</td>
</tr>
{/if}
{if $[user.email]}
<tr>
<td class="headings">Email:</td>
<td>$[user.email]</td>
</tr>
{/if}
{if $[user.website]}
<tr>
<td class="headings">Web Site:</td>
<td>$[user.website]</td>
</tr>
{/if}
{if $[user.birthday]}
<tr>
<td class="headings">Birthday:</td>
<td>$[user.birthday]</td>
</tr>
{/if}
{if $[user.age]}
<tr>
<td class="headings">Age:</td>
<td>$[user.age]</td>
</tr>
{/if}
{if $[user.gender]}
<tr>
<td class="headings">Gender:</td>
<td>$[user.gender.text]</td>
</tr>
{/if}
{if $[user.location]}
<tr>
<td class="headings">Location:</td>
<td>$[user.location]</td>
</tr>
{/if}
<tr>
<td class="headings">Posts:</td>
<td>$[user.posts]</td>
</tr>
<tr>
<td class="headings">Date Registered:</td>
<td>$[user.registered_on]</td>
</tr>
{foreach $[user.custom_field]}
<tr class="$[user.custom_field.content_class]">
<td class="headings">
$[user.custom_field.name]:
</td>
<td>
$[user.custom_field.value]
</td>
</tr>
{/foreach}
</table>
</div>

<div class="content-box center-col">
$[recent_posts_link]<br />
$[recent_threads_created_link]
</div>
{if $[user.signature]}
<div class="content-box center-col">
Signature <hr />
$[user.signature]
</div>
{/if}
</td>
<td id="right-column">
{if $[following]}
<div id="following" class="content-box right-col">
<h4>$[view_following_link]</h4>
{foreach $[following]}
<div class="mini-user">
<div class="mini-avatar">
$[following.avatar_medium]
</div>
<span class="name">
$[following]
</span>
</div>
{/foreach}
</div>
{/if}
{if $[follower]}
<div id="followers" class="content-box right-col">
<h4>$[view_followers_link]</h4>
{foreach $[follower]}
<div class="mini-user">
<div class="mini-avatar">
$[follower.avatar_medium]
</div>
<span class="name">
$[follower]
</span>
</div>
{/foreach}
</div>
{/if}
</td>
</tr>
</table>-->
$[form.footer]

And lastly... go to Advanced Styles & CSS... at the very bottom... paste this... 
/*custom profile remodel by Teg http://promoforum.net*/
.avatar_size_medium img, .avatar_size_medium medium { max-height: 220px; max-width: 160px; border: 1px solid #000000;}
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;
   }
   .pro_ava_area_text {
       text-align: center;
       padding-top: 2px;
       padding-bottom: 2px;
   }
   .social_nets {
       margin: auto;
       line-height: 18px;
       text-align: center;

   }
   img.social_icons {
       width: 16px;
       height: 16px;
       padding-left: 1px;
       padding-right: 1px;
       padding-top: 3px;
   }
   .space {
       min-height: 20px;
   }
   .about_me {
       padding: 10px;
       min-height: 160px;
       font-size: 14px;
   }
   th.about_me {
       text-align: left;
   }
   td.pro_info {
       background-color: #e8e8e8;
       line-height: 18px;
       font-size: 14px;
       text-align: center;
       width: 250px;
       padding:10px;
   }
td.space {
       min-width: 5px;
   }
   hr.spaced {
       border: 0;}

Now... if you have any issues, let me know.. I'm going to create a support thread specific for this, so ask your questions there! Enjoy!

[Teg]

Actually for now... Post in here cause I'm adding and changing a few things before I post a suppor thread lol

[Azy]

Teg, you went all out, girl Bloody nice work!

[Teg]

Sept 29, 2015 15:39:15 GMT -8 Azy said:

Teg, you went all out, girl Bloody nice work!

LOL, Thank you. It was her design, I just implemented it Now, I'm trying to clean up the code and add comments, remove images and add font-awesome icons instead in certain places. I hope she likes it.    

[Former Member]

I'm here! Just woke up from a 10 hours nap, LOL.

I'm going to add this to the test forum and see how everything looks!

---

Alright so the only issue I'm having is that the about me section will not show up.

Edit 2: I figured out the issue. I have the custom field labeled "About Me" and just changed the About in the code to that.

[Teg]

What's the full name of the "About Me" custom field. Make sure that's inputed correctly. Because everything for that table is showing me empty.

[Teg]

Sept 29, 2015 17:47:02 GMT -8 @seriously said:

I'm here! Just woke up from a 10 hours nap, LOL.

I'm going to add this to the test forum and see how everything looks!

---

Alright so the only issue I'm having is that the about me section will not show up.

Edit 2: I figured out the issue. I have the custom field labeled "About Me" and just changed the About in the code to that.

I've been sitting here for like an hour waiting for you to reply lol and I just now saw your edit

You can see my revisions here...http://tegstestboard.boards.net go to the admin profile

[Former Member]

I had another question for you. I should have put this in before, but the gender options on the forum are a custom field so that I could add in more than just female/male. (At members' request.)

How would the coding for that look like? I want it in the same box as the default genders. I tried to play around with it myself and set it to a {if $[user.custom_field.name] == "My Gender"} type thing, but it would default to the {else} "No Gender Specified" option.

[Azy]

If you guys get stuck on the custom gender dinger, I can share my template with you
It hides the system default gender box from the profile and mini profile in the event a member has this enabled when they select a custom gender. That way you don't have two popping up.

[Former Member]

I already have the default gender hidden, it's just a matter of getting the custom ones to show up on the profile.

[Teg]

Oct 4, 2015 7:40:52 GMT -8 @seriously said:

I already have the default gender hidden, it's just a matter of getting the custom ones to show up on the profile.

Well, I'm not a hundred percent sure how to go about that because in order to use a custom field in a profile layout, you have to use foreach.

That's done already at the top for your "about section. Not sure if you can use it twice.

[Azy]

Oct 5, 2015 1:40:03 GMT -8 Teg said:

Oct 4, 2015 7:40:52 GMT -8 @seriously said:

I already have the default gender hidden, it's just a matter of getting the custom ones to show up on the profile.

...
Not sure if you can use it twice.

You can 
I've used it in several places both on my main profile and the mini profile for prefered genders, prefered pronouns, sexuality, custom forum wallpaper and also support for social media sites  For example, in the main profile template, on the summary tab, I have this:

{foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Prefered Pronouns"}
{if $[user.custom_field.value]}
<tr>
<td class="headings">Prefered Pronouns:</td>
<td>$[user.custom_field.value]</td>
</tr>
{/if}
{/if}
{/foreach}


As long as you take the default foreach loop out the bottom of the page, so your values don't appear twice, you're golden.