[Hỏi đáp] How to use a new Profile field as rank

Question: Hello devs,
My question is how to create a new custom field where members can change their rank and that rank to be shown above the avatar. So I know there need to be some javascript usage so I would like if someone can help me with that.

Example: Look that text above the avatar


Answer: https://devs.forumvi.com/t333-hoi-dap-use-a-new-profile-field-as-rank?showpost=p2112

You mean "A cada dia..." ?
Create a new field in profile
Add this at the bottom of the Viewtopic_body Template

Code:

$('.label:contains("FIELD NAME")'').parent().addClass('customrank');

Replace FIELD NAME with the name of the field you have created
Then use CSS

Code:

.customrank .label {display:none}

And some more CSS like position, margin, padding,....

That's how i make the field

Yes, that's what I'm thinking about but, no, it's still the default.

Code:

<script>    $('.label:contains("rank")'').parent().addClass('customrank');</script>
<style>    .customrank .label {display:none}</style>

Oh, i give you the wrong code, there is one ' symbol which is useless

Code:

<script>$('.label:contains("rank")').parent().addClass('customrank');</script>
<style>.customrank .label {display:none}</style>

Try this one. If there is nothing change, give me your forum link

Nothing has changed at all, http://forumactif.serbianforum.info

Sorry i don't see any field called 'rank' in the viewtopic
Please give me the test account :v

Step 1: Create a new field in message


Step 2: Viewtopic_body template

Find:

Code:

<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

Replace with:

Code:

<!-- BEGIN profile_field -->                                                             
<div class="post_field">
   <dt class="label">{postrow.displayed.profile_field.LABEL}</dt>
   <dd>{postrow.displayed.profile_field.CONTENT}</dd>
</div>
<!-- END profile_field -->

Put this code at an appropriate location:

Code:

<div class="custom_field"></div>

Add this code at the bottom of the viewtopic_body template:

Code:

<script type="text/javascript">
//<![CDATA[
$(".post_field:contains('Custom Field')").hide();
$(".custom_field").html(function(){
   return $(this).closest(".user").find(".post_field:contains('Custom Field') dd").html()
});
//]]>
</script>

It works but posts and registration date text is removed only numbers are shown.

#7 Edited!

Thanks, now is better but it's like
Posts:
Number of posts
Join date:
2012-07-31

Can you make it to be in one line?

CSS:

Code:

.post_field dt, .post_field dd{
   display: inline;
}

Solved. Many thanks!