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. i'm ready to move on when you guys are.
     
    • Love Love x 1
  3. 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 Love x 2

  4. [​IMG]

    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

    [​IMG]
     
  5. 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 Love x 1
  6. 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
     
    • Love Love x 1
    • Thank Thank x 1
  7. 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!
     
  8. 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?
     
  9. 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 Love x 1
  10. Thank you and yes, I kind of noticed that 7 was the max. xD
    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 Love x 1
  11. @Vendethiel Of course you can learn too! Anyone can! :D The list is updated!

    I will push out the next tutorial soon!
     
  12. 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.
     
    • Love Love x 2
    • Bucket of Rainbows Bucket of Rainbows x 1
  13. 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 Love x 1
  14. Not a problem @Meggie I will add your name to the list! I am working on the next lesson right now~
     

  15. [​IMG]

    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:
    [​IMG]

    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

    [​IMG]
     
    • Like Like x 1
  16. 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 Love x 1
    • Love Love x 1
  17. Yes @Vendethiel you would just add the a to the end and then equals to whatever alignment you want. ^.^
     
    • Thank Thank x 1
  18. 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 Love x 1
  19. That's just fine, the assignments are purely for your learning benefit. ^.^ I'll add your name to the list! Thanks for stopping by!
     
  20. 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

    [​IMG]


     
    • Love Love x 1