Willows' BBCode Thread Div Box Formatting Tutorials

  • Welcome back, Iwaku! While we are still working on the site to get it back into shape, we've come back online so you can get back to doing what you love. Check out this announcement for more details.

Absyinthe

Creator of Worlds
DONATING MEMBER
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
A Few Posts a Week, Slow As Molasses
My Usual Online Time
Everyday
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
A little bit of both.
Favorite Genres
Fantasy, Modern, Magical, Sc-fi, Horror, Steampunk, anything really
Genre You DON'T Like
I don't really mind Yaoi but something that doesn't have a good plot.
#1


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 Starlighter | GOALS:
Mostly I just want to be able to keep things organized in a neat, aesthetic way.

  

 
Last edited:

Absyinthe

Creator of Worlds
DONATING MEMBER
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
A Few Posts a Week, Slow As Molasses
My Usual Online Time
Everyday
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
A little bit of both.
Favorite Genres
Fantasy, Modern, Magical, Sc-fi, Horror, Steampunk, anything really
Genre You DON'T Like
I don't really mind Yaoi but something that doesn't have a good plot.
#61
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. ^.^
 

Absyinthe

Creator of Worlds
DONATING MEMBER
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
A Few Posts a Week, Slow As Molasses
My Usual Online Time
Everyday
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
A little bit of both.
Favorite Genres
Fantasy, Modern, Magical, Sc-fi, Horror, Steampunk, anything really
Genre You DON'T Like
I don't really mind Yaoi but something that doesn't have a good plot.
#62


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!

 

Starlighter

Consider this the hint of the century
DONATING MEMBER
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
Slow As Molasses
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
Primarily passive, can be aggressive if called for
Favorite Genres
Fantasy, Sci-Fi
Genre You DON'T Like
Anime, Romance, Slice of Life
#63

FIRST



SO PRETTY



Cool picture thing!



Cool picture thing AND IT MOVES!
 

Fox of Hearts

The Angelic Crab
#64
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
 

Sylvinar Cross

Prince of Strawberries
Roleplay Invitations
Group Roleplays, One on One Roleplays, Private Convo Roleplays
Posting Speed
Speed of Light, Several Posts a Day, A Few Posts A Day
My Usual Online Time
I am always on except for the hours I go to sleep at randomly.
Writing Levels
Intermediate, Adept
Genders You Prefer Playing
Male, Female, Futanari, Primarily Prefer Male
Playing Style- Passive or Aggressive
Passive/Aggressive, I prefer collaboration
Favorite Genres
Romance, smut, fantasy, supernatural, fantasy, action, horror, modern, futuristic, furry, anthro, canons
Genre You DON'T Like
Historical,
#65
I want to learn how to make the pretty backgrounds and stuff for character sheets!
 

Astroblaze

Traverser#824|The Ally|Autobot|Knight of Doom
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week
My Usual Online Time
9am-9pm every day, though availability within that span depends on IRL activity
Writing Levels
Intermediate, Adept, Adaptable
Genders You Prefer Playing
Male, Female, Androgynous, No Preferences
Playing Style- Passive or Aggressive
Neutral, passive leanings
Favorite Genres
fantasy, sci-fi, superheroes, action, adventure, combat, science fantasy, supernatural, hurt/comfort, modern fantasy
Genre You DON'T Like
honestly I haven't yet found a genre I specifically don't like
#66
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.
 

Iceydaze

Helter Skelter
DONATING MEMBER
Dragon in a cup
Roleplay Invitations
Group Roleplays, Chat Roleplays
Posting Speed
One Post a Day, A Few Posts a Week, One Post a Week, Slow As Molasses
Writing Levels
Give-No-Fucks, Beginner, Elementary, Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Male, Female, Androgynous
Playing Style- Passive or Aggressive
Passive
Favorite Genres
Fantasy, Modern, Romance, Horror, Historical, Magical, Supernatural, ♥Wuxia/Xianxia♥
Genre You DON'T Like
Furry?
#67
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~☆
 

Astaroth

Chaos is what killed the dinosaurs, darling.
ADMINISTRATOR
DONATING MEMBER
Roleplay Invitations
Group Roleplays, One on One Roleplays, Chat Roleplays
Posting Speed
Speed of Light, Slow As Molasses
My Usual Online Time
It varies a lot depending on my schedule, unfortunately.
Writing Levels
Adaptable
Genders You Prefer Playing
Primarily Prefer Male
Playing Style- Passive or Aggressive
I play what's needed, but I do like to take the lead. In my one-on-ones, I often like being the "Game Master" in the sense of creating the setting, controlling NPCs, and steering the plot. But I still like input and collaboration from my partners. In group games, I prefer to be the GM or to play a leading or mentor role.
Favorite Genres
I love a little bit of everything. My top choices would be Horror, Modern Fantasy, Urban Fantasy, Magical Realism, Noir, Steampunk, Cyberpunk, Splatterpunk, Post-Apocalyptic, Historical, Mystery, old-school High Fantasy, and Sci-Fi (especially Spacesagas). I'd love to do some occasional Clockpunk or Weird West or Wuxia or Dieselpunk, too.
Genre You DON'T Like
I guess the only thing I don't particularly care for is high school drama, and even that can be fun with a good hook.
#68
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.