Avatar Image Overlay

First of all complete 100% credit for this tutorial goes to Shelly who originally posted this tutorial for XenForo in Admin Extra's XenForo Tutorial section this is exactly the same tutorial only with instructions on how to get it to work on Invision Power Board.

I could have replied to that tutorial with these instructions - however wanted to ensure my fellow IPB users were able to find it.

What this does is add the Cobweb Overlay image we saw here on Admin Extra over our avatar's as seen in Shelly's image here:

First go to your userInfoPane template.

FIND:

Code:

<li class='avatar'>

ADD AFTER IT:

Code:

<span class="helper"></span>

FIND:

Code:

<li class='avatar'>

ADD AFTER IT:

Code:

<span class="helper"></span>

(Yes there are two instances of it)
Then go to IPB_Styles.css and find:

Code:

/* GENERAL CONTENT */

Then further in that section find:

Code:

.ipsUserPhoto_icon { width: 16px; height: 16px;    }

ADD AFTER IT:

Code:

.helper {
background: transparent url({style_images_url}/halloween.png) no-repeat;
display: block;
height: 47px;
left: 15px;
position: absolute;
top: 68px;
width: 52px;
}

Upload the image (that you need to download from Shelly's tutorial) to your style_images folder.

The above code is set up to work immediately off the DEFAULT IPB Style and avatar sizes, if you have bigger avatars you will need to change the left and top positioning.

Once again a big shout out to Shelly - instead of liking this tutorial you should go to her one and like it there as she did all the hard work I just wanted it on my site and so found a way for it to be on IPB.

This will only work on IPB 3.2.x - please do not ask about earlier as I have never used earlier versions, I only came to IPB when 3.2 was released.

As I said I saw Shelly's tutorial and because it was perfect for what I wanted for my new venture I wanted to try and get it working with IPB. So looked into the code for a few minutes trying to piece it together, changing bits around until it actually worked and thought others may like it.

We are all here to help each other out I just hope Shelly doesn't mind. I have been trying to give as much credit as possible considering it was her hard work.

Course i don't mind that is what we are here for. sharing. and nice work Merk.

I have a question. Does it really matter where you put the css class? Can I just put it at the bottom of ipb_styles.css?

Yeah you should be able to insert the css anywhere as the span will determine the location of the image and where it displays.

I would listen to Shelley, she has a lot more experience with all this stuff than I do. I just posted what I did to make it work Feel free to edit it around all you want to have it set up perfectly for you