Skip to main content
Main Content

Coding Pagedoll?

Coding Pagedoll?
Posted 2020-10-19 16:26:02

I made a piece I'd like to have just vibing in the bottom left corner of the screen on my pack and/or profile page, but I'm not really a coder so I was wondering if anyone knew how to do this/if it's possible


Nightfurypizza
#5665

Posted 2020-10-25 06:19:09 (edited)

Off the top of my head this should be possible with code, yeah; when I’m on desktop later I can give it a test run for ya :0 Do note that, depending on image size, it might cover up content on thinner browser windows, including mobile, so I’ll have it hidden for single-column view.

EDIT:

This goes at the bottom of your description (ideally above any stylesheets) in the code editor:

<div class="pgdoll">&nbsp;</div>

This goes in a .css file:

@media only screen and (min-width:992px){
    .pgdoll {
    background-repeat:no-repeat; position:fixed; z-index:100; cursor:default;
    bottom: 0; left: 0;
    background-image: url(imgURL);
    height: imgHeightpx;
    width: imgWidthpx;
    }
}
@media only screen and (max-width:992px){
    .pgdoll{display:none;}
}

The only parts you should be editing (unless you know what you’re doing) are bolded above: the image URL and dimensions in pixels. But for the record, here’s how it works, assuming some base familiarity with HTML/CSS formatting:

  • background-repeat:no-repeat makes sure the image doesn’t appear multiple times if you get the size wrong.
  • position:fixed keeps the image in the same place no matter where you scroll. bottom: 0; left: 0; positions it; you can add some extra space like bottom: 5px; left: 3px; (5 and 3 being example numbers), which adds 5 empty pixels along the bottom and 3 to the left.
    • Theoretically you could also have the image at the bottom right, but 1) I wouldn’t recommend it since the Wolvden layout has actual content there (whereas the left has nothing below the Activity & bug report boxes), and 2) it requires more code fiddling. If you want me to mess with it for your image specifically, toss me some SC and I’ll see what I can do :P
  • The div needs content or it seems to disappear altogether on saving; &nbsp; is the same thing as a blank space, but doesn’t get auto-deleted. You might also see a text-editing cursor when you view the page logged-in, so cursor:default disables that.
  • Finally, the @media query parts make sure the image only displays when Wolvden is wide enough to use the two-column layout. Please, please do not get rid of this part. You will make mobile people sad.

As a side note, I haven’t tested this on browsers or screen resolutions besides my own, but there’s nothing too fancy going on here so it should look fine across devices. Let me know if anything breaks, and hope this helps!


🐺
#9672

Search Topic