RESOURCE Willows' BBCode Thread Div Box Formatting Tutorials

Discussion in 'ROLEPLAY SKILLBUILDING' started by Absyinthe, Aug 21, 2016.


  1. [​IMG]

    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.



    [​IMG]
     
    #1 Absyinthe, Aug 21, 2016
    Last edited: Jan 12, 2017
  2. 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 Thank x 1

  3. [​IMG]

    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!

    [​IMG]
     

  4. FIRST



    SO PRETTY



    Cool picture thing!



    Cool picture thing AND IT MOVES!
     
  5. 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
     
  6. I want to learn how to make the pretty backgrounds and stuff for character sheets!