a long time ago I said a magician never reveals their secrets but considering the fact that I’ve been really bad about making userboxes in the past few years (this blog has existed since 2016 and has almost 4,000 followers) I figured it was time to write a tutorial on how to make your own userboxes.
fun fact - userboxes were originally for Wikipedia accounts.
text must start with “This user”.
some helpful things to know if you don't already: cntrl + a = select all (helpful for urls), cntrl + c = copy, cntrl + v = paste, cntrl + z = undo
so let’s say you want to make a userbox that says “This user likes trees.” the method is different for pc and mobile, so I’ll start with pc:
the first step is to go to https://www.yerich.net/userbox/. then open a new tab and google “tree png” or “tree transparent” and find an image with a transparent background (tip: I’ve found that truly transparent photos appear white in the background, but if you click on it, become checkered. they are probably not actually transparent if they already have a checkered background or don’t turn checkered after you select it. also, if an icon is hard to find, I recommend https://thenounproject.com/). once you find one you like, right click the image and click “open image in new tab”. that should open up a page with the url for your image. copy that (cntrl + a & cntrl + c) and come back to yerich.net.
in the top bar that is titled “left box”, type in the code i mentioned and paste the url in-between the quotations (cntrl + v). if you did it correctly, the image you selected should appear in the left box.
now go to the bar right under it, titled right box. type “This user likes trees.” this should reflect immediately in the right box of the userbox.
now for colors! there are three ways to do this:
on yerich.net there is a tab that says “select color scheme” that has some presets to choose from.
google “color picker” and use that to find more precise colors, then copy the hex code (starts with a hashtag “#” and is 6 digits long). then you can paste it wherever you want: border color, left box color, right box color, or left (info) text. this method is better for getting custom colors, especially ones that match the image. (some hex codes to memorize: #fff - white, #000 - black, #ff000 - red, #ccc - light grey)
instead of hex codes, you can also use HTML colors. for example, if instead of #ffffff you just wrote "white" it would do the same thing. here's a full list of accepted color names.
your userbox is done! now all you have to do is take a picture of it and crop it. zoom up as far as possible to your userbox. in your search bar along your taskbar, search “sn”. this should come up with “snipping tool”. open that, select new (make sure that under mode, rectangular snip is selected), then carefully put your cursor at any corner, making sure the crosshairs align with the border of your userbox. then drag to the opposite end, also making sure it’s not too close or too far (this is hard and takes me a few tries sometimes, but chances are better the more you zoom up on your userbox). once you’ve taken your screenshot, save it as whatever you want, wherever it will be most accessible to you, and voila!
the only difference with mobile is:
when you’re looking for a picture, you may be able to hold down the photo you want to bring up a selection which might include “open image in new tab”. if not, try clicking the image until it takes you to a page where there is nothing but the image. copying and pasting the image doesn’t work, nor does pasting the url of the website it’s from, so it’s a little more complicated. if you really want, you can upload the image you want to something like imgur and then copy that url.
on the website, images and hex codes don't immediately update when pasted. how i fix this is deleting punctuation and adding it again, or deleting the last number of a hex code and adding it again. this refreshes the userbox.
cropping is also way more refined – I recommend flipping it sideways for better precision, and flipping it right side up when done.
also userbox resolution is a lot better on mobile. pc can look more pixelated.
but yeah! hope this was useful ~
