Adding the Pet Image To Your Profile: A Guide

Because apparently it has to be said, please do not use this code for profit or redistribute it and claim as your own (just redirect people here so they can use it!).

Hello! Following the new rule to pet spotlight, I'm going to provide a few different codes for coding a pet image into an already existing profile that didn't have a pet image on it already. You're free to edit or use them as you wish, but credit is appreciated if you use the codes. 8)

The easiest and most friendly way to do this is by creating a new set of divs, rather than using the preexisting div. By doing it this way, you don't have to look around for where the pet image is disabled within your profile's base code. Every profile maker codes different, so it might not be the easiest to find if you're unfamiliar with code. Altogether, it's a lot less fiddling with actual code! That said, these codes can be applied to the div.

We have two options right now for adding the pet image to your profile! You can find them under the spoilers below.

Option : Pet Image Tab

LIVE PREVIEW

This method requires a little bit of editing in order to make it look nice and mesh well with your profile!

First, you'll want to stick this code before the closing style tag (</style>) within your profile code. I tacked on a couple notes that will hopefully make editing this code easier. You can change "" to the hexcode (such as ) of the color you'd like your tab to be, and you can adjust how far left the tab is on the profile. You can also change the height and width of your pet image, if you want it to be smaller than the standard 200px by 200px size or if you need it to be bigger. { background-color: ; /BACKGROUND COLOR OF THE TAB/ top: 0px; left: 20px; /HOW FAR LEFT ON THE PROFILE THE TAB IS/ position: absolute; height: 0px; width: 200px; /WIDTH OF THE PET IMAGE/ overflow: hidden; padding: 0px 10px; border-bottom: 15px solid ; /BACKGROUND COLOR OF BORDER OF THE TAB - SHOULD BE THE SAME AS THE BACKGROUND COLOR/ border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;}


:hover {
height: 200px; /HEIGHT OF THE PET IMAGE/
padding: 10px;}

img{ border-radius: 10px; height: 200px; /HEIGHT OF THE PET IMAGE/ width: 200px; /WIDTH OF THE PET IMAGE/}

Then, you'll want to add this code somewhere after the closing style tag (</style>) or before the opening style tag (<style> or <style type="text/css">). Change the "URLHERE" to be the URL for the pet you're looking to add a pet image for. This can be an overlay image or the default pet/color image. Just make sure that it is the correct image, and that you're not misrepresenting your pet.

And that's it! When you update your profile, you should see a tab stick out of the top of the profile, and upon hover you'll see the pet image. This code will probably take some adjusting to position it exactly where you want it if you're not familiar with code! Let me know if you need help positioning your tab.

Option : Low Opacity Corner Image

LIVE PREVIEW

This method requires less editing than the other option! This option will put a small 50px by 50px pet image in the bottom right hand corner of your profile!

First, you'll want to stick this code before the closing style tag (</style>) within your profile code. { bottom: 0px; right: 0px; position: fixed; height: auto; width: auto; margin: 5px;}

img { height: 50px; width: 50px; border-radius: 5px; opacity: .25;}

And there you go! Update your pet description, and you should now see your pet image in the bottom right hand corner of your profile!

Let me know if you need any help adding these codes to your profile or if you have any questions!

Logged Out

Adding the Pet Image To Your Profile: A Guide

Replies