ShianDescriptions/HTML Guide
#1
Here are HTML tags and an example template to set up a presentable description.

PROFILE EXAMPLES: x

Basic Image:
Code:
<img src="URL">

Align Image: You have to use <center></center> for center alignment, as far as I've noticed.
Code:
<img align="left/right" src="URL">

Space your text away from the image: X is the ammount of space between the image and the text, the larger the number, the more space you get.
Code:
<img hspace=X src="URL">

Background Image: Generally, it'll make a mosaic out of the image. You can put an image of a specific pattern/color, and it'll set it up as a whole background, wow!
Code:
<body background="URL">

Background Color: Replace FFFFFF with a hex color value.
Code:
<body style=background-color:#FFFFFF>

Font Color: If you use an ugly color I'll ban you myself.

Code:
<font color="#FFFFFF">TEXT</font>


Font Size: X is how much larger you want it, and can be negative if you want it smaller.
Code:
<font size=+X>TEXT</font>

Font Face: Remember that only people who have said font installed will see it, so using fonts that don't come installed tends to be a bad idea.
Code:
<font face="font here">TEXT</font>

You can combine all the font codes into a single code: Clarity is good!
Code:
<font size="+2" color="#FFFFFF" face="fantasy">TEXT</font>



Blending in the edges of your playby: When you use a pic in your desc, you normally won't want it to just be stuck there, you want it to blend in seamlessly with the rest of the description, and for what, you can use this site! (if you have an adblock on, the site doesn't load btw). Get the color of your background in, and mess with the values until it looks good.
You can make something like this!
[Image: iC8RoHO.png]
Tuxpi has other effects that can look neat too, check them out if a vignette is not enough for you. 
NOTE/TIP: The vignette, brush strokes, frame, and corner editor tools in tuxpi tend to be the most useful ones to get a picture to blend in well with the rest of the description. They are RECOMMENDED. 



Getting a cool font for your name, or adding fancy ornaments to fill space in your description:
[Image: gTWRlk4.png]This sort of stuff!

The process is very simple, and it helps a lot in making a description feel cuter and more unique:


1) First, you'll want to download a neat font from dafont.com. There's plenty to choose, so with a bit of time, you'll definitely find one you like. While the font you use for text is up to you, I personally recommend this one for ornaments and stuff.

2) Next, you'll want to open paint (yes, basic, microsoft paint), and color the whole background the same color as your description. It's important that you make sure it is the SAME color, or otherwise it'll look bad.
[Image: j6OYpg0.png]

3) The new fancy font you installed earlier should be on the font list now, so pick it and make it the color of your description's text, or the one you want for your name/ornaments, and write down what you want.
Note: For ornanents, you'll want to experiment a bit. Every character in the keyboard is a different symbol, so it might take a while for you to pick one.

For example, using the font 'Arab Dances', I wrote my character's name:
[Image: IYVryVp.png]

4) Once you're satisfied with how it looks, grab what you made, and get an image of it (a screenshot taken with gyazo or lightshot usually does, just make sure the link ends up in .jpg or another proper extension), and upload it onto your description as one, using the right code (<img src=url>).

If you've done everything properly, it should look along these lines:
[Image: NKLxUFm.png]
As you can see, here I did it twice! One for the name, another for the moon symbols at the end. As long as you find the right fonts, you can do pretty much anything with these.


Music: 
CHECK THIS POST OUT TO LEARN HOW TO PUT MUSIC IN YOUR PROFILE
Reply
#2
Sick of needing to go to the end of the guides section for this. Gonna just bump it.
Reply
#3
(08-03-2020, 04:08 AM)Jodashi Wrote: Sick of needing to go to the end of the guides section for this. Gonna just bump it.

it and the cost sheet thread should just be pinned, imo
i miss mouse so much
[Image: unknown.png]
Reply
#4
Please PIN  this again.
[Image: J6KXmE9.jpg]
Reply
#5
Your annual reminder to pin this thread.

Please.
[Image: download.png]
Reply
#6
Pinned (also can access this with /html in-game to those unaware)
Reply
Topic Options
Forum Jump:




Users browsing this thread: 2 Guest(s)