Centering things in profile [PunBB] [solved]

Can we make our profile to look like on the picture right that I photoshoped? The picture on the left is how profile looks on our forum now. Thanks in advance

In viewtopic_body.

Find:

Code:


                     <div class="user-ident">
                        <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                        <div class="user-basic-info">
                           {postrow.displayed.POSTER_AVATAR}<br />
                           {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                        </div>
                     </div>
                     <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- 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>


and replace it with this:

Code:


                     <center><div class="user-ident">
                        <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                        <div class="user-basic-info">
                           {postrow.displayed.POSTER_AVATAR}<br />
                           {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                        </div>
                     </div>
                     <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- 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></center>


we are almost there
everything is fine except for the position of name and the online icon has moved from behind the name to under the profile picture

is there a way to fix that?

Replace the code i gave with this one:

Code:


<center><div class="user-ident">
                            <h4 class="username">{postrow.displayed.POSTER_NAME} {postrow.displayed.ONLINE_IMG}</h4>
                            <div class="user-basic-info">
                              {postrow.displayed.POSTER_AVATAR}<br />
                              {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                            </div>
                        </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></center>


I know something way more easier!

If you will go to your ranks and put this code below in it at the very first of your profile. Make sure you leave this tag open, though.

Code:

<center>

@E-Mark
online button is ok now, but the name is not in the center still

@!_NICK_!
I don't understand where I need to put <center>

Ćao,

Find this in your viewtopic_body template:

Code:

<h4 class="username">{postrow.displayed.POSTER_NAME}</h4>

Replace it with this:

Code:

<h4 class="username" align="center">{postrow.displayed.POSTER_NAME}</h4>

Than add this to CSS:

Code:

.pun .user-ident .username {
    position: relative !important;
}

Example of it working on punBB:



Lijep pozdrav.

Hvala komsinice

EDIT: Oh i just saw something so it isn't solved yet
Everything works fine but some letters from user name kinda "falls" into avatar. The long ones like y,j,q,p.
Is there a way to create some free space between avatar and profile? Like 1 pixel or 2..

Add a br tag after this:

Code:

<h4 class="username" align="center">{postrow.displayed.POSTER_NAME}</h4>

Add:

Code:

<br />

Now it's solved, thanks!

Topic Solved & Locked