Adding edge over profile details in posts

Now I will show you how to add edge over profile details in posts
Note: this is only for punbb, phpbb2 and phpbb3 it is same for phpbb2 and punbb.

For punbb, phpbb2 and Invision
First you go in AdminPanel -> Display -> Templates -> Viewtopic_body template, and find this:

Code:

{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}

Then change that code with this one:

Code:

<div class="atf-profiles">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}</div>

For phpbb3
First you go in AdminPanel -> Display -> Templates -> Viewtopic_body template, and find this:

Code:

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}

Then change that code with this one:

Code:

<div class="atf-profiles">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</div>

Save that, and click on +.


Than Go in AdminPanel -> Display -> Colors -> CSS Stylesheet

add this to your CSS:

Code:


.atf-profiles {
 background-color: #ffffff;
 border: 1px solid #dfdfdf;
 color: #3a3a3a;
 margin-top: 2px;
 padding-bottom: 3px;
 padding-left: 10px;
 padding-right: 3px;
 padding-top: 3px;
 text-align: left;
 width: 154px;
}

On the end go to AdminPanel -> Modules -> JavaScript managment, tag: IN TOPICS, and add this:

Code:

$(function(){
$('.atf-profiles').next('br').hide();
});

and it's all.

If you need help with color, or something else, ask on this thread, and I will help you

Tutorial checked at phpbb 3 (We using it at this forum)

Added tutorial for Invision