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.
The forum of the forums

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

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

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

    Post by Ange Tuteur 31/3/2014, 05:17

    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


    This tutorial was written by Matriochka of the French support forum, it has been translated to English by ddoesmc, and corrected by Ange Tuteur.

    To submit a tutorial, please read the following topic : How to submit a tutorial
    • Back to top

      Current date/time is 13/11/2024, 11:13