BBCode Div Box Testing

Discussion in 'THE TEST CHAMBERS' started by Absyinthe, Dec 1, 2015.

  1. This thread is for me to test my bbcode layouts and a place to keep all my W.I.Ps for IwakuRoleplay. I'd appreciate it, if you didn't post in my thread. If you have any questions about BBcode, than please send me a private message and I will be glad to help you there. I endeavor to make things fanciful.
     
    #1 Absyinthe, Dec 1, 2015
    Last edited: Apr 26, 2017 at 4:53 PM




  2. [​IMG]





    [​IMG]



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo eros vel justo semper pretium. Sed vitae egestas massa. Duis molestie velit eros, eu feugiat nulla dignissim non. Ut mollis ipsum vitae ultricies hendrerit. Donec pharetra tortor id rutrum tincidunt. Etiam eu rutrum odio. Maecenas at nulla purus.

    Praesent sed metus quam. Nam et arcu bibendum, accumsan ipsum eu, eleifend neque. Aliquam et pellentesque lorem. Phasellus sit amet mi at lacus porttitor tempus. Nullam cursus eleifend sapien, id porttitor mauris congue quis. In ac auctor nibh. Morbi varius gravida pretium. Ut vel purus porttitor, porta eros non, volutpat nunc.

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa nunc, molestie hendrerit placerat ultricies, rutrum ac tortor. Curabitur elit felis, tristique quis nulla ac, scelerisque molestie mauris. Phasellus ante libero, congue convallis risus ac, malesuada lacinia sapien. Sed lobortis justo vitae tortor faucibus, quis maximus dolor eleifend. Phasellus ultrices massa non ipsum porta, eget porttitor lacus iaculis. In at iaculis sem, eget varius nulla. Fusce vel nunc mi. Cras sagittis euismod turpis, ac mollis tortor congue vitae. Aenean eget scelerisque dolor, in mollis metus. Mauris id lectus turpis. In pellentesque in justo vel finibus. Fusce pellentesque mi a ex vulputate viverra.

    Integer posuere non arcu non hendrerit. Vivamus pretium posuere lectus. Phasellus finibus suscipit magna sed sodales. Vestibulum ut maximus risus. Nulla sed egestas arcu, eu mattis neque. Donec volutpat leo lorem, nec dapibus leo malesuada quis. Nulla gravida nunc non nulla aliquam, vel fermentum ex placerat. Phasellus diam sem, feugiat vitae metus vel, rutrum rhoncus tortor. Ut sit amet malesuada est.

    Aliquam sapien mauris, sollicitudin sit amet placerat et, venenatis vitae lorem. Praesent a sollicitudin ex, eu sodales lorem. Curabitur sed dolor sed neque facilisis commodo. Nam consequat facilisis metus, vel imperdiet lectus sagittis in. Vivamus congue risus ut fermentum cursus. Ut ultricies nibh at massa semper, vel tempor metus rutrum. Aliquam vehicula sollicitudin dolor, at dictum leo sollicitudin sit amet.




    [​IMG]



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo eros vel justo semper pretium. Sed vitae egestas massa. Duis molestie velit eros, eu feugiat nulla dignissim non. Ut mollis ipsum vitae ultricies hendrerit. Donec pharetra tortor id rutrum tincidunt. Etiam eu rutrum odio. Maecenas at nulla purus.

    Praesent sed metus quam. Nam et arcu bibendum, accumsan ipsum eu, eleifend neque. Aliquam et pellentesque lorem. Phasellus sit amet mi at lacus porttitor tempus. Nullam cursus eleifend sapien, id porttitor mauris congue quis. In ac auctor nibh. Morbi varius gravida pretium. Ut vel purus porttitor, porta eros non, volutpat nunc.

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa nunc, molestie hendrerit placerat ultricies, rutrum ac tortor. Curabitur elit felis, tristique quis nulla ac, scelerisque molestie mauris. Phasellus ante libero, congue convallis risus ac, malesuada lacinia sapien. Sed lobortis justo vitae tortor faucibus, quis maximus dolor eleifend. Phasellus ultrices massa non ipsum porta, eget porttitor lacus iaculis. In at iaculis sem, eget varius nulla. Fusce vel nunc mi. Cras sagittis euismod turpis, ac mollis tortor congue vitae. Aenean eget scelerisque dolor, in mollis metus. Mauris id lectus turpis. In pellentesque in justo vel finibus. Fusce pellentesque mi a ex vulputate viverra.

    Integer posuere non arcu non hendrerit. Vivamus pretium posuere lectus. Phasellus finibus suscipit magna sed sodales. Vestibulum ut maximus risus. Nulla sed egestas arcu, eu mattis neque. Donec volutpat leo lorem, nec dapibus leo malesuada quis. Nulla gravida nunc non nulla aliquam, vel fermentum ex placerat. Phasellus diam sem, feugiat vitae metus vel, rutrum rhoncus tortor. Ut sit amet malesuada est.

    Aliquam sapien mauris, sollicitudin sit amet placerat et, venenatis vitae lorem. Praesent a sollicitudin ex, eu sodales lorem. Curabitur sed dolor sed neque facilisis commodo. Nam consequat facilisis metus, vel imperdiet lectus sagittis in. Vivamus congue risus ut fermentum cursus. Ut ultricies nibh at massa semper, vel tempor metus rutrum. Aliquam vehicula sollicitudin dolor, at dictum leo sollicitudin sit amet.




    [​IMG]



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo eros vel justo semper pretium. Sed vitae egestas massa. Duis molestie velit eros, eu feugiat nulla dignissim non. Ut mollis ipsum vitae ultricies hendrerit. Donec pharetra tortor id rutrum tincidunt. Etiam eu rutrum odio. Maecenas at nulla purus.

    Praesent sed metus quam. Nam et arcu bibendum, accumsan ipsum eu, eleifend neque. Aliquam et pellentesque lorem. Phasellus sit amet mi at lacus porttitor tempus. Nullam cursus eleifend sapien, id porttitor mauris congue quis. In ac auctor nibh. Morbi varius gravida pretium. Ut vel purus porttitor, porta eros non, volutpat nunc.

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa nunc, molestie hendrerit placerat ultricies, rutrum ac tortor. Curabitur elit felis, tristique quis nulla ac, scelerisque molestie mauris. Phasellus ante libero, congue convallis risus ac, malesuada lacinia sapien. Sed lobortis justo vitae tortor faucibus, quis maximus dolor eleifend. Phasellus ultrices massa non ipsum porta, eget porttitor lacus iaculis. In at iaculis sem, eget varius nulla. Fusce vel nunc mi. Cras sagittis euismod turpis, ac mollis tortor congue vitae. Aenean eget scelerisque dolor, in mollis metus. Mauris id lectus turpis. In pellentesque in justo vel finibus. Fusce pellentesque mi a ex vulputate viverra.

    Integer posuere non arcu non hendrerit. Vivamus pretium posuere lectus. Phasellus finibus suscipit magna sed sodales. Vestibulum ut maximus risus. Nulla sed egestas arcu, eu mattis neque. Donec volutpat leo lorem, nec dapibus leo malesuada quis. Nulla gravida nunc non nulla aliquam, vel fermentum ex placerat. Phasellus diam sem, feugiat vitae metus vel, rutrum rhoncus tortor. Ut sit amet malesuada est.

    Aliquam sapien mauris, sollicitudin sit amet placerat et, venenatis vitae lorem. Praesent a sollicitudin ex, eu sodales lorem. Curabitur sed dolor sed neque facilisis commodo. Nam consequat facilisis metus, vel imperdiet lectus sagittis in. Vivamus congue risus ut fermentum cursus. Ut ultricies nibh at massa semper, vel tempor metus rutrum. Aliquam vehicula sollicitudin dolor, at dictum leo sollicitudin sit amet.




    [​IMG]



    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo eros vel justo semper pretium. Sed vitae egestas massa. Duis molestie velit eros, eu feugiat nulla dignissim non. Ut mollis ipsum vitae ultricies hendrerit. Donec pharetra tortor id rutrum tincidunt. Etiam eu rutrum odio. Maecenas at nulla purus.

    Praesent sed metus quam. Nam et arcu bibendum, accumsan ipsum eu, eleifend neque. Aliquam et pellentesque lorem. Phasellus sit amet mi at lacus porttitor tempus. Nullam cursus eleifend sapien, id porttitor mauris congue quis. In ac auctor nibh. Morbi varius gravida pretium. Ut vel purus porttitor, porta eros non, volutpat nunc.

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis massa nunc, molestie hendrerit placerat ultricies, rutrum ac tortor. Curabitur elit felis, tristique quis nulla ac, scelerisque molestie mauris. Phasellus ante libero, congue convallis risus ac, malesuada lacinia sapien. Sed lobortis justo vitae tortor faucibus, quis maximus dolor eleifend. Phasellus ultrices massa non ipsum porta, eget porttitor lacus iaculis. In at iaculis sem, eget varius nulla. Fusce vel nunc mi. Cras sagittis euismod turpis, ac mollis tortor congue vitae. Aenean eget scelerisque dolor, in mollis metus. Mauris id lectus turpis. In pellentesque in justo vel finibus. Fusce pellentesque mi a ex vulputate viverra.

    Integer posuere non arcu non hendrerit. Vivamus pretium posuere lectus. Phasellus finibus suscipit magna sed sodales. Vestibulum ut maximus risus. Nulla sed egestas arcu, eu mattis neque. Donec volutpat leo lorem, nec dapibus leo malesuada quis. Nulla gravida nunc non nulla aliquam, vel fermentum ex placerat. Phasellus diam sem, feugiat vitae metus vel, rutrum rhoncus tortor. Ut sit amet malesuada est.

    Aliquam sapien mauris, sollicitudin sit amet placerat et, venenatis vitae lorem. Praesent a sollicitudin ex, eu sodales lorem. Curabitur sed dolor sed neque facilisis commodo. Nam consequat facilisis metus, vel imperdiet lectus sagittis in. Vivamus congue risus ut fermentum cursus. Ut ultricies nibh at massa semper, vel tempor metus rutrum. Aliquam vehicula sollicitudin dolor, at dictum leo sollicitudin sit amet.

    Wonder
    Content

    Roleplay Perks
    Content

    Rules & Guidelines
    Content

    Character Introductions
    Content

    Cast List
    Content


     
    #2 Absyinthe, Dec 16, 2015
    Last edited: Apr 19, 2017

  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]
     
    #3 Absyinthe, Dec 30, 2015
    Last edited: Feb 12, 2017
    • Thank Thank x 1
  4. Character Art Commissions Layout; STATUS - W.I.P.
    --------------------------------------------------------------------------------------------------------


    Art Commissions Header goes here





    Rules and Request Forms go here





    Welcome to my Character Art Commissions Shop. I offer a variety of character related art for you to purchase. With very little hours at my job, I desperately need another way to supplement income for my bills each month. I offer this service to IwakuRoleplay, in hopes that my talent may heed a way to not struggle with expenses. The first service I offer is making Character Headshots. Basically, a fully colored drawing of all the features your character's head has. This drawing usually stops at the tips of the shoulders. If you wish to buy a C.H. than the base price is 4$.

    Secondly, I also offer fully colored Character Busts. This means the drawing (male or female) will be drawn from head to waist in whatever fashion you desire. If you wish to purchase this service, the base price is 5$. For those who wish to have full scale references for their characters, I also offer Character Full Body portraits to buy. The base price for this service is 7$. I also offer two extra services for those who want a more detailed artwork of their character.

    The first service; is a Character I.D. These are 800x400 identification cards that you can post with any reply or character sheet. The I.D.'s will have up to two rounded portraits of your character on the card. Then there can be several ways you can customize the badge. For instance, you could have the character's basic information displayed such as; name, age, and species among other things. You could even request for a portrait for your character's second form as a reference too. Whatever you want others to know about your character, I can design an I.D. just for that. To purchase this service, the base price is 10$.

    Finally the last service I offer is called a "Character Style Template". These are a mixture of Bbcodes and artwork to come together into a personalized template or reference sheet for any character you want! Each template comes with three character portraits. These sheets can be customized to the utmost and are a great way to showcase your favorite characters all over the site. If you wish to purchase this service, the base price is 12$. Thank you for coming to my shop! Below, you can find many examples of the services I offer. As well, there also is a section about my payment method and request forms. Thanks again!






    Character Headshot Examples

    Examples of C.H. will go here.


    Character Bust Examples

    Examples of C.B. will go here


    Character Full Body Examples

    Examples of C.F.B. will go here


    Character I.D. Examples

    Examples of C.I.D. will go here


    Character Style Template Examples

    Examples of Character Style Template will go here







     
    #4 Absyinthe, Jan 6, 2016
    Last edited: Apr 26, 2017 at 4:49 PM
  5. WIP
     
    #5 Absyinthe, Jan 11, 2016
    Last edited: Apr 14, 2017
  6. Myranda Poppy Willthe Official Character Div Box goes here WIP
     
    #6 Absyinthe, Jan 11, 2016
    Last edited: Nov 15, 2016
  7. WIP
     
    #7 Absyinthe, Jan 12, 2016
    Last edited: Apr 14, 2017
  8. Yacoub Floros Official Character Div Box WIP
     
    #8 Absyinthe, Jan 26, 2016
    Last edited: Nov 15, 2016
  9. WIP
     
    #9 Absyinthe, Jan 26, 2016
    Last edited: Apr 14, 2017
  10. WIP
     
    #10 Absyinthe, Jan 28, 2016
    Last edited: Apr 14, 2017
  11. Corinne Deering Official Character Box
     
    #11 Absyinthe, Feb 13, 2016
    Last edited: Nov 15, 2016
  12. WIP
     
    #12 Absyinthe, Feb 25, 2016
    Last edited: Apr 14, 2017
  13. WIP
     
    #13 Absyinthe, Mar 14, 2016
    Last edited: Nov 15, 2016
  14. WIP
     
    #14 Absyinthe, Mar 25, 2016
    Last edited: Nov 15, 2016

  15. [​IMG]

    This is for Roleplay Perks Guide

    [​IMG]
     
    #15 Absyinthe, Apr 1, 2016
    Last edited: Sep 24, 2016
  16. WIP
     
    #16 Absyinthe, Apr 7, 2016
    Last edited: Apr 14, 2017
  17. WIP
     
    #17 Absyinthe, Apr 12, 2016
    Last edited: Apr 14, 2017
  18. WIP
     
    #18 Absyinthe, Apr 15, 2016
    Last edited: Apr 14, 2017
  19. WIP
     
    #19 Absyinthe, Apr 17, 2016
    Last edited: Apr 14, 2017
  20. #20 Absyinthe, Apr 17, 2016
    Last edited: Apr 21, 2017