Hi all,

alright, so I went looking for a way to put background images behind a user's profile details in a post.
I found:
https://help.forumotion.com/t96989-post-profile-background-image-only-4-admin-need-code?highlight=admin+font+colour
https://help.forumotion.com/t96900-adding-new-feature-and-need-help and
https://help.forumotion.com/t96719-post-profile-background-image

but none of them work. well, not completely.
this is the problem:


The darkgreen box is where the background image should appear, but it is ONLY loading, in the section where it says 'Founder' (or admin) and doesn't load downwards or up.
ATM, my coding for it was:

Code:

.admin {
background-image: url("http://i40.servimg.com/u/f40/13/50/39/90/admin_10.png");
}


along with the ranks

Code:

<div class="admin"><font color="darkred">Founder</font> </div>
//for founder and below for admin//
<div class="admin"> <font color="#006BB3">Alpha</font></div>

as one of those top links said to do. (the div class bit)
Is there a reason this isn't working?

originally, the username and rank were above the avatars, but i moved them under hoping it would fix it. It didn't.
please help

Link to my forum:
http://www.warriorwolves.darkbb.com

EDIT: after asking my dad, he can do it, just later. he got it working for all members, and tomorrow or whatever will change it to just admins.
However, I'm still curious to know why the original plan didn't work.

Okay, I see the problem.

For the code you put in the CSS should be this.

Code:

.admin {
background-image: url("http://i40.servimg.com/u/f40/13/50/39/90/admin_10.png");
}

Now for the rank you should put this as the code.

Code:

<div class="admin"><font color="darkred">Founder</font> </div>

Note that in the image you chose it will only show the top little part.

Are you wanting the whole post profile to be a different background color?

Because if so, none of the above will work.

Notice how the DIV with class 'Admin' is both opened and closed within the rank, so any background image is ONLY going to be within the rank.

To do this correctly you will need a javascript which loops through the post profiles, checks if it is the admin post profile and if it is, changes the post profile background.

Hi,

This should work for phpBB2 for the whole post.

PHPBB2

Step 1: Click on user on your board and you will arrive on his nick in AP. Scroll down and you will see Assign special rank. Add the rank corresponding to the user. Without it it wont work.

Step 2: AP > Users and groups > Rank administration, edit the rank of for example administrators and wrap it with a class

Code:

    <span class="admin1">Administrator</span>

Do the same thing for the moderator but with this

Code:

    <span class="mod2">Administrator</span>

Step 3: AP > Diplay > Templates > General > Wievtopic_body template and find this

Code:

   <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


            <!-- 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>

         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>

Replace it with this

Code:

      <tr class="post">
<td class="post {postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


            <!-- 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>

         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>
      <td class="post {postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2"><span class="novo" style="display:none;">{postrow.displayed.POSTER_RANK}</span>
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>

Save and publish your template on the green

End: AP > JS managment (Mark all pages) and add this

Code:

$(document).ready(function() {
$('.post:has(".admin1")').css('background-color', 'lightblue');
$('.post:has(".mod2")').css('background-color', '#FF77B1');
});

There's probably an easier way but I would not know it.

If you want an image you just need to use the JS images code, like this:

Code:

$(document).ready(function() {
$('.post:has(".admin1")').css('background-image' , 'url(http://www.nextgenupdate.com/forums/images/Admin-bg.jpg)');
$('.post:has(".mod2")').css('background-image' , 'url(http://www.nextgenupdate.com/forums/images/Admin-bg.jpg)');
});