Build Your Own Mini-Profile

[Ross]

Build Your Own Mini-Profile

I'm sure many of you have already seen Calis "Make Your Own Info Center". Well this is similar except it's for the mini-profile, plus after much hard work, it is Cross Browser It lets you get that customized look for your forum relatively easily. The instructions may be a little hard to follow in places if you have no experience with HTML so I would recommend either learning some basic HTML, using a pre-made layout or getting a coder to do the layout for you.

Pre-Made Layouts (2)

I know these current layouts are pretty bad. But I'm a coder, not a designer. Plus, it's now gone 1 o'clock since I've taken so long writing this post.

• Basic Layout - Ross
  
• Basic Layout with Tables - Ross
  
• Advanced Tablular Layout #1 - Ross
  
• Advanced Tablular Layout #2 - Ross
  

Once you have chosen your layouts for Guests and Members, place the HTML coding in the Global Footer. Alternatively, you can design your own layout (see below).

If you would like to submit your own layout, then please post it below. It will appreciated if you can space the layout out to save me having to do it instead. If you can provide a preview of it in action, then even better


Global Footer

Once you have inserted the two layouts, add this code below them.

<script type="text/javascript">
<!--
/******************************************
*
* Build Your Own Mini-Profile v 0.1
* Coded by Ross of support.proboards.com
* and 101support.proboards.com
* and swg.proboards4.com
* this code cannot be reposted outside of the
* forums listed above unless done so by myself
*
*******************************************/

if(location.href.match(/ion=(display|(pm|calendar)?view|search2|(user)?recent)/)) {
     var td = document.getElementsByTagName('td');
     var mp_num = 0;
     var gp_num = 0;
     var cur_num = 0;

     function setMpValue(id, value) {
          if(document.getElementsByName(id).item(cur_num)) {
               var obj = document.getElementsByName(id).item(cur_num);
               if(value) {
                    obj.innerHTML = obj.innerHTML.replace(/##value/gi, value);
               } else if(obj.nodeName.match(/^td$/i)) {
                    while(!obj.nodeName.match(/^tr$/i)) {
                         obj = obj.parentNode;
                    }
                    obj.style.display = 'none';
               } else {
                    obj.style.display = 'none';
               }
          }
     }

     for(i=0; i<td.length; i++) {
          if(td.item(i).width == '20%' && td.item(i).innerHTML.match(/Posts:\s/)) {
               td.item(i).className = td.item(i).className + ' mini_profile';
               cur_num = mp_num;
               var username = td.item(i).innerHTML.split(/<br>/i)[0];
               var rank = (td.item(i).innerHTML.match(/<\/a><\/b><br>(.+?(<br><img.+?>)?)<br>/i))? RegExp.$1 : false;
               var customtitle = (td.item(i).innerHTML.match(/<\/a><\/b><br>.+?<br><img.+?><br>(.+?)<br>member\sis/i))? RegExp.$1 : false;
               var status = (td.item(i).innerHTML.match(/member\sis\s(<b>)?(.+?)(<\/b>)?<br>/i))? RegExp.$2 : false;
               td.item(i).getElementsByTagName( 'center' ).item(0).innerHTML.match(/^(<img.+?>)?<br>(<br>(\w|\d|\s)+)?<br>((.|\n|\r)+)$/gim);
               var avatar = (RegExp.$1 != '')? RegExp.$1 : false;
               var personaltext = (RegExp.$2 != '')? RegExp.$2 : false;
               var contacticons = (RegExp.$4 != '')? (RegExp.$4).replace(/<br>/gi, '') : false;
               var joined = (td.item(i).innerHTML.match(/Joined:\s(.+?)(<br>|$)/i))? RegExp.$1 : false;
               var posts = (td.item(i).innerHTML.match(/Posts:\s(.+?)(<br>|$)/i))? RegExp.$1 : false;
               var user_location = (td.item(i).innerHTML.match(/Location:\s(.+?)(<br>|$)/i))? RegExp.$1 : false;
               var gender = (td.item(i).innerHTML.match(/Gender:\s(.+?)(<br>|$)/i))? RegExp.$1 : false;
               var karma = (td.item(i).innerHTML.match(/Karma:\s(.+?)(<br>|$)/i))? RegExp.$1 : false;
               var karmalinks = (td.item(i).innerHTML.match(/<br>\[\s(.+?)\s\](<br>|$)/i))? RegExp.$1 : false;
               var money = (td.item(i).innerHTML.match(/Money:\s(.+?)(<br>|$)/i))? RegExp.$1 : false;
              
               td.item(i).appendChild(document.getElementById('mini_profile_member').cloneNode(true));
               td.item(i).lastChild.style.display = 'block';

                    setMpValue('user_name', username);
                    setMpValue('rank', rank);
                    setMpValue('custom_title', customtitle);
                    setMpValue('status', status);
                    setMpValue('avatar', avatar);
                    setMpValue('personal_text', personaltext);
                    setMpValue('contact_icons', contacticons);
                    setMpValue('joined', joined);
                    setMpValue('posts', posts);
                    setMpValue('location', user_location);
                    setMpValue('gender', gender);
                    setMpValue('karma', karma);
                    setMpValue('karma_links', karmalinks);
                    setMpValue('money', money);

               while(td.item(i).firstChild && !td.item(i).firstChild.id) {
                    td.item(i).removeChild(td.item(i).firstChild);
               }
               td.item(i).lastChild.removeAttribute('id');
               mp_num ++;
          } else if(td.item(i).width == '20%' && td.item(i).innerHTML.match(/Guest/)) {
               td.item(i).className = td.item(i).className + ' mini_profile';
               cur_num = gp_num;
               var guestname = (td.item(i).innerHTML.match(/<\/a>(.+?)<br>/i))? RegExp.$1 : false;

               td.item(i).appendChild(document.getElementById('mini_profile_guest').cloneNode(true));
               td.item(i).lastChild.style.display = 'block';

                    setMpValue('guest_name', guestname);

               while(td.item(i).firstChild && !td.item(i).firstChild.id) {
                    td.item(i).removeChild(td.item(i).firstChild);
               }
               td.item(i).lastChild.removeAttribute('id');
               gp_num ++;
          }
     }
}
//-->
</script>



How to make your own layout

First of all, start off with a hidden span tag with the id of "mini_profile_member". ie.

<span id="mini_profile_member" style="display: none;">
</span>

Within this tag (between display: none;"> and </span>), you can enter pretty much any HTML coding you need to achieve the desired layout. To add information from the mini-profile, you will be using more span tags (note: you can actually use pretty much any HTML tag you want but I find span to be the easiest to work with). Wherever you want the information to appear, put something along the lines of

<span id="item name" name="item name">##value</span>

A full list of available item names can be found below. You can use any HTML within the span tag but in the event of the necessary information not being available (ie. User not having entered it in their profile) then the whole tag will become hidden. Put ##value in the place of where you want the information to appear. eg.

<span id="posts" name="posts">This user has ##value posts.</span>

If you want to use tables in the design of your mini-profile, then do not give the id and name attributes to either the table itself or a row. If you want a row to be hidden when the information is not available, then give the name and id attributes to the cell instead. eg.

<table border="1">
<tr><td id="posts" name="posts">Posts: ##value</td></tr>
</table>

Once you have done that, you will need to do the same for the Guest Profile. Just use "mini_profile_guest" as the main span id instead. If you have any problems, try looking at existing layouts first. If they don't answer your question, then do post it below


Item Names
I'm pretty sure they're all self explanatory

• user_name
  
• rank
  
• custom_title
  
• status
  
• avatar
  
• personal_text
  
• contact_icons
  
• joined
  
• posts
  
• location
  
• gender
  
• karma
  
• karma_links
  
• money (If Money Hack is Installed)
  
• guest_name
  

If you have any other questions, suggestions or comments on this code, then please post below or in Code Support.

[Dark]

So, say Iwanted to build my own. On the first line of the code, I would put: <span id="mini_profile_member" style="display: none;"></span>, and, under that, the span with the item name and what not, right? this is just for a double check really

[Ross]

No, the layout for your mini-profile would go inside the <span> tag. So:

<span id="mini_profile_member" style="display: none;">
Mini-Profile Layout
</span>

[ME!]

This is a Wonderful Code Ross, i cant figure out where you got the time to make this code with all your exams
..ill be sure to make a couple of mini profile table codes for the members to use as examples

[Ross]

Thanks Dre. I did most the background for it on Monday since I was bored of revising And then since my exam yesterday went quite well I allowed myself an evening off to finish it and make it cross browser There's just so many people requesting fancy mini-profiles and very few of them ever get filled I thought it was time someone did something about it

[ME!]

YAY Ross to the rescue!
i was never good with statistics untill the exam, next you got math paper 3 >.< go study , the chapter names are scary enuf

[Dark]

OK, thanks Ross. This is a wonderful code!

EDIT: One other thing. If I'm putting in a table, I put everything between the <table></table> tags right?

[ME!]

yesh it should be in table tags

check the example from the main post

[Dark]

OK, I got that, but, whenever I put in a AIM, Yahoo, and/or MSN address for the contact icon thins, the avatar and personal text disapper. Also, I have 2 rows os stars in my profile Got any suggestions?

[ME!]

hmm, if you want you can post the HTML here, or Pm me the HTML your using and ill see whats the problem.

[ME!]

Ross there is something wrong with the Avatar, personal text, and contacts part in the code.

[Dark]

Yes, Yes indeed

[ME!]

its this line

td.item(i).getElementsByTagName('center').item(0).innerHTML.match(/^(<img.+?>)?<br>(<br>(.+?))?<br>(<br><br>((.|\n|\r)+))?$/gim);

it should be like this

td.item(i).getElementsByTagName('center').item(0).innerHTML.match(/^(<img.+?>)?<br>(<br>(.+?))?<br>(<br>((.|\n|\r)+))?$/gim);

one extra was there <br>

RegExp Still weirds me out >.<

[Ross]

When I looked there were three <br>s. I'm guessing that the AIM and stuff like that is between two of them?

[Dark]

ctcommunity.proboards101.com/index.cgi?action=viewprofile&user=admin

I have an avatar and a YIM address, and that is what it comes too

ctcommunity.proboards101.com/index.cgi?action=viewprofile&user=test

This profile is just fine.