Online Banner Over Avatar

Hello,

Today I will show you how to Set and online banner over you avatar image (like the one bellow) today. For this make sure your image is 149px × 106px.



Before you start The steps need to be followed exactly, also to see the images press spoiler that would show you the images, (note this will cause this to happen that's why i put them as spoiler I'm working  on trying to prevent this from happing.)

Spoiler:

AGAIN PLEASE MAKE SURE ALL THE AVATAR IMAGES ARE 149px X 106px OR ELSE THIS WILL NOT BE CENTERED CORRECTLY.


Go to ACP>Display>Pictures and Colors (its on the left hand side)> Pics Managment (under pictures and colors)> Advanced mode (center of the screen)>Buttons (a tab ) From there scroll down till you see this:

Spoiler:

Replace the Web address in the box to the right (see the image bellow to see what I'm talking about) With:

Code:

http://2img.net/i/fa/prosilver/icon_user_online_en.png

Spoiler:

Ok Now Press SAVE

Go  to Administrator Panel> Display> Pictures and colors (on the left side) > Colors (under pictures and colors) > CSS Style Sheet  ( A tab in the center of the page)
Then Add this code to the top of your CSS

Code:

.i_icon_online {
position: absolute !important;
left: 298px;
}

Press SAVE


Go to ACP > Display > Templates > General > viewtopic_body Edit:
- Find this part and delete it:

Code:


    {postrow.displayed.ONLINE_IMG}


- After deleting it, find this one:


   

Code:

{postrow.displayed.POSTER_AVATAR}

- Now, add this below it.

Code:

   {postrow.displayed.ONLINE_IMG}

Then save and publish it  


That should do in Any Questions Please Reply to the Post with them.


For some Forums the Online bar may appear over the Rank symbol This can be changed by Going to ACP > Display > Templates > General > viewtopic_body Edit
Now find AND DELETE


 

Code:

 {postrow.displayed.RANK_IMAGE}


Now Find

Code:

   {postrow.displayed.POSTER_AVATAR}

and paste this before it

Code:

 {postrow.displayed.RANK_IMAGE}


Save and publish on the green x