Choose from our various pricing plans. There is a package for everyone!


Show/Hide Members Profile fields [For All Version]

View previous topic View next topic Go down

Tutorial Show/Hide Members Profile fields [For All Version]

Post by Mati™ on Sat Aug 25, 2012 12:00 am

Hi, All

Today I will be showing you how to make a Show/Hide members profile fields such as Posts, Join date, Location etc... I know this is simple, but I hope this guide helps.

For PunBB Forum Version:

Step 1 - Go to Display => Templates => General => viewtopic_body and find this code:

Code:
<div class="user-info">

Then add the following code just above that:
Code:
<div class="toggle-trig"><a href="#">Toggle user info</a></div>

Save and Publish the Template:

Step 2 - Go to Display => Pictures and Colors >> Colors => CSS Stylesheet add this and save.
Code:
.toggle-trig{text-align:left;}
.user-info{display: none;}
.toggle-trig a:hover{text-decoration: none;}

Step 3 - Finally go to => Modules => Javascript codes management => Create a new javascript >> Title whatever you want >> Placement In the topics >> And add this Javascript Code and Submit:

Code:
jQuery(document).ready(function(){
jQuery(".toggle-trig a").click(function () {
      jQuery(this).parent().next().slideToggle("normal");
    return false;
    });
});
__________________________________________________________________________________

For PhpBB2 Forum Version:

Step 1 - Go to Display => Templates => General => viewtopic_body and find this code:

Code:
<span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span>

Replace that with the following code:
Code:
<span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                                <div class="toggle-trig"><a href="#">Toggle user info</a></div>
                                <div class="user-info">
                                  <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
                                  </div></span>

Save and Publish the Template:

Step 2 - Go to Display => Pictures and Colors >> Colors => CSS Stylesheet add this and save.
Code:
.toggle-trig{text-align:left;}
.user-info{display: none;}
.toggle-trig a:hover{text-decoration: none;}

Step 3 - Finally go to => Modules => Javascript codes management => Create a new javascript >> Title whatever you want >> Placement In the topics >> And add this Javascript Code and Submit:

Code:
jQuery(document).ready(function(){
jQuery(".toggle-trig a").click(function () {
      jQuery(this).parent().next().slideToggle("normal");
    return false;
    });
});

__________________________________________________________________________________

For PhpBB3 & Invision Forum Version:
Step 1 - Go to => Modules => Javascript codes management => Create a new javascript >> Title whatever you want >> Placement In the topics >> And add this Javascript Code and Submit:

Code:

$(function(){$(".postprofile dt").after('<br>
<div style="text-align:center"><div style="display:inline-block;font-size: 13px;cursor:pointer;" onclick="$(this.parentNode.parentNode).find(\'dd\').slideToggle()">Toggle user info</div></div>')});

Step 2 - CSS For PhpBB3 Go to Display => Pictures and Colors >> Colors => CSS Stylesheet add this and save.
Code:

.postprofile dd {
    display: none;
}

Step 2 - CSS For Invision Go to Display => Pictures and Colors >> Colors => CSS Stylesheet add this and save.
Code:

.postdetails dd {
    display: none;
}

Please, if you have any questions or feedback feel free to comment.


Last edited by Mati™ on Sun Nov 09, 2014 9:25 pm; edited 3 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Show/Hide Members Profile fields [For All Version]

Post by AM99 on Sat Aug 25, 2012 10:22 am

Great,tutorial am going to try this on my forum,
thanks matti Smile
avatar
AM99
Member
Member

Age : 27
Posts : 152
Join date : 2012-07-27
Reputation : 2

View user profile

Back to top Go down

Tutorial Re: Show/Hide Members Profile fields [For All Version]

Post by Mati™ on Sat Aug 25, 2012 12:44 pm

Tutorial update [For All Forum Version]
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Show/Hide Members Profile fields [For All Version]

Post by GummyBear on Sat Aug 25, 2012 4:30 pm

how about also hide the avatar?
avatar
GummyBear
Member
Member

Age : 26
Posts : 24
Join date : 2012-08-21
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Show/Hide Members Profile fields [For All Version]

Post by Brother on Sun Aug 26, 2012 5:14 pm

@GummyBear wrote:how about also hide the avatar?

Try to place this code :
Code:
<div class="toggle-trig"><a href="#">Toggle user info</a></div>
                                <div class="user-info">
Above this :
Code:
{postrow.displayed.POSTER_AVATAR}<br /><br />
avatar
Brother
Member
Member

Age : 26
Posts : 57
Join date : 2012-07-13
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Show/Hide Members Profile fields [For All Version]

Post by Leo on Sun Aug 26, 2012 6:27 pm

Excellent tutorial!
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: Show/Hide Members Profile fields [For All Version]

Post by J0k3R^ on Thu May 01, 2014 10:22 am

wow very nice, i got this before to see it from here  Surprised
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: Show/Hide Members Profile fields [For All Version]

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum