Lucia Fox wrote: 1 Sep 2021, 14:01 I DID ONE FINALLY AA
dont open the reducio if you're on data because it's like 10mb and took an age to download and upload whelp

Reducio

love your tutorials winnie

Selina Knight wrote: 2 Sep 2021, 09:03 @Winnie Harper
To give my thanks I made a quick banner for you.

Winnie Harper wrote: 2 Sep 2021, 12:47

Selina Knight wrote: 2 Sep 2021, 09:03 @Winnie Harper
To give my thanks I made a quick banner for you.

Awww, thank you, Selina! That is super cute ❤️.

Liana Kerr wrote: 28 Sep 2021, 20:08 I appreciate this thread so much ♥ It helped me start using Canva one step at a time. Thank you, Winnie!
This is the fist moodboard I made while following your tutorial:

Reducio

Part IV: Basics of Coding

To learn the basics of BBcode, I would recommend you first take the time to read through Lear's tutorial, which is located HERE.

I would also like to take the time to acknowledge the person who taught me how to code on Hio, the ever-lovely @Ivy Bellamy. Thank you for being such an amazing teacher.

Let's get started! I won't be putting this information into 'steps' since you can use it as you need it.

➤Deciding on an aesthetic.

If you want your ency to flow well enough, you need to first select a colour scheme. This scheme will stay consistent throughout your ency to help it flow better and to just make it look better overall. I would suggest taking the time to think about what colours suit your characters well enough. You can use sites dedicated to creating colour palettes for this purpose or just play around with colour codes until you find one you like well enough.
For Winnie, I used a combination of her favourite colours:

█████

Since her character loves flowers, I decided to use floral elements in her ency. Since she loves poetry, I decided to add elements of it throughout her ency as well. With this in mind, I can start to craft an ency.

➤Tables.

Below is an example of a normal table with two photos.

Tables are pretty easy to understand. Let's look at the basic code the site gives you when trying to add a table:

Code: Select all

[table][tr][td][/td][/tr][/table]

The [tr] part of the table counts as rows, and to be bluntly honest I never use it. Why? Because just pressing enter while within the same [td] box works just as well, so why bother?

The [td] section is what we will care about. Putting text within the [td][/td] will separate what you write into columns. It's how I managed to get the two photos next to each other. Hio does this thing where it automatically resizes photos to fit within the margins. Like so:

I have not changed the size of the image, Hio automatically does it. It can be useful, but can also be annoying if you are trying to use both text and pictures within a table. It can cause the table to do this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.

Well that's awfully annoying, is it not? In order to stretch the image out, we need to add text to the [td][/td] box that the image is within, which is where the '─' symbol comes in handy. Did you know that you can make text colour transparent? WOW NO WAY! All you need to do is write 'transparent' as the colour code. So using this and the '─' symbol, we can create something that pushes the text to the side a bit. Take a look at the following:

Code: Select all

[color=transparent]───────────────────[/color]

Borders and dividers can also be used without the transparency to decorate your code. I will show you how to do this later. For now, we can insert this code beneath the photo and use this to make our photo bigger:

───────────────────

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.

Code: Select all

[table][tr][td][img]/images/upload/9u6x0lrtdf3r.webp[/img]
[color=transparent]───────────────────[/color][/td][td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.[/td][/tr][/table]

✫彡 THE MORE YOU KNOW!

Think you're a master of tables now? Hold on! I have more to show you. Did you know you can use quotes to fancy it up? Let's look at the same code again but add in a quote box.

───────────────────

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.

Code: Select all

[table][tr][td][quote][img]/images/upload/9u6x0lrtdf3r.webp[/img][/quote]
[color=transparent]───────────────────[/color][/td][td][quote]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.[/quote][/td][/tr][/table]

Notice the use of quote boxes. These quote boxes need to be placed within the [td] boxes for them to work. You can even leave the quote boxes blank to create a cute little border of sorts:

Code: Select all

[center][table][tr][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][/tr][/table][/center]

We all know about tables and how lovely they are, but did you know you can actually put tables within tables to create an ency with even more detail?

Crazy, but it's true!

Tables within tables are how I managed to get my ency to look like this:

To put a table within a table, you have to make sure the new table code stays within the original table's [td][/td] code and that you probably close it, otherwise it could end up messing up the entire code. Let's table a code from earlier and fancy it up with a table inside a table.

─────────୨୧───────── ─────────୨୧─────────

─Table One: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. │ │ │ │ │ ୨୧ │ │ │ │ │ Table Two: Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac.

Code: Select all

[table][tr][td]─────────୨୧─────────
[table][tr][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][/tr][/table][quote][img]/images/upload/9u6x0lrtdf3r.webp[/img][/quote][table][tr][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][/tr][/table]
─────────୨୧─────────[/td][td][quote][table][tr][td][center][color=transparent]─[/color]Table One:[/center][quote][size=75]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl.[/size][/quote][/td][td][center][b][size=150]│
│
│
│
│
୨୧
│
│
│
│
│[/size][/b][/center][/td][td][center]Table Two:[/center][quote][size=75]Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac.[/size][/quote][/td][/tr][/table][/quote][/td][/tr][/table]

You'll notice I used both dividers and borders to decorate my code. It is part of my signature move when coding, a really simple process that I will explain below.

➤Unicode Dividers/Borders.

Now that you understand tables, it's time to share my ultimate coding secret; unicode symbols. They can be used to spice up your page. There is just one rule of thumb to remember:

Bolded and 150 text size.

Why? Because instead of getting a solid line, you will instead experience gaps (although some computers will push the code together regardless, I have found most do not.

Once you understand this and how to create tables within tables... Well, the world is yours, my friend. You can look up text symbol sites and play around to create your own borders, but I will share some of my favourites below for you.

DIVIDERS:

»»————-　♡　————-««
➽───────────────❥
┍━━━━━━━♔━━━━━━━┑

┕━━━━━━━♔━━━━━━━┙
┍————/ᐠ｡ꞈ｡ᐟ\ ————┑

┕————(..)(..)————┙
➴➵➶➴➵➶➴➵➶➴➵➶➴➵➶
══✿══╡°˖✧✿✧˖°╞══✿══
♫♪.ılılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılılı.♫♪
· · ─────── ·𖥸· ─────── · ·
◤◢◣◥◤◢◣◥◤◢◣◥◤◢◣◥

LINES YOU CAN USE TO MAKE YOUR OWN:
⸻ ⸺ ─ ━ ╴ ╶ ╶ ╸ ╺ ╺ ⚋ ▬ ⎺⎻⎼⎽ ⋯ ‿︵╼ ╾
▁ ▂ ▃ ▄ ▅ ▆ ▇ █

BORDERS:

]

║ ║ ║ ║ ║ ║

┋ ┋ ┋ ┋

░▓ ░▓ ░▓ ░▓ ░▓ ░▓

█ █ █ █ █ █

││ ││ ││ ││ ││ ││

LINES YOU CAN USE TO MAKE YOUR OWN:
▁ ▂ ▃ ▄ ▅ ▆ ▇ █
▉ ▊ ▋ ▌ ▍ ▎ ▏
╽ ╿
╹ ╻╵ ╷
╭ ╮╰ ╯ ╱ ╲ ╳
╎ ╏┆ ┊┇ ┋
▐ ▕
░ ▒ ▓
▙ ▟ ▛ ▜
⦀ ⦙ ⦚ ⧘ ⧙ ⧚ ⧛

EXAMPLE OF WHAT YOU CAN DO WITH UNICODE:

____________________________

││ ││ ││ ││ ││ ││ ││ ││ ││ ││

01. intro 02. trunk 03. basics 04. threads

││ ││ ││ ││ ││ ││ ││ ││ ││ ││

━━━━━━━━━

││ ││ ││ ││ ││ ││ ││ ││ ││ ││

05. relations 06. family 07. tidbits 08. ooc

││ ││ ││ ││ ││ ││ ││ ││ ││ ││

‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

━━━━━━━🌹

🌹━━━━━━━

Code: Select all

[center][color=#A92E25][b][size=200]______________________________[/size][/b][/color][/center]
[table][tr][td][size=150][color=#A92E25][b]││
││
││
││
││
││
││
││
││[/b][/color][/size][/td][td][color=#A92E25][quote][center][size=75][inlinecode]01. intro[/inlinecode][/size][/center][/quote][/color][color=#A92E25][quote][center][size=75][inlinecode]02. trunk[/inlinecode][/size][/center][/quote][/color][color=#A92E25][quote][center][size=75][inlinecode]03. basics[/inlinecode][/size][/center][/quote][/color][color=#A92E25][quote][center][size=75][inlinecode]04. threads[/inlinecode][/size][/center][/quote][/color][/td][td][size=150][color=#A92E25][b]││
││
││
││
││
││
││
││
││[/b][/color][/size][/td]
[td][center][color=transparent]━━━━━━━━━[/color]
[img]/images/upload/emcad8c71ejp.webp[/img][/center][/td][td][size=150][color=#A92E25][b]││
││
││
││
││
││
││
││
││[/b][/color][/size][/td][td][color=#A92E25][quote][center][size=75][inlinecode]05. relations[/inlinecode][/size][/center][/quote][/color][color=#A92E25][quote][center][size=75][inlinecode]06. family[/inlinecode][/size][/center][/quote][/color][color=#A92E25][quote][center][size=75][inlinecode]07. tidbits[/inlinecode][/size][/center][/quote][/color][color=#A92E25][quote][center][size=75][inlinecode]08. ooc[/inlinecode][/size][/center][/quote][/color][/td][td][size=150][color=#A92E25][b]││
││
││
││
││
││
││
││
││[/b][/color][/size][/td][/tr][/table]
[center][color=#A92E25][b][size=200]‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾[/size][/b][/color][/center]
[table][tr][td]🌹[/td][td][quote][center][size=75][i]Year[/i][/size][/center][/quote][/td][td][center][size=200][color=#A92E25][b]C[/b][i]HARACTER'S[/i] [b]N[/b][i]AME[/i][/color][/size][/center][/td][td][quote][center][size=75][i]House[/i][/size][/center][/quote][/td][td]🌹[/td][/tr][/table]