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've been super busy with real life and other Content endeavors. I am currently writing up a large tutorial that covers the rest of the BBcode basics so we can jump into making basic div boxes and then fancy ones! :D
 
  • Love
Reactions: Dip and cosmic

ex8sbFL.png

Hello students! I have prepared a mighty lesson for this moment, since it has been so long.
First we'll discuss the basic, Bold, Italic, Strikeout, and Underline BBCodes:
This is very bold text.
This text is slanted
It is hard to see this text
This text is important!

If you could please copy and change the code below to show me your knowledge of these codes:

Code:
[B]Write a sentence with a bold style here.[/B]
[I]Write a sentence with an italicized style here.[/I]
[S]Write a sentence that struck through here.[/S]
[U]Write a sentence that is underlined here.[/U]



Now, the next two parts consist of the Size code and the Font code:
This is the smallest size you can make your text
This is the largest size you can make your text

Please copy this code and add the missing size values. (e.g 2,3,4,5,6):
Code:
[SIZE=1]This is the smallest size you can make your text[/SIZE]


[SIZE=10] This is the largest size you can make your text[/SIZE]



Font codes are a great way to change the text font. This link will help you know what Web Safe Fonts you can use when using this code.
This is the font "Georgia".
This is the font "Times New Roman".
This is the font "Arial".

Please write three sentences of your own with different fonts of your choice:
Code:
[FONT=Name]Write your sentence here.[/FONT]
[FONT=Name]Write your sentence here.[/FONT]
[FONT=NAME]Write your sentence here.[/FONT]

I think that should do it for this one!
If you guys have any questions let me know. The next lesson will be about URL linking, Profile Linking, and how to code images into your posts with a variety of styles! :D

LHjM5Tn.png
 
Damn it! I found interesting the way you created those pretty Profiles DIV Boxes on Seasonal Island, so I wanted to learn so badly how to do it since that day. Am I too late to join? I've read everything and if I can join, I would like to learn all of the basics before proceeding to evolve into a DIV Box Master.
 
  • Love
Reactions: Absyinthe_Artica
It is never too late for anyone to join. I will teach anyone who wants to learn!
I'll update the list with your name and goals and if you want you can follow the first two exercises in this thread. :D
 
Here are my assignments, Sensei!

First Part:
The sky looks so beautiful today.
People would kill to put their hands in something like this.
This reminds me of veggies.
What it feels to fall in love.

Second Part:
That guy will feel my rage after reading this!
This is perfect for quotes, I guess.
I watch you while you sleep.
NOTICE ME, SENPAI.

Third Part:
This is the smallest size you can make your text
This
part
is
too
much
work,
Sensei!
This is the size before the largest size
This is the largest size you can make your text


Part Four:
Finally finished my assignments.
I had a lot of fun, Sensei.
Can't wait to learn more of this!
 
WELL DONE!! A++ For all the effort! I have found out that 7 is the largest size and any number above that will be changed to 7. :D What are you looking forward to learning next tutorial?
 
I would like to learn too. I've just been afraid to bother you and that I'd completely not get it.
If you have time, could I learn from you anything you have to offer? I want to make those boxes as well, they look awesome.
 
  • Love
Reactions: Absyinthe_Artica
WELL DONE!! A++ For all the effort! I have found out that 7 is the largest size and any number above that will be changed to 7. :D What are you looking forward to learning next tutorial?
Thank you and yes, I kind of noticed that 7 was the max. xD
I think that should do it for this one!
If you guys have any questions let me know. The next lesson will be about URL linking, Profile Linking, and how to code images into your posts with a variety of styles!
That's the next thing I definitely want because I'm pretty sure I need to learn that before creating a DIV Box just like yours.
 
  • Love
Reactions: Absyinthe_Artica
@Vendethiel Of course you can learn too! Anyone can! :D The list is updated!

I will push out the next tutorial soon!
 
Thank you! I did the earlier lessons too.

Orchids are nice.
A nice color for red wine wouldn't you agree?
Orange you feeling nice today? :p
That's a light blue!


Bold. Bold. I like Bold, do you? That's bold.
Are you having a Happy Thanksgiving?
Only six no five more days left before FFXV drops.
This is important!



The room, her new room, had been kind of him to do
The rift deepened all these years.
She expected, no demanded, that he go with her conditions so pure surprise and disgust contorted her face when he told her he loved her.
"W-What?" The girl's arms dropped to her sides. She shook her head furiously.
Malevolence captured her, sunk its greedy claws into her now shaking body to hear his counterattack.
Almost to the end.
The Finale!



Look what I did!
I like this font a lot.
Another sentence of structure.
 
I'd like to sign up too!
I know about coding I take a class but I'm not sure how to do this is on here I just wanna know how to make my posts look pretty..
 
  • Love
Reactions: Absyinthe_Artica
Not a problem @Meggie I will add your name to the list! I am working on the next lesson right now~
 

ex8sbFL.png

Welcome back students! Today we will be learning about URL Linking, Profile Linking, and Image styles.
The first most basic style of URL linking is just linking the full address of the URL:
RESOURCE - Willows' BBCode Thread Div Box Formatting Tutorials

You do this by taking the web address and placing it between two URL tags. This will give a link with the address name.

Code:
[URL]https://www.iwakuroleplay.com/threads/willows-bbcode-thread-div-box-formatting-tutorials.148133/#post-3093465[/URL]

The second way to link an URL is by indicating a name for the URL you want to link to.
Willows BBCode First Page

You do this by putting the link in the url tag with an equals sign and placing the link text inbetween each URL tag.

Code:
[URL=https://www.iwakuroleplay.com/threads/willows-bbcode-thread-div-box-formatting-tutorials.148133/#post-3093465]Willows BBCode First Page[/URL]

If you want to directly tag another member you can go to their profile page and copy and paste the number in the address bar with the USER tag and it will notify them.
WhisperingWillows

Code:
[USER=10684]WhisperingWillows[/USER]

Finally we will finish off this lesson with all the various styles of images you can do on Iwaku!
Here is the basic image:
Swd67Gg.png


If you place a direct link of an image between two IMG tags you can post an image to Iwaku.

Code:
[IMG]IMAGE URL GOES HERE[/IMG]

If you want to align your images with your text, the code is a bit different.
<This image is aligned to the left of the screen.
<This image is aligned to the center of the screen.
This image is aligned to the right of the screen.>

Code:
[IMGA=left]IMAGE URL GOES HERE[/IMGA]
[IMGA=center]IMAGE URL GOES HERE[/IMGA]
[IMGA=right]IMAGE URL GOES HERE[/IMGA]

To host my images, I usually use IMGUR.com but there are many other sites like Photobucket, Tinypic, and others that you can use to get a direct link of your image you want to post on Iwaku. If you have any questions, let me know!

Next lesson will be diving into the basics of DIV boxes and how to construct them. :D

LHjM5Tn.png
 
  • Like
Reactions: Stray Shinku
Already knew everything about this lesson, but it was great to refresh everything. Cannot wait to finally jump in into the DIV boxes stuff.
 
  • Love
Reactions: Absyinthe_Artica
Yes @Vendethiel you would just add the a to the end and then equals to whatever alignment you want. ^.^
 
  • Thank You
Reactions: 1 person
Hey! I'm so glad I stumbled across this magical thread of knowledge you have - all the stuffs look so cool, and I'd love to learn from you! Mostly I just want to be able to keep things organized in a neat, aesthetic way. :D I will attempt to complete all the assignments you've given so far but it may take me a fair while as I may not have much time over the next few days, sadly. :(
 
  • Love
Reactions: Absyinthe_Artica
That's just fine, the assignments are purely for your learning benefit. ^.^ I'll add your name to the list! Thanks for stopping by!
 
At long last, I have finally completed my assignments, Sensei! *attempts to bow gracefully, nearly topples over instead*



Green is the color of life and all living things
Red, the blood of angry men
Of Princesses, and quiet regal femininity
And here we see - oh, it's just green again...

This is an underline, not an overline.
Shhhhhhhh!
Okay, now listen!
Oh, never mind. I had nothing to say anyway.

Tiny
Tiny wannabe
Not tiny anymore
Somewhere in the middle
Getting bigger....
Pretty big....
BIGGEST!


I like to think I'm a sheriff, sometimes.
I am aware that it's really silly...
But meh...

http://www.w3schools.com/cssref/css_websafe_fonts.asp
Look! Pretty colours!
@Starlighter

C0NatsP.jpg



 
  • Love
Reactions: Absyinthe_Artica