Replace the image for your petpet and/or petpetpet

[Iroh]

Hey, so this is a fairly simple guide which will allow you to replace the image for your petpet, petpetpet or both. It was written in response to HailSeitan's service request (you need an account to see links).
I will walk you through what is happening and then put the full code snippets at the end.

Warning
Remember that knowingly falsifying the information on your pet lookup may be against the rules, as noted by Unown (you need an account to see links).

Please log in to view spoilers.

Anything you do with this information is at your own risk!

The Explanation
In order to replace the petpet or petpetpet image, we need to find a css selector - that is, a selector that relies on only html defined attributes, such as the element's tag, element's assigned id, or element's assigned classes, that will refer specifically to the image for either the petpet or petpetpet.

So to begin determining what the selector is, we should start with the inspector. In most modern browsers, you right click and then click inspect element; if you right click on the exact element you wish to inspect, it will jump you to the relevant section within the html. So, in this case, we may right click and inspect element on the petpet or petpetpet.



From the inspect element screen, we need to look at some combination of attributes that makes the element we are looking to replace unique.



If we scour the elements surrounding the petpet image, we will find that the containing <td> tag has the classes "contentModuleContent" and "medText" - and it is the only element on the page to have both of these classes assigned to it. From here, it may seem would seem like we can simply look for any <img> element that is a child of a tag with both of these classes.

This results in the css selector ".contentModuleContent.medText img".

We do, however, need to consider all possible cases. The other cases are that the neopet also has a petpetpet, and that there is an avatar being rewarded as a result of visiting the petpet or petpetpet. This would result in html contents similar to the following, where a petpetpet is present (resulting in more than one <img> tag present) and/or an avatar being awarded (resulting in another <img> tag that is nested far deeper than the <img> tag we wish to select).



From here we can see that we need to reference the first <img> tag that is a direct descendant of the tag with classes "contentModuleContent" and "medText" (for the petpet - it is the second <img> tag for the petpetpet). However, since neopets does not allow use of the > selector (to select direct descendants), we must use some other trickery.

The easiest way to do this is to select some other child element, and then select the <img> siblings. Since we can determine that the only child that is a <script> element is a direct descendant, we can select the children with the tag <script>, and then select the <img> elements that are siblings of that selected <script>.

Now we have the css selector ".contentModuleContent.medText script ~ img".

However, this still doesn't account for the scenario in which there is both a petpet and a petpetpet, as the current selector will select both. To select only the petpet we should select the first <img> tag that is a sibling - since the only two <img> siblings are the petpet and the petpetpet.

This results in the css selector ".contentModuleContent.medText script ~ img:nth-of-type(1)" for the petpet image (and ".contentModuleContent.medText script ~ img:nth-of-type(2)" for the petpetpet image).

The next step is to replace the image using css with an image of our choosing. We don't want to set an attribute like "display: none;" as this would hide everything to do with the element. However, a method that we can employ is to set the width and height of the original image to 0, and then to set a different background image using the background: url('image-url'); attribute.

If you only set the width, height, and background will find that nothing shows - since the element's width and height are now 0, none of the contents will be displayed. To actually show the image we have set as the background, we should set the padding to be half of the desired image's width or height - whichever is greater. This forces the element to have the required dimensions without displaying the originally contained image. For a regular petpet or petpetpet image size this simply requires setting "padding: 40px;", as the regular width and height is 80px.

If you want to be very specific about the dimensions, you can set padding-left and padding-right to half of the image's width, and then set padding-top and padding-bottom to half of the image's height. This can be done in one fell swoop since multiple values passed to the padding property will assume you mean the top, right, bottom, left padding respectively

Now for a custom petpet image we have the css

.contentModuleContent.medText script ~ img:nth-of-type(1) {
    width: 0;
    height: 0;
    padding: (half-the-width-and-height)px;
    background: url('your-custom-petpet-image-url');
}

or

.contentModuleContent.medText script ~ img:nth-of-type(1) {
    width: 0;
    height: 0;
    padding: (half-the-height)px, (half-the-width)px, (half-the-height)px, (half-the-width)px;
    background: url('your-custom-petpet-image-url');
}

and for a custom petpetpet image we have the css

.contentModuleContent.medText script ~ img:nth-of-type(2) {
    width: 0;
    height: 0;
    padding: (half-the-width-and-height)px;
    background: url('your-custom-petpetpet-image-url');
}

.contentModuleContent.medText script ~ img:nth-of-type(2) {
    width: 0;
    height: 0;
    padding: (half-the-height)px, (half-the-width)px, (half-the-height)px, (half-the-width)px;
    background: url('your-custom-petpetpet-image-url');
}

To actually use this code, you will need to encase it in <script> tags and place it in your pet's description, which can be accessed on the quickref page by clicking the arrow next to the pet you want to change the picture for, and selecting Edit Description.



The Final Snippet

So, for example, to change your petpet's image to be a Krawk you would set the following in your pet's description

<style>
    .contentModuleContent.medText script ~ img:nth-of-type(1) {
        width: 0;
        height: 0;
        padding: 40px;
        background: url('http://images.neopets.com/items/pet_krawk.gif');
    }
</style>

And to change your petpetpet's image to be a Mootix you would set the following in your pet's description

<style>
    .contentModuleContent.medText script ~ img:nth-of-type(2) {
        width: 0;
        height: 0;
        padding: 40px;
        background: url('http://images.neopets.com/items/petpetpet_1.gif');
    }
</style>

(Note that if you are going to do both, you can just put both the css rules into the same <style> tag)

Thanks and questions
Thank you for reading! If you have any questions, even if they only seem tangentially related, please do not hesitate to ask!

[Unown]

Woo this seems awesome. I'll give it a shot tomorrow!!

Though it's seemingly against TNT regulations so you should put that disclaimer up just in case. It's a gray area of course, since there was no mention about petpets and petpetpets, but nevertheless it's misrepresenting information. Taken from (you need an account to see links).

Please log in to view spoilers.

[Iroh]

Woo this seems awesome. I'll give it a shot tomorrow!!

Though it's seemingly against TNT regulations so you should put that disclaimer up just in case. It's a gray area of course, since there was no mention about petpets and petpetpets, but nevertheless it's misrepresenting information. Taken from (you need an account to see links).

Please log in to view spoilers.

Thank you, that's definitely an important point to note! I had just been going off the earlier editorial, 270, but the more recent one you have quoted seems suitably vague such that it will be against the rules as soon as TNT simply feels like it is.

[funnybell]

If I'm reading correcting from TNT, if you replace the image of your petpet with something that's obviously not a neo image, like some art you did yourself, I think it's fine as long as the real petpet name is still visible under it. In that case it's easy for users to verify the real petpet information and they're not being fooled. That being said, it's pretty easy to fly under the radar if you don't interact with anyone lol.

Also, very thorough guide!

[Iroh]

If I'm reading correcting from TNT, if you replace the image of your petpet with something that's obviously not a neo image, like some art you did yourself, I think it's fine as long as the real petpet name is still visible under it. In that case it's easy for users to verify the real petpet information and they're not being fooled. That being said, it's pretty easy to fly under the radar if you don't interact with anyone lol.

Also, very thorough guide!

Yep I interpreted TNT the same as you - it's only really an issue if you completely change it to try and claim you have a petpet that you don't.

Thanks, I hope it all made sense!