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:
Excellent! They look great! Good job, Starlighter. After I get home from work today I will be creating the first lesson that dives into the world of making div boxes! Be prepared for some long lessons in the future. ^.^
 
  • Thank You
Reactions: Starlighter

ex8sbFL.png

Creating Div Boxes - Part One: Backgrounds
This is a Box Model. This is how I first learned about making div boxes. Since Iwaku only uses BBcode we will have to modify the HTML version into a more readable version for Iwaku. There will be many parts to this series and each one will break down different aspects of how I make a div box. For my div boxes I usually have these main parts: Background, Border, Margin, Padding, Width, and Font Color. The first part will break down the background codes.

Now that we have gotten the basics out of the way, we can now dive into the world of creating Div Boxes!! If you have any questions feel free to ask! For div boxes we will use a lot of CSS.


The first property I start with when making a div box is the background. There are several codes for creating backgrounds, as well, as a shorthand property that specifies all of them at once. The first property is
background-color. You can specify a background color with a predetermined color name such as "red". Here is a list of all Color Names that are available to use. The one I use the most for background colors is Hexadecimal values. Hexadecimal color values are also supported in all browsers. For more information on colors you can go here.


This is a box specified as the color name red.



This is a box specified as the hexadecimal value #0000FF.



Code:
[div=background-color: red;]
This is a box specified as the color name red.
[/div]

[div=background-color: #0000FF;]
This is a box specified as the hexadecimal value 	#0000FF.
[/div]
The second code for specifying backgrounds is called the background-image property and as you may have guessed, it can be used to set an image as the background of your div box. You must get the direct URL for the image in order for it to show up on your box.


This is a background image


Code:
[div=background-image: url(http://i.imgur.com/CgWu9JE.png);]
 This is a background image
[/div]

background-repeat specifies whether the image will repeat itself or not. By default, the background-image property repeats an image both horizontally and vertically. If you want to repeat an image only horizontally the code looks like this:
Code:
   background-repeat: repeat-x;

If you want to repeat an image only vertically the code would look like this:
Code:
background-repeat: repeat-y;

If you don't want your background image to repeat at all here is the code to specify it.
Code:
background-repeat: no-repeat;

background-position specifies where the image will be placed in the box. This is usually done if you don't have the image repeating.

The shorthand property for all of these codes and background-attachment code is thus:


The fixed code will make the image scroll when you move the page. You should always specify the first color value in case some people's browsers don't load the image properly. It will show the color instead.


Code:
[div=background:#0000FF url(http://i.imgur.com/CgWu9JE.png) repeat center fixed;]
This is the background shorthand property.
[/div]

The fixed code will make the image scroll when you move the page. You can just remove it from the code if you don't want it to move. You should always specify the first color value in case some people's browsers don't load the image properly. It will show the color instead. This is the main idea behind backgrounds for div boxes.

Part Two of Creating Div Boxes will explain all about borders and even border images to add to your div boxes. Thanks for tuning into this lesson!

LHjM5Tn.png
 

FIRST



SO PRETTY



Cool picture thing!



Cool picture thing AND IT MOVES!
 
Hello! Are you still accepting students? I've been looking for someone to teach me about div boxes and fancier post format stuff for awhile now. My goal for enrolling is to learn the nitty gritty of div boxes and other bbcoding that I've never used before. I really want to create pretty post formats! =P
 
I want to learn how to make the pretty backgrounds and stuff for character sheets!
 
Yeet! This is (probably) what I'm looking for! Is it too late to sign up? I basically just want to know about everything the basic site help section doesn't explain, especially all the glory of divboxes. If I could just have, like, a cheat sheet of what all the variety of things I've seen (and not seen, of course) in divbox-using templates (like for CSs and such for advanced RPs) mean and do, I think that'd be sufficient for me to puzzle out the rest on my own.
 
Hello! Are you still accepting students? I've been looking for someone to teach me about div boxes and fancier post format stuff for awhile now. My goal for enrolling is to learn the nitty gritty of div boxes and other bbcoding that I've never used before. I really want to create pretty post formats! =P
I want to learn how to make the pretty backgrounds and stuff for character sheets!
Yeet! This is (probably) what I'm looking for! Is it too late to sign up? I basically just want to know about everything the basic site help section doesn't explain, especially all the glory of divboxes. If I could just have, like, a cheat sheet of what all the variety of things I've seen (and not seen, of course) in divbox-using templates (like for CSs and such for advanced RPs) mean and do, I think that'd be sufficient for me to puzzle out the rest on my own.

So, I am not completely sure if what the grayish name means but I'm half sure it's a sign of inactivity. If not, this post is pointless but oh well.

Either way, I'll let you guys know what might help a bit since these threads helped me a lot. Hope you guys have patience for plenty of trial and error.

FIRST OFF THIS TREASURE
The Bbcode help thread is so helpful. Not only everything under the helpful links but just reading through the thread explains a lot.

Also, Here you can look through and see if anyone offers bbcode. Some still do custom sheets others offer premade templates. Either way it's also super nice.

And of course Freebies Rissa made.

I also hope you guys are good at tearing things apart and figuring things out. Good luck~☆
 
So, I am not completely sure if what the grayish name means but I'm half sure it's a sign of inactivity. If not, this post is pointless but oh well.

Light grey names mean that the user has logged in at least in the last 60 days but hasn't posted in any threads for over 30 days. A lot of people who only use Inbox Conversations/PMs or Clans (or just lurk and hang out) show up as Lurkers. In the thread owner's case, she was last online 7 hours ago as of this post, so she may just not be paying attention to this thread anymore. If she goes inactive (dark grey name, hasn't logged in for 60 days) this thread will get archived, but in the meantime we leave these threads so that they might be useful to someone and so the thread owner can come back to it.

Your tips are great though! Thanks for stepping in so people weren't left hanging.