- she/they
✨✨✨✨ 10/27/21 ; this is the DEFINITIVE EDITION of the guide! thanks for all the help, ry!! ✨✨✨✨
since plenty of people have been asking about this on the discord and a few to me directly after seeing mine, i thought i would offer my advice as to how i got my page doll image working! that is, the little character boogying at the bottom of the screen when you view my profile
first of all this is the code it's based on; props to the person who shared the code on toyhouse! there are a number of tweaks to make it suit sheezy best! here's the modified version that you can copy:
<img class="desktop-and-tablet" style="max-height:
25%; max-width: 35%; position: fixed; right: 10px; bottom: 10px; z-index: 102;"
title="CUSTOM_FLOAT_TEXT" src="IMG_SRC_LINK" />
- img class is "desktop-and-tablet" - this is so that the pagedoll will not render on the narrow mobile interface and cover profile elements. you can also change the class text to "desktop-only", "tablet-and mobile", OR "mobile-only" depending on your own specific needs (and if you want the image to appear on ALL interfaces no matter what, just delete the entire class="_" section, you don't need it!)
- i have set max-height to 25% and max-width to 35% (you can make that number smaller or larger depending on your image) so that the image size is not fixed and can scale dynamically depending on window/screen size. if you shrink your window, the page doll will scale accordingly and attempt to not overtake the page, and if the img class allows for it to appear on mobile it will be nice and small on those screens!
thanks to @rytoonist for both of the above tips!
you can also change "right" to be "left" or "bottom" to "top" for the opposite page alignment if desired (handy if you add multple dolls and want one on each end!); and you can also adjust the padding away from the edges of the window in px (where it says "right: 10px" and "bottom: 10px" you can reduce either of those numbers to get it closer to the edges and vice versa)
applying your page doll code:
my page doll is tied to my Introduction profile tab, so if you change the Profile Information tab to "Information" or "Statistics" you can make the image disappear - which could be a good idea to do if your image(s) flash and you want to allow people disable them when viewing your profile, or if they're getting in the way for any reason, especially if you allow it to appear on mobile. more on what this looks like later in the journal! you can of course add the image to any other HTML profile block instead, if you don't want the option to make the image disappear!! :]
to add it to an HTML block or the Profile Information block, open its Source Code. you can find the button here on the edit page:
then paste it inside the following Source Code window on its own line (i put mine at the end). it looks like this currently with its tweaks - max height AND width are specified in %, and i've also adjusted the amount of padding in between the image and the edges in px as well
note: as you can see in my profile info screenshot, you should see your doll in the little text editing window itself once you save your changes to the source code, which seems strange - don't worry though, if you save page changes and visit your profile, it should be in the far side of the screen instead!
regarding mobile, if you allow your page doll on mobile, this is how mine looks on mobile browser. also if you have it tied to your introduction HTML like me, you can switch tabs to hide it like so if it's getting in the way!
BONUS TIP FOR DESKTOP USERS: if you do allow your page doll on mobile, and you want to preview what it will look like on a mobile screen on the fly without whipping out your phone, you can make your browser window as horizontally narrow as possible, and the interface should automatically convert to the mobile version! at least this is the case on firefox :SheemzSippy:
i'm glad this journal has been helpful to many, and i hope it will help more people out in the future! comments are open if anyone has questions
