Pet Widget Fix

Pet Widget Fix
Author: FallenSamurai
Last Update: 9.9.2017

Note: You do not need to add this code to the Customizable User Profile. This fix is included in the code.

When creating the Customizable User Profile I re-coded the wonky basic pets widget. Since many people use the widget, figured it would be simple enough just to release the fix. I separated out the part of the code that you can use to customize how your pets appear. The rest of the code should not be touched.

I have it set at the normal 60px by 60px size.

If you want round icons, set the border-radius to half the width/height. So for 60px by 60px, border-radius would be 30px. Or you can use 50%.


/*  Free code snippet by FallenSamurai.
   Available at subetagraphics.proboards.com  */

/*  =============================
   Change only the code below to modify
   the appearance of the pet's icon  
=============================  */

#content_pets .data div.avatar_head {
 max-width: 60px !important;
 height: 60px !important;
 border-radius: 8px !important;
 border: 0px;
}



/*  =============================
   Do not edit below this line.  
=============================  */



#content_pets tbody {
 display: flex !important;
 justify-content: center;
 flex-wrap: wrap;
}

#content_pets tr {
 display: inherit !important;
 width: 100% !important;
}

#content_pets td {
 width: inherit !important;
 margin-bottom: 10px;
}

table#content_pets a {
 flex:1;
}


#content_pets .data div.avatar_head {
 width: 100% !important;
 background-repeat: no-repeat !important;
 cursor: pointer;
 margin-bottom: 5px !important;
 margin: 0 auto;
}