Iroh
07-18-2020, 01:04 AM
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 here ([Only registered and activated users can 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 below ([Only registered and activated users can see links]).
From editorial 270 ([Only registered and activated users can see links]):
[Only registered and activated users can see links]
However, from a later editorial, 613 ([Only registered and activated users can see links]):
[Only registered and activated users can see links]
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.
[Only registered and activated users can see links] [Only registered and activated users can see links]
From the inspect element screen, we need to look at some combination of attributes that makes the element we are looking to replace unique.
[Only registered and activated users can see links]
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).
[Only registered and activated users can see links]
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.
[Only registered and activated users can see links]
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('[Only registered and activated users can see links]');
}
</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('[Only registered and activated users can see links]');
}
</style>
[Only registered and activated users can see links]
(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!
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 below ([Only registered and activated users can see links]).
From editorial 270 ([Only registered and activated users can see links]):
[Only registered and activated users can see links]
However, from a later editorial, 613 ([Only registered and activated users can see links]):
[Only registered and activated users can see links]
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.
[Only registered and activated users can see links] [Only registered and activated users can see links]
From the inspect element screen, we need to look at some combination of attributes that makes the element we are looking to replace unique.
[Only registered and activated users can see links]
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).
[Only registered and activated users can see links]
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.
[Only registered and activated users can see links]
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('[Only registered and activated users can see links]');
}
</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('[Only registered and activated users can see links]');
}
</style>
[Only registered and activated users can see links]
(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!