Tutorials

Hukiolukio

Info


Created
1 year, 11 months ago
Creator
Hukiolukio
Favorites
164

Profile


Tutorials

1. Make sure your WYSIWYG settings are turned OFF. The HTML codes will not work if you have these turned on.

4305loc.png

2. Go to the link where the code is provided. Copy the entire thing and paste it into your own character's profile field.

3. Replace the placeholder text with your own!

1. First, there are (usually) 2 versions I make for each of my profile templates: one that uses theme colors and one that uses custom colors.

Theme colors uses the words primary, success,warning, danger etc. Each word has an associated color, that changes based on the toyhou.se theme that you are using (or the people who will be viewing your profile). This makes it easy to make sure everyone can read your profile. For visuals of these colors for all the themes, go here: link

Custom colors allows you free range on what colors you want to be used on your profile, and these colors will not changed based on the toyhou.se theme you are using.

2. Make sure you are using the custom color version of the profile you are wanting to use (they are usually accessible via the tabs on the profile template page).

3. Get the HEX color code of the color(s) you want to use. Example: #FF5733

4. Click inside the code editor on your profile. Open the search menu (ctrl+f) and then click the + button.

vwhfKQY.png

5. Put the HEX color code of the color you want to replace on the top and the HEX of the color you want to replace it with on the bottom.

6. Click the All button at the bottom right.

This will replace all instances of the top HEX with the bottom HEX, making the process of changing the colors very quick and easy.

4mlFNo1.png

7. Repeat process for however many colors are in the profile.

8. If you want to change individual elements, you will need to manually go through the code to change the HEX codes.

9. The template you are using may also use RGB colors instead of HEX codes. Example: 255, 87, 51.

To replace these colors, follow the same steps above but instead using the RGB color codes.

1. There are 2 different ways I use progress bars in my templates: to show how much a character is 1 adjective over another (aka 2 adjective bar), or to show how much a character is of just 1 adjective (1 adjective bar)

Luckily, the way you edit them is pretty much the same way.

V7vlwv8.png SIaNHNg.png

2. These bars will often have different decorations and colors and what-not, but to edit them there is one specific part you need to focus on: the width %.

H0AfxxO.png

3. Changing the % number will change the color on the left side to take up the amount of space that you set it to.

BQ0Ikbi.png

4. Edit to match how much your character is of the adjectives (the more color present in the bar, the more they are of the adjective shown in that color).

1. Go to the image you want to add to the code. The image can be from anywhere, so you can use an image straight from your toyhou.se gallery or upload the image to imgur. What you need is the url that links directly to the image itself.

ONB49KF.png

2. Right click on the image itself, and you can do 1 of 2 things: click "copy image address" to copy the url link quickly. Or, click "open image in new tab."

Opening the image in a new tab will take you to a new page that has just the image. Copy the url of this page.

SfxgYx4.png 34ph80F.png

3. Now that you have the url of the image, go back to your code.

Replace the image url that is already there (in my code I often remove these links, and leave just the word LINK. In this case, replace the word link with the url).

5. In my code I leave a spot for artist credit near the image (or at bottom of code if there's only 1 image on the profile). Replace the word "link" with the url of the artist's page and the word "name" with the artist's username.

8SN9JaQ.png

If none of the above tutorials helped with your problem, you can leave a comment on this page, my thread, my profile, or dm me. I will try my best to help you.

There is also a help thread on the forums specifically for coding help that you can try: link.