Infobox Demo and Tutorial

Discussion in 'Character Biographies' started by admin, Sep 3, 2017.

  1. STARBOUND ROLEPLAY - A STARBOUND COMMUNITY

    PSA - Harassment Warning (Part 2) With Effect from 12 February 2017

    This forum is currently still getting ready. If you need to register an account here, please goto Newdawn website. Each new account will be sync manually for the time being. Should you need to change your avatar, password and any other stuff, you have to do it in Newdawn website as well as here.

    Eventually the forum will take all data from Newdawn when it is ready hence it is better to also apply your changes at Newdawn website to avoid getting rollback :)
  1. admin

    admin Super Administrator
    Staff Member Super Administrator Administrator Super Moderator Moderator

    Joined:
    Jan 26, 2017
    Messages:
    1
    Likes Received:
    0
    Primal Fanta Dorumon
    [​IMG]
    Biographical Information
    TypeDigimon and Pokemon
    InheritPrimal Dialga
    More Information
    LikesFanta
    HatesBattle
    This is a demo of the new infobox functionality! It is responsive hence it supports on both desktop and mobiles. (Older mobiles/browser that doesn't support css 3 may not display properly, please update your browser if that's the case) We recommend using Chrome/Firefox latest version for full compatibility.

    To use it, you can simply use the following template as shown below:
    It depicts the same demo as shown on the right of this text >>>


    Code:
    [infobox="color: orange;"]
    [infoboxheader="background-color: green;"]Primal Fanta Dorumon[/infoboxheader]
    [infoboximage][IMG]http://newdawn.aggressivegaming.org/attachments/primal-fanta-dorumon-png.829/[/IMG][/infoboximage]
    
    [infoboxheader="background-color: #FF0000;"]Biographical Information[/infoboxheader]
    [infoboxcontent=Type]Digimon and Pokemon[/infoboxcontent]
    [infoboxcontent=Inherit]Primal Dialga[/infoboxcontent]
    
    [infoboxheader][COLOR=#00ff00]More Information[/COLOR][/infoboxheader]
    [infoboxcontent=Likes]Fanta[/infoboxcontent]
    [infoboxcontent=Hates]Battle[/infoboxcontent]
    [/infobox]
    Primal Fanta Dorumon
    [​IMG]
    Biographical Information
    TypeDigimon and Pokemon
    InheritPrimal Dialga
    More Information
    LikesFanta
    HatesBattle
    This infobox is coded to be super flexible in design. All you need are these 4 BBCodes and you can create your own custom info boxes!

    To use it, you can simply use the following template as shown below:

    <<< It depicts the same demo as shown on the left of this text

    Code:
    [infobox="float:left;"]
    [infoboxheader]Primal Fanta Dorumon[/infoboxheader]
    [infoboximage][IMG]http://newdawn.aggressivegaming.org/attachments/primal-fanta-dorumon-png.829/[/IMG][/infoboximage]
    
    [infoboxheader]Biographical Information[/infoboxheader]
    [infoboxcontent="Type"]Digimon and Pokemon[/infoboxcontent]
    [infoboxcontent="Inherit"]Primal Dialga[/infoboxcontent]
    
    [infoboxheader]More Information[/infoboxheader]
    [infoboxcontent="Likes"]Fanta[/infoboxcontent]
    [infoboxcontent="Hates"]Battle[/infoboxcontent]
    [/infobox]
    1. Base Infobox:
    Code:
    [infobox="Optional css insert here"][/infobox]
    This is required for any of the infobox. It serves as a base container for other infobox element to float on the right as shown in the demo.

    2. Infobox Header:

    Code:
    [infoboxheader="Optional css insert here"][/infoboxheader]

    Header is a separator to categories the information shown in the infobox.

    3. Infobox Images:

    Code:
    [infoboximage="Optional css insert here"][/infoboximage]

    This displays images in the infobox. It will resize all the big picture exceeding 300px in size. It support images from url or from XF attachments.

    4. Infobox Content:

    Code:
    [infoboxcontent="Title"]Message[/infoboxcontent]

    This displays information with a title and a message as shown in the demo.

    CSS Quick Reference:

    1. CSS background-color Property
    The background-color property sets the background color of an element.
    background-color: yellow;
    background-color: #00ff00;
    background-color: rgb(255,0,255);



    2. CSS color Property
    The color property specifies the color of text.
    color: red;
    color: #00ff00;
    color: rgb(0,0,255);


    Preemptive Questions (FAQs):
    1. Can I change the background colour of the section header to something else instead of dark blue?
    A: Yes you can via the following css: [infoboxheader="background-color: blue;"]
    "background-color" property changes the background colour of the infobox header.

    2. How do I change the font colour of the header?
    A: You can change using the color property or simply change the text colour using the forum editor:
    [infoboxheader="color: blue;"]More Information[/infoboxheader]
    [infoboxheader][COLOR=#00ff00]More Information[/COLOR][/infoboxheader]


    3. Infobox too small... can I enlarge it?
    A: You can change the size to your liking but do note that the image is capped at 300 px for optimal purposes.
    [infobox="width: 500px;"]

    4. Must the infobox be always on the right?
    A: Nope. You can always use the left version by adding "float" property in the base infobox css field.
    [infobox="float: left;"]