Willows' BBCode Thread Div Box Formatting Tutorials

Absyinthe_Artica

Creator of Worlds
Original poster
FOLKLORE MEMBER
Invitation Status
  1. Not accepting invites at this time
Posting Speed
  1. One post per day
  2. 1-3 posts per week
  3. One post per week
Online Availability
Everyday
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Adaptable
Preferred Character Gender
  1. Male
  2. Female
Genres
Fantasy, Modern, Magical, Sc-fi, Horror, Steampunk, anything really

ex8sbFL.png

After several of you asking me about how to format their posts like mine, I have decided to host Formatting Tutorials in this thread for all of you who want to learn the ins and outs of BBcode Thread Div Boxes and other BBcode that I have knowledge in. We'll start with the basics of div boxes and how they work. I will also link several resources that I use personally to help format my posts with. Once those of you who want to learn have gotten down the basics of making these div boxes, we will dive into the fun CSS styling parts that go into making them as fancy as my formatting. I will try my best to make this a fun and easy way to learn fancy BBcode formatting.

If you want to participate in the tutorials could you please post a synopsis of what you want to learn about below?

In this first post I will keep track of the Usernames of who is participating and what they want to learn about as well. I am eager to teach all of you my way of making BBcode Thread Div Boxes and more!

Once at least three people sign up I will start the first tutorial which discusses all about resources I use and the basics of Div boxes.



Learning Members and their Goals

XIII | GOALS:
First off, I'd love to learn the basics. What the codings are, what they mean, and how to put them together to create a simple layout with an image. That's my first goal.

Boba Fit | GOALS:
To learn everything about coding and becoming a Div Box Master!

Saralaxy | GOALS:
To learn the basics and then scale up to become a Div Box Master!

Dip | GOALS:
To give my writing a visual flair and to learn all about making fancy formatting.

Cosmic | GOALS:
To not fall short when I code, and to make pretty div boxes for my posts.

Maree | GOALS:
To learn all the things about basic BBcode formatting and then go up to creating thread boxes for my posts.

Shinku-Kun | GOALS:
I would like to learn all of the basics before proceeding to evolve into a DIV Box Master.

Vendethiel | GOALS:
I want to make those boxes as well, they look awesome.

Meggie | GOALS:
I just wanna know how to make my posts look pretty..

Starlighter | GOALS:
Mostly I just want to be able to keep things organized in a neat, aesthetic way.


LHjM5Tn.png
 
Last edited:
I updated the first post with your information ! Thanks for signing up! I want as many people who need help to come and learn all about the ways of BBcode~
The first tutorial will be Saturday, September 3rd. It will address the ways to begin writing BBcode, and the most basic code.
[color, size, font, bold, italic, strike-through, underline, and more!]
 
Hmm... I'm writing up the first tutorial. The website I use to make my color palettes and backgrounds has been down for nearly a day now.. Sad Willows
 
  • Like
Reactions: XIII
Grr! Darn that website!!
 
However, I am currently working out substitutes in case they happen to screw up the site so bad with the update they are working on now. :P


ex8sbFL.png


This lesson will focus on the basic BBCode that Iwaku has. Remember whenever you are writing code you must switch to the "BBCode Editor" instead of the rich text editor that first shows up in the comment box. This will ensure that your code has a better chance of not randomly breaking. All BBCode begins and ends with brackets. These are brackets: [ ] .

-Fun Tidbit--HTML uses greater than and less than signs to enclose it's code and requires quotation marks. (<"">)---

However since IwakuRoleplay supports Bbcode mostly [You can use some aspects of CSS&HTML with BBCode versions. Ex. Div Boxes] we will be using brackets to hold our code in, and we won't be needing the quotation marks necessarily. The first code that is a basic tool to use is the color BBCode. This code allows you to color text when it is placed in between the beginning tag and ending tag. Every code needs a tag to specify it's attributes in the beginning, and to close the code at the end. You close tags with a / in front of the code name.

Now, when coloring text be SUPER DUPER careful and check what it looks like on all themes on Iwaku so that your color is legible for all eyes. As a designer and coder you want to make sure your end product looks exactly how you imagined on all themes that Iwaku has. This is vital especially when trying to get players for roleplays. At the end of this tutorial, there will be exercises and practice for you students. You can put a color into the code in one of two ways. If the color you want has a supported color name listed here, than you can type the color name after the code value. The second way to input a color and usually the most accurate is the hex-code number. You can play with the color picker and find the hexcodes for all colors on this website.

Here are some examples of colored text:
The Ocean is a deep and mysterious place.
Flowers are really awesome and beautiful.
The grass grows long and green in the rainy season.
Citrus fruit is yummy and good for your body.

NOW STUDENTS! I would like all of you to copy this code:
Code:
[COLOR=COLOR NAME]Write sentence here, please.[/COLOR]
[COLOR=COLOR NAME]Write sentence here, please.[/COLOR]
[COLOR=HEXCODE]Write sentence here, please.[/COLOR]
[COLOR=HEXCODE]Write sentence here, please.[/COLOR]

And pick two color names from the first link, and two hex-codes from the second link and write a sentence that reflects the colors you chose. After you all have posted I will write up the next tutorial on Bold, Italics, Strike-through, and Underline Coding.





LHjM5Tn.png
 
  • Love
Reactions: Dip
I'm Beige, da-bo-dee-da-bo-die.
I'm Chartreuse, da-bo-dee-da-bo-die.
I'm #004d00, da-bo-dee-da-bo-die.
I'm #0000ff-- otherwise known as BLUE DA-BO-DEE-DA-BO-DIE, DA-BO-DE-DA-BO-DIE.
 
Very good, Dip! The only critique I have is that it is a little hard to read your third color on the "Dusk" theme. ^.^
 
  • Love
Reactions: Dip
Oh, so pretteh!!
Grr! I'm a big angry fire!
It's Bear! In the big blue house!!
Pretteh pretteh flowers! Yaaay!
 
  • Love
Reactions: Absyinthe_Artica
EXCELLENT!! I can read all the colors you chose, hon! I love your Bear in the Big Blue House Reference. :p
 
  • Love
Reactions: XIII
Lol thank you! I used to love that show when I was younger.
 
  • Love
Reactions: Absyinthe_Artica
i forgot to watch this thread so i saw the lesson late sorry
yay pretty colors!
do these colors even go well together
probably not
 
Whoops, sorry for being late!
Life kinda hit me up.
Schools coming up and shit so yeah.
[COLOR= #7300e6]Here are my colors though. ^-^[/COLOR]
 
  • Love
Reactions: Absyinthe_Artica
I apologize for my tardiness.
I am only online for a couple hours a day.
I also spent many hours creating my amazing signature.
These colors are pretty close to matching my custom Ad Styler theme.
 
  • Love
Reactions: Absyinthe_Artica
@cosmic ; Good, but I can't read your third color on the sunrise theme~
@Maree ; Good job I can read all colors on my current theme. It's okay, there is no rush to learning here :)
@Saralaxy ; GREAT JOB I can see all your colors well and life happens~
@Boba Fit ; Wonderful, a little bright on the sunrise theme but I can still read them.

Now, has everyone gotten the color code down? Do you have any questions before we move onto the next basic code?: Bold, Italics, Strike out, and Underline
 
  • Love
Reactions: XIII
No questions, here!!
 
  • Love
Reactions: Absyinthe_Artica
It isn’t really about those, but it is about formatting.

Are the only fonts that Iwaku supports the given fonts in the Rich Text Editor? Or could we bbcode, or HTML code a wider variety of fonts?
 
  • Love
Reactions: Absyinthe_Artica
The ones in the rich text editor will work, but there is also Websafe Fonts that you can use if none of the ones on Iwaku suit your fancy. Other than that those are the only fonts that work on Iwaku :)
 
I have a question to do with italics, actually! I understand that there is the right lean, but is there a way to manipulate the code to create a left lean italics?​
 
  • Love
Reactions: Absyinthe_Artica
Well, your question got me curious so I tried to look it up...to no avail however. It seems like italics is hard coded to ONLY lean to the right and there is absolutely no way to change it HTML or BBcode wise. So nope, there isn't a way to make it have a left slant. D:
 
  • Useful
Reactions: Dip