leo !! ──✮⋆˙'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

tutorial on "this user loves _" boxes!!!

Firstly, here are ones that I have made as examples !!

   


  ୭  ˚(。-_-。) ᶻ 𝗓 𐰁


TUTORAL:

This is the website for creating the userboxes: 

https://www.yerich.net/userbox/

It's a very straight-forwardly layed out site, however, if you decide to go ahead without the tut,  please skim through steps 3/4 , as they're slightly important!!

- extra: here's a website for previewing what codes will do to your spacehey profile^^  https://nein-mc.neocities.org/csstest/

- step one!

Obviously, go to the userbox-making website. (⌒_⌒;) Then get the image address of whatever picture you want to be in the left hand section (of the userbox) from pinterest, google, wherever; square images work best!! Paste your image address into the code:  <img src=replace this text width=55> , mess around with the width to fit your liking, then replace the text on the site stating "ID" with your code .

Also paste over the text stating "Info" with 'This user loves _'.


- step two!

Edit the hex codes to your liking under 'borders and backgrounds', and 'text options'. I recommend using the 'color picker' tool on google for this^^


- step three!

Next, zoom in and screenshot the example image of your userbox. I suggest you don't just copy and paste the code for your userbox given on the website into your profile, as (depending on the 'code output method' ) it will either not work OR the text in your userbox will be affected by the code for your spacehey profile's text. 

For example, I have a pink glow behind my profile's text - this is what happens when I just put the (raw html) output code that the site provides into my profile:

On the other hand, here is what the example image on yerich.net looks like:

As you can see, there's no pink glow affecting it in the second example. (๑ᵔ⤙ᵔ๑)


- step four!

ANYWAYS, crop the screenshot so that its just the userbox, and upload this onto Deviantart. (or any other site that will get you an image address, Deviantart does require an account) Paste the image address into <img src=replace this text width=300> , and again, mess with the width to your liking before sticking the code into your profile!! 

Aaand that's it!! Thanks for reading (≧∇≦)


6 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

★彡[𝒜𝓃𝑔3𝓁_𝒹𝟢𝓁𝓁]★彡

★彡[𝒜𝓃𝑔3𝓁_𝒹𝟢𝓁𝓁]★彡's profile picture

It worked! Ty ty tysmmmm!


Report Comment



No problem (๑>◡<๑) !!!!

by leo !! ──✮⋆˙; ; Report

U can also use Postimages to make an image address!

by ★彡[𝒜𝓃𝑔3𝓁_𝒹𝟢𝓁𝓁]★彡; ; Report

oooh cool ive never heard of that !! ill check it out ty

by leo !! ──✮⋆˙; ; Report