This is a short guide on the basics of stylizing your profile using the source code of the text editor (the <> button in the toolbar)! How does source code work? Let's look at an example- below is some default text, followed by its appearance in the source code in italics:
Here's some example text!
<p>Here's some example text!</p>
Each tip I show will follow the above format. The change you'll need to make in the source code will be bolded. If you want to learn more about stylizing, I highly recommend learning a little about HTML and CSS on w3schools!
Coloring Text
Here's a paragraph colored using a hexcode value.
<p style="color: #74A2FF;">Here's a paragraph colored using a hexcode value.</p>
You can also color only specific words in a paragraph if you so choose.
<p>You can also color <span style="color: #74A2FF;">only specific words in a paragraph</span> if you so choose.</p>
Resizing Text
Text can be resized using the font-size attribute.
<p style="font-size: 24px;">Text can be resized using the font-size attribute.</p>
Centering Images
The text editor has trouble centering images, so we'll have to do it manually from the source code.
Here's a picture I just uploaded at 200x200:
<p><img src="https://i.pinimg.com/736x/39/00/1e/39001e1a59836ce390e6cdedf904cb81.jpg" alt="Yotsuba" width="200" height="200" /></p>
Here it is centered:
<p style="text-align: center;"><img src="https://i.pinimg.com/736x/39/00/1e/39001e1a59836ce390e6cdedf904cb81.jpg" alt="Yotsuba" width="200" height="200" /></p>
And right-aligned:
<p style="text-align: right;"><img src="https://i.pinimg.com/736x/39/00/1e/39001e1a59836ce390e6cdedf904cb81.jpg" alt="Yotsuba" width="200" height="200" /></p>
Underlining
For some reason the text editor doesn't let you underline, so let's try it from the source code.
<p>For some reason the text editor doesn't let you underline, <u>so let's try it from the source code.</u></p>
You can also add a horizontal row using <hr>, which looks like this:
And of course, you can use all these stylings at the same time!
<p style="text-align: center; color: #61ab35; font-size: 20px;">And of course, you can use all these stylings <span style="color: #d03017;"><u>at the same time!</u></span></p>
Again, these are only very basic tools- HTML and CSS are infinitely more complex, so learn more on your own if you'd like, it can be a ton of fun! :) For now, happy stylizing!
