Aangepast profiel

Heey,

Ik wil hier wel eens naar kijken of ik iets soort gelijk kan maken. Het zal wel even duren want de examens komen er binnenkort aan (en voor men laatste jaar middelbaar mag ik me toch nog eens inzetten). Dus geef me een weekje de tijd om dit voor te bereiden op mijn eigen testforum, als ik klaar ben laat ik je dan wel iets weten en dan kunnen we afspreken om het op jouw forum in te stellen. Want zo een aangepaste profiel kan soms wel voor heel wat prutswerk in het beheerderspaneel vragen.

Ik heb in het verleden al een paar mensen geholpen met zo een aangepaste profielpagina dus ik heb hier wel al een beetje ervaring in.

voorbeeld:

Zijn er eigenlijk voorwaarden waaraan het moet voldoen?

bijvoorbeeld: (tekst)kleuren, lettertype, grote van de avatar ...

En dan nog een paar vraagjes over je voorbeeld.

Je hebt in je 2de en 3de kolom gebruikersnaam en naam staan, is die hetzelfde of is de ene de naam die je krijgt met {USER NAME} en de andere een rpg-naam?
In de 2de kolom staat er 0EXP, wil je die EXP als rpg-veld of liever als het veld van het puntensysteem of reputatiesysteem?

Ik weet niet of ik duidelijk ben, anders laat je maar iets weten.

Ik denk dat dan de html-basis klaar is. Nu is het enkel de opmaak met css, maar daarvoor is het misschien makkelijker om het op jouw forum zelf te doen. Dan kan ik het bijvoorbeeld koppelen met bestaande css en het goed instellen want dat kan wel moeilijk zijn in het begin.

Als er dan nog foutjes opduiken kan ik ze ook makkelijker herkennen en verbeteren. Dus zou je eventueel het adres naar je forum kunnen sturen (mag via pb als je dat liever hebt).

Dit is al de eerste versie van de template 'profile_view_body', je vindt deze bij templates onder het kopje profiel. Je moet heel de code vervangen door onderstaande:

Code:

<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
</tr>
</table>

<table id="profile_page" class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <th class="thHead" colspan="2" nowrap="nowrap" height="25">Algemene Informatie</th>
   </tr>
   <tr>
           <td>
                   <div id="profile_avatar">{AVATAR_IMG}</div>
             </td>
             <td class="row1" align="center" valign="top" height="120">
                  <table>
                    <tr>
                      <td>
                        <table>
                          <tr><td>{PUSERNAME}</td></tr>
                          <tr><td><span>Roedelnaam</span></td></tr>
                          <tr id="inventory"></tr>
                          <tr><td><span>0</span><span>exp</span></td></tr>
                          <tr><td><b><span class="gen">{POSTER_RANK}</span></b> | <a class="pm_link" href="http://spettertest.forumotion.com/privmsg?mode=post&u={CUR_USER_ID}">send pm</a></td></tr>
                        </table>
                      </td>
                      <td>
                        <table id="basis_info_cont">
                   <!-- BEGIN switch_rpg -->
                          <th>Basis Informatie</th>
                          <!-- BEGIN rpg_fields_left -->
                          <tr><td><span>{switch_rpg.rpg_fields_left.F_NAME}: </span><span>{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span></td></tr>
                          <!-- END rpg_fields_left -->
                        </table>
                      </td>
                    </tr>
                  </table>
      </td>
   </tr>
   <tr>
      <th class="thHead" colspan="2" nowrap="nowrap" height="25">Uitgebreide Informatie</th>
   </tr>
   <tr>
      <td colspan="2" class="row1" align="center" valign="top" height="6">
         <table width="100%" id="rpg_cont">
            <!-- BEGIN rpg_fields -->
            <tr>
               <td class="rpg_cell" align="center">
                  {switch_rpg.rpg_fields.F_NAME}<br />
                  {switch_rpg.rpg_fields.F_VALUE_NEW}
               </td>
            </tr>
            <!-- END rpg_fields -->
         </table>
      </td>
   </tr>
   <!-- END switch_rpg -->
     <!-- BEGIN switch_auth_user -->
        <tr>
                <td colspan="2"><span class="gen">{L_ADMINISTRATE_USER}:&nbsp;</span><span class="gen">{ADMINISTRATE_USER}{BAN_USER}</span></td>
        </tr>
   <tr>
      <td colspan="2" align="center" class="row1">
                  <form method="post" name="post" action="/rpg_sheet_edit">
                    <input type="hidden" name="username" value="{CUR_USER_ID}" />
                    <input type="submit" name="submit" value="Bewerk" class="mainoption" />
                  </form>
      </td>
   </tr>
        <!-- END switch_auth_user -->
        <!-- BEGIN switch_admin_user_comment_active -->
        <tr>
                <td align="right" valign="middle" nowrap="nowrap" width="50%">
                        <span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span>
                </td>
                <td class="row1" valign="middle">
                        <table align="center">
                                <tr>
                                        <td>
                                                {ADMIN_USER_COMMENT}
                                        </td>
                                </tr>
                        </table>
                </td>
        </tr>
        <!-- END switch_admin_user_comment_active -->
</table>
<br />
<script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('[id^=field_id]').each(function(){
         if ( $(this).find('.field_editable').is('span, div') )
         {
            $(this).hover(function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                  $(this).find('.ajax-profil_edit').attr({
                        alt: "{L_FIELD_EDIT_VALUE}",
                        title: "{L_FIELD_EDIT_VALUE}"
                     }).click(function(){
                     $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                     $(this).prev().find('.ajax-profil_valid').attr({
                        alt: "{L_VALIDATE}",
                        title: "{L_VALIDATE}"
                     }).click(function(){
                        var content = new Array();
                        $(this).parent().find('[name]').each(function(){
                           var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                           if ( (type_special && $(this).is(':checked')) || !type_special )
                           {
                              content.push(new Array($(this).attr('name'), $(this).attr('value')));
                           }
                        });
                        var id_name = $(this).parents('[id^=field_id]').attr('id');
                        var id = id_name.substring(8, id_name.length);
                        $.post(
                           "{U_AJAX_PROFILE}",
                           {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                           function(data){
                              $.each(data, function(i, item){
                                 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                              });
                           },
                           "json"
                        );
                     });
                     $(this).remove();
                  });
               }
            },function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                  $(this).find('.ajax-profil_edit').remove();
               }
            });
         }
      });
   });
 
   /* textarea naar div */
   jQuery(function() {
      jQuery("textarea").each(function(index, value) {
         var obj = jQuery(value);
         var tmp = obj.val().replace(/[\r\n]/g, "<br />");
         var newTag = jQuery("<div></div>").html(tmp);
         newTag.addClass("rpg_text");
         obj.replaceWith(newTag);
      });
   });
 
   /* 3 kolomen maken */
   $(function(){
       var i=1;
       var trCount=document.getElementById('rpg_cont').getElementsByTagName('tr');
       for(i;i<trCount.length;i++){
          $('#rpg_cont tr:nth-child('+i+')').append($('#rpg_cont tr:nth-child('+(i+1)+') td'));
          $('#rpg_cont tr:nth-child('+(i+1)+')').remove();
          $('#rpg_cont tr:nth-child('+i+')').append($('#rpg_cont tr:nth-child('+(i+1)+') td'));
          $('#rpg_cont tr:nth-child('+(i+1)+')').remove();
       }
   });
 
   /* inventory verschuiven */
   $(function(){
       $('#inventory').append($('table#basis_info_cont table tr:nth-child(2) td:nth-child(2)'));
       $('table#basis_info_cont tr:last-child').remove();
   });
//]]>
</script>