The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

phpbb2 & punbb : Frame the avatar and / or profile of members

Go down

Tutorial phpbb2 & punbb : Frame the avatar and / or profile of members

Post by Ange Tuteur March 31st 2014, 1:17 pm

phpbb2 & punbb : Frame the avatar and / or profile of members


The following tutorial will allow you to add a customizable border in the "Author" box of messages on your Forumotion forum.

Demonstrations :
- Avatar framed
- Entire Profile framed

Before making any changes, make sure that your forum meets the following conditions :
- You must be the founder of the forum and have access to its templates.
- Your forum version must be phpBB2 or punBB.

Modifying the viewtopic_body template

Go to Administration Panel ► Display ► Templates ► General and edit :edit:the viewtopic_body template.

- If you want to frame the avatar, locate this variable :
(The modification below applies to both phpBB2 and punBB)
Code:
{postrow.displayed.POSTER_AVATAR}

and replace it with :
Code:
<div class="post_avatar">{postrow.displayed.POSTER_AVATAR}</div>

- If you want to frame the entire profile, locate this part :
(The modification below is only for phpBB2)
Code:
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />            <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>

and replace it with :
Code:
<div class="post_profile"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />            <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></div>

Once the modifications are complete​​, save and publish the template by clicking the green plus "Add" in the template list.

Modifying the CSS stylesheet

Go to Administration Panel ► Display ► Colors ► CSS stylesheet tab

- If you have framed the avatar, add this code to the sheet :
Code:
div.post_avatar img {
    border:1px solid #000000;
    background:#FFFFFF;
    padding:3px;
}

- If you have framed the entire profile (for phpBB2), add this code to the sheet :
Code:
div.post_profile {
    border:1px solid #000000;
    background:#FFFFFF;
    padding:3px;
}

- If you want to frame the entire profile (for punBB), add this code to the sheet :
Code:
div.user {
    border:1px solid #000000;
    background:#FFFFFF;
    padding:3px;
}

Do not forget to save your changes.

Explanations :
background:#FFFFFF; gives the background a white color
border:1px solid #000000; adds a solid black border of 1 pixel
padding:3px; adds spacing between the content and the border by 3 pixels


Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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